Skip to main content

GG SDK dành cho JavaScript - POPUP

Giới thiệu​

GG SDK dành cho JavaScript - POPUP cung cấp giao diện dạng mở cửa sổ để thực hiện xác thực, lấy thông tin người dùng, đăng xuất người dùng hiện tại.

Sơ đồ hoạt động​

Tích hợp SDK​

Để đăng ký ứng dụng, bạn vui lòng liên hệ qua email BaoNQ3 để lấy thông tin clientID và clientSecret. Sau đó làm theo các buớc dưới đây để tích hợp SDK vào dự án của bạn

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

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

// Khởi tạo loginHub
window.loginHubInit = function () {
  loginHub.init({
    clientID: "984745454866530308",
    callback: "doCallback",
    methods: ['GG', 'ZING', 'APPLE', 'FACEBOOK', 'GOOGLE', 'PROTECTED_GUEST'],
    type: "POPUP",
    lang: "en",
    scope: "profile.userid profile.displayname profile.avatar", // scope mặc định
    promoteMethods: ['PROTECTED_GUEST', 'ROLE_ID'], // promote method mode
    customCSS: `
      .gg-btn {
        border-radius: 5px !important;
      }
    `, // tuỳ chỉnh CSS trong login hub
    onReady: function() {
      // callback khi khởi tạo Login SDK thành công
    },
    onError: function() {
      // callback khi xảy ra lỗi
    }
  });
};

// Hàm callback sẽ được gọi khi thực hiện đăng nhập thành công
window.doCallback = function (
  // Kết quả trả về khi đăng nhập thành công
  {
  status: "SUCCESS",
  data: {
    code: "hhNUpUbXMzQmhBNzRxZ2NDMkg",
    codeVerifier: "dERuMVRwWUM0YnlhWk",
    grantType: "authorization_code",
    redirectUri: "https://example.domain/callback",
  }
  // Kết quả trả về khi đăng nhập không thành công
  {
  status: "FAIL",
  data: {
    error: "invalid_request",
    errorDescription: "invalid redirect_uri"
  }
) {
  // Thực hiện lấy access_token
};

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

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

Tham khảo tài liệu phương thức đăng nhập

3. Trường thông tin người dùng​

Tham khảo tài liệu trường thông tin người dùng (scopes)

4. Mở popup đăng nhập​

a. Thực hiện gọi hàm loginHub.doAuthentication

// Gọi hàm để mở cửa sổ đăng nhập
loginHub.doAuthentication();

b. Thực hiện đăng nhập với GG

c. Sau khi đăng nhập thành công, SDK đóng POPUP và thực hiện gọi hàm callback đã đăng ký khi khởi tạo SDK

// Hàm callback sẽ được gọi khi thực hiện đăng nhập thành công
window.doCallback = function (
  // Kết quả trả về khi đăng nhập thành công
  {
  status: "SUCCESS",
  cbType: "POPUP",
  data: {
    code: "code",
    codeVerifier: "codeVerifier",
    grantType: "authorization_code",
    redirectUri: "redirectUri",
  }
  // Kết quả trả về khi đăng nhập không thành công
  {
  status: "FAIL",
  cbType: "POPUP",
  data: {
    error: "invalid_request",
    errorDescription: "invalid redirect_uri"
  }
) {
  // Thực hiện lấy accessToken
};

5. Tích hợp server side​

Để tích hợp phía server side, GG cung cấp ECN Java SDK để có thể tương tác với hệ thống GG ID, hoặc gọi API trực tiếp tới GG ID thông qua social API

6. Lấy access token​

Để lấy được accessToken:

  • Nếu server side tích hợp ECN Java SDK, gọi API https://your.domain/oauth/v1/token, tham khảo tài liệu Access Token
  • Hoặc gọi API trực tiếp tới GG ID thông qua server side, Tham khảo tài liệu social API

7. Lấy thông tin người dùng​

Để lấy thông tin người dùng từ accessToken:

  • Nếu server side tích hợp ECN Java SDK, gọi API https://your.domain/personal/v1/me, tham khảo tài liệu thông tin người dùng
  • Hoặc gọi API trực tiếp tới GG ID thông qua server side, Tham khảo tài liệu social API

Mã lỗi khi thực hiện đăng nhập tham khảo tài liệu mã lỗi đăng nhập

8. Đăng xuất​

Để đăng xuất người dùng hiện tại:

Sau khi đăng xuất, accessToken hiện tại sẽ hết hiệu lực

Demo​


Tham khảo ứng dụng demo và chọn Đăng nhập POPUP

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 khác​