Skip to main content

GG SDK dành cho JavaScript - EMBED

Giới thiệu​

GG SDK dành cho JavaScript - EMBED cung cấp giao diện dạng mở hộp thoại trong trang web để 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, đồng thời gửi đường dẫn trả về redirectUri sau khi thực hiện xác thực với GG ID. 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. 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

2. 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",
    lang: "en",
    methods: ['GG', 'ZING', 'APPLE', 'FACEBOOK', 'GOOGLE', 'PROTECTED_GUEST'],
    type: "REDIRECT",
    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
    onLoginMethodSelected: function(data) {
      ggUtil.redirectUrl(`https://your.domain/api/v1/login?${ggUtil.makeParams(
        {
          ...data,
          lang: document.getElementById('lang').value,
          redirectUrl: ggUtil.getCurrentUrl()
        }
      )}`)
    }
  });
};

// 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: "REDIRECT",
  data: {
    accessToken: "b29RMmpvTlJ6RHBENVFSbkN3SHRiUWtna3I",
    refreshToken: "lVPQjYvUHVvMGl2eGNsOD1iT0JHaGYoMyh",
  }
  // Kết quả trả về khi đăng nhập không thành công
  {
  status: "FAIL",
  cbType: "REDIRECT",
  data: {
    error: "invalid_request",
    errorDescription: "invalid redirect_uri"
  }
) {
};

// 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');

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

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

4. 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)

5. Tạo thẻ html trong thẻ body​

<body>
  <ecn-login-hub-demo />

  <style>
    ecn-login-hub-demo {
      width: 400px;
    }
  </style>
</body>

6. Nhúng giao diện GG SDK vào thẻ html​

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

// Gọi hàm để mở hộp thoại đăng nhập
loginHub.doAuthentication({
  element: "ecn-login-hub-demo",
});

Trường hợp element rỗng hoặc không tồn tại trong thẻ body, GG SDK sẽ sử dụng Mở hộp thoại để thực hiển thị GG SDK


b. Chọn phương thức đăng nhập, SDK sẽ thực hiện gọi hàm onLoginMethodSelected() và chuyển hướng tới trang đăng nhập của GG ID.

  • Nếu server side tích hợp ECN Java SDK, tham khảo tài liệu ECN Java SDK
  • 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

c. Sau khi đăng nhập thành công, GG ID sẽ thực hiện chuyển hướng tới redirectUri đã được đăng ký.

d. Phía server side nhận được code và state từ GG ID trả về, sau đó thực hiện lấy accessToken bằng cách:

  • 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

e. Sau khi lấy được accessToken, server side sẽ redirect lại trang web với thông tin tham số truy vấn URL access_token, refresh_token, ...

d. SDK gọi hàm callback trả về các thông tin như accessToken, refreshToken, cbType

// 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: "REDIRECT",
  data: {
    accessToken: "b29RMmpvTlJ6RHBENVFSbkN3SHRiUWtna3I",
    refreshToken: "lVPQjYvUHVvMGl2eGNsOD1iT0JHaGYoMyh",
  }
  // Kết quả trả về khi đăng nhập không thành công
  {
  status: "FAIL",
  cbType: "REDIRECT",
  data: {
    error: "invalid_request",
    errorDescription: "invalid redirect_uri"
  }
) {
};

7. Thay đổi ngôn ngữ GG SDK​

GG SDK cung cấp hàm đổi ngôn ngữ theo quốc gia

loginHub.doChangeLanguage("vi");

Tham khảo ngôn ngữ hỗ trợ

8. 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

9. Đăng xuất​

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

  • Nếu server side tích hợp ECN Java SDK, gọi API https://your.domain/personal/v1/revoke, tham khảo tài liệu thu hồi quyền truy cập
  • 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

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 REDIRECT

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​