User Profile SDK

Giới thiệu

User Profile SDK cung cấp giao diện thông tin người dùng khi đã đăng nhập với hệ thống GG ID. User Profile SDK bao gồm các chức năng chính như sau:

Đăng nhập bằng tài khoản GG, Facebook, Apple, Google, ZingID, Chơi ngay (Protected Guest)
Hiển thị thông tin người dung đã đăng nhập với hệ thống GG ID
Nhúng vào ứng dụng website để thực hiện đăng nhập, hiển thị thông tin người dùng
Hiển thị thông tin từ ứng dụng tích hợp (Payment, Loyalty...)

Thông tin tích hợp

Để đăng ký ứng dụng, bạn vui lòng liên hệ qua email BaoNQ3 để lấy thông tin clientId, serviceId và ssoUri.

Tích hợp User Profile SDK

1. Thêm User Profile SDK vào dự án

Nhúng đoạn code sau vào thẻ body

// Khởi tạo widget
window.widgetHubInit = function () {
  widgetHub.init({
    clientId: "984745454866530308",
    mode: "PORTAL", // PORTAL || GAME_SITE
    methods: ["GG", "ZING", "APPLE", "FACEBOOK", "GOOGLE", "PROTECTED_GUEST"],
    lang: "en",
    gamesInfo: [
      {
        clientId: "984745454866530326",
        clientName: "Võ lâm truyền kỳ MAX",
        clientLogoUrl: "https://cdn-gg.vnggames.app/logo/client_logo_jxm3.png",
      },
      {
        clientId: "984745454866530324",
        clientName: "Võ lâm truyền kỳ Mobile",
        clientLogoUrl: "https://cdn-gg.vnggames.app/logo/client_logo_jxm.png",
      },
      {
        clientId: "984745454866530325",
        clientName: "Võ Lâm Truyền Kỳ 1 Mobile",
        clientLogoUrl: "https://cdn-gg.vnggames.app/logo/client_logo_jx1m.png",
      },
      {
        clientId: "984745454866530312",
        clientName: "Kiếm Thế Origin",
        clientLogoUrl: "https://cdn-gg.vnggames.app/logo/client_logo_ktovn.png",
      },
    ],
    gamesConfig: {
      displayType: "LIST", // LIST | GRID
      showSearch: true,
    },
    options: {
      test: 1,
    },
    extendedParams: {
      ext: 2,
    },
    customCSS: ` // Tuỳ chỉnh CSS phù hợp với website
          .gg-btn {
            border-radius: 5px !important;
          }
        `,
    userProfile: {
      enable: true,
      serviceId: "vnggames.app",
      ssoUri: "https://test-sso.vnggames.app",
      locales: {
        // Bản địa hoá thông tin hiển thị thêm
        Loyalty: {
          en: "Loyalty",
          vi: "Khuyến mại",
          th: "ความจงรักภักดี",
          id: "Kesetiaan",
          "zh-Hans": "忠诚度",
        },
      },
      onReady: () => {
        console.log("USER PROFILE INITED");
        widgetHub.doRenderUserProfile("gg-user-info", (data) => {
          if (data?.type === "BUTTON_LOGIN") {
            console.log("Button login rendered");
          } else if (data?.type === "USER_PROFILE_LOADED") {
            widgetHub.doUpdateExtendData([
              {
                labelKey: "Loyalty",
                value:
                  '<div style="color: #ED7C2B; display: flex; align-items: center; gap: 0.5rem;"> <img width="24px" height="24px" src="https://cdn-gg.vnggames.app/logo/loyalty.png"/> 100 Coins</div> ',
              },
            ]);
          }
        });
      },
      onLogout: (turnOffLoading) => {
        turnOffLoading();
        // Handle logout
      },
    },
    onReady: () => {
      // Handle widgetHub initialed
    },
    onError: (error) => {
      // Handle widgetHub error
    },
  });
};

// Thêm đoãn mã JS
(function (d, s, id, version) {
  var js,
    fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {
    window.widgetHubInit();
    return;
  }
  js = d.createElement(s);
  js.id = id;
  js.src =
    "https://cdn-gg.vnggames.app/widget-up/" + version + "/stg/widgetHub.js";
  fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "widgetHub", "1.4.5");

2. Danh sách phương thức đăng nhập

Phương thức đăng nhập	Chủ sở hữu
GG	GG ID - sử dụng email, số điện thoại
EMAIL	GG ID - chỉ sử dụng email
PHONE_NUMBER	GG ID - chỉ sử dụng số điện thoại
ZING	Zing ID
FACEBOOK	Facebook
GOOGLE	Google
APPLE	Apple
PROTECTED_GUEST	GG ID (Chơi ngay dành cho game cũ)
GUEST	GG ID (Chơi ngay dành cho game mới) - sử dụng email + số điện thoại
GUEST_EMAIL	GG ID (Chơi ngay dành cho game mới) - chỉ sử dụng email
GUEST_PHONE_NUMBER	GG ID (Chơi ngay dành cho game mới) - chỉ sử dụng số điện thoại
GUEST_GAMES	GG ID - Sử dụng thông tin bảo vệ tài khoản trong game

3. Hiển thị thông tin người dùng

Gọi hàm widgetHub.doRenderUserProfile

widgetHub.doRenderUserProfile(
  "gg-user-info", // element tag hiển thị widget
  (data) => {
    // Hàm gọi khi widget hiển thị thông tin người dùng.
  }
);

a. Hàm widgetHub.doRenderUserProfile được gọi với ba tham số:

Tham số đầu vào	Kiểu dữ liệu	Ý nghĩa
element	Thẻ phần tử HTML (Element)	Đại diện cho thẻ phần tử HTML mà `user profile widget` sẽ được hiển thị trong đó.
callbackFunc	Hàm (function)	Đại diện cho một hàm trả về (callback function) khi thực hiện xong hiển thị thông tin người dùng. `type`: BUTTON_LOGIN - nút "Đăng nhập" được hiển thị `type`: USER_PROFILE_LOADED - Thông tin người dùng được hiển thị

b. Giao diện

Giao diện khi người dùng chưa đăng nhập

Giao diện chọn phương thức đăng nhập

Giao diện khi người dùng đã đăng nhập

4. Hiển thị thông tin mở rộng

widgetHub.doUpdateExtendData([
  {
    labelKey: "Loyalty", // labelKey được khai báo trong locales khi khởi tạo widget
    value:
      '<div style="color: #ED7C2B; display: flex; align-items: center; gap: 0.5rem;"> <img width="24px" height="24px" src="https://cdn-gg.vnggames.app/logo/loyalty.png"/> 100 Coins</div> ',
  },
]);

Hàm widgetHub.doUpdateExtendData nhận một mảng (array) làm đối số đầu vào. Mỗi phần tử trong mảng này là một đối tượng (object) chứa hai thuộc tính khác nhau:

Tham số đầu vào	Kiểu dữ liệu	Ý nghĩa
labelKey	Chuỗi (string)	Thuộc tính này đại diện cho dữ liệu cần được cập nhật hoặc mở rộng với kiểu dữ liệu là `dạng chuỗi (string)`. Trong ví dụ này, giá trị của `labelKey` được đặt thành 'Loyalty' và được bản địa hoá nội dung theo ngôn ngữ đã được cập nhật ở bước Thêm User Profile SDK vào dự án hoặc Cập nhật nội dung bản địa hoá ngôn ngữ
value	Chuỗi (string)	Thuộc tính này chứa giá trị dữ liệu cần được cập nhật hoặc mở rộng cho nhãn đã chỉ định trong `labelKey` với kiểu dữ liệu là `dạng chuỗi (string)`.

Tóm lại, hàm widgetHub.doUpdateExtendData nhận một mảng các đối tượng, mỗi đối tượng chứa hai thuộc tính labelKey (để xác định nhãn cần cập nhật) và value (để cung cấp giá trị dữ liệu mới cho nhãn đó).

🚨 Lưu ý: Nếu thông tin truyền vào sai định dạng sẽ không hiển thị thông tin trên widget

5. Cập nhật nội dung bản địa hoá ngôn ngữ

widgetHub.doUpdateLocale({
  Loyalty: {
    en: "Loyalty",
    vi: "Khuyến mại",
    th: "ความจงรักภักดี",
    id: "Kesetiaan",
    "zh-Hans": "忠诚度",
  },
});

Hàm widgetHub.doUpdateLocale được sử dụng để cập nhật các phiên bản dịch cho thành phần "Loyalty" theo từng ngôn ngữ hoặc vùng miền khác nhau. Hàm này được sử dụng trong một ứng dụng web để hỗ trợ việc đa ngôn ngữ hoá.
Trong ví dụ này, bạn đang cập nhật các phiên bản dịch cho "Loyalty" cho một số ngôn ngữ khác nhau. Dưới đây là danh sách các phiên bản dịch cho mỗi ngôn ngữ:
```
Tiếng Anh (en): "Loyalty"
Tiếng Việt (vi): "Khuyến mại"
Tiếng Thái (th): "ความจงรักภักดี"
Tiếng Indonesia (id): "Kesetiaan"
Tiếng Trung Quốc (zh-Hans): "忠诚度"
```
Trong trường hợp thành công, hàm này có thể trả về
```
{
  status: "SUCCESS";
}
```
Tuy nhiên, nếu có bất kỳ vấn đề hoặc lỗi nào trong quá trình cập nhật phiên bản dịch, hàm này có thể trả về
```
{
  status: "ERROR";
  error: ""; // Error description
}
```

🚨 Lưu ý: Dữ liệu sẽ bị ghi đè khi thực hiện gọi hàm cập nhật ngôn ngữ

6. Tích hợp phía server side

Tích hợp SSO Bridge

Chức năng cung cấp

User Profile SDK cung cấp các chức năng sau:

Chức năng	Tham số	Mục đích
widgetHub.init(config)	Cấu hình	Khởi tạo cấu hình SDK
widgetHub.doChangeLanguage(lang)	Ngôn ngữ	Thay đổi ngôn ngữ SDK
widgetHub.onGetUserProfile()		Hiển thị thông tin người dùng
widgetHub.doUpdateLocale(locales)	Cập nhật nội dung bản địa hoá ngôn ngữ	Cập nhật nội dung bản địa hoá ngôn ngữ
widgetHub.doUpdateExtendData(data)	Hiển thị thông tin mở rộng	Hiển thị thông tin mở rộng
widgetHub.doRenderUserProfile(element, callback)	Hiển thị thông tin người dùng	Khởi tạo giao diện thông tin người dùng
loginHub.doToggleLoading(forceOff=false)	forceOff: default `false`, nếu ko truyền, loginHub sẽ dựa vào trạng thái loading hiện tại để ẩn/hiện	Thay đổi trạng thái loading của widgetHub

Ngôn ngữ

Tham khảo tài liệu ngôn ngữ

Dạng tích hợp

Hiện tại Widget SDK đang hỗ trợ những dạng tích hợp sau:

Mode	Tham số bắt buộc	Ghi chú
PORTAL	`none`	Là dạng tích hợp cho các website như VNGGames Rewards...
GAME_SITE	clientId	Là dạng tích hợp liên quan tới 1 game cụ thể như trang chủ game, trang thanh toán game,..

Phiên bản

1.4.5

Fixed

Fix tự động hiển thị popup profile khi rê chuột (hover). → Thay đổi thành chỉ hiện khi click avatar mới hiển thị thông tin người dùng.

Theo dõi cập nhật qua từng phiên bản tại đây.

Thông tin môi trường

Hiện tại GG SDK đang hỗ trợ trên các môi trường sau:

Môi trường	Đường dẫn SDK
Staging	widgetHub-1.4.5
Production	widgetHub-1.4.5

Demo

Tham khảo ứng dụng demo

Hỗ trợ

Nếu có thắc mắc trong quá trình tích hợp, bạn có thể liên hệ trực tiếp qua email BaoNQ3 để được trợ giúp.

Thông tin và bài viết liên quan

Tài liệu tích hợp server side ECN SSO Bridge
Tài liệu tích hợp server side ECN SSO Bridge Java SDK

User Profile SDK

Giới thiệu​

Thông tin tích hợp​

Tích hợp User Profile SDK​

1. Thêm User Profile SDK vào dự án​

2. Danh sách phương thức đăng nhập​

3. Hiển thị thông tin người dùng​

4. Hiển thị thông tin mở rộng​

5. Cập nhật nội dung bản địa hoá ngôn ngữ​

6. Tích hợp phía server side​

Chức năng cung cấp​

Ngôn ngữ​

Dạng tích hợp​

Phiên bản​

1.4.5​

Fixed​

Thông tin môi trường​

Demo​

Hỗ trợ​

Thông tin và bài viết liên quan​