エクソーラIDを介したユーザー認証の統合方法

動作概要

エクソーラIDを使用してユーザー認証を追加できます。エクソーラ製品全体でシームレスなアクセスを提供する共有IDプラットフォームです。

次のユーザーシナリオのいずれかを実装できます：

• ログインウィジェットのLog in with Xsollaボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開く：

  1. ユーザーがログインウィジェットのLog in with Xsollaボタンをクリックします。
  2. ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
  3. ユーザーはエクソーラID認証ページで認証プロセスを完了します。
  4. ユーザーはパブリッシャーアカウントのCallback URLフィールドに指定されたURLにリダイレクトされます。

• ログインウィジェットのLog in with Xsollaボタンをクリックして、エクソーラID認証ページにリダイレクトする：

  1. ユーザーがログインウィジェットのLog in with Xsollaボタンをクリックします。
  2. ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
  3. ユーザーはエクソーラIDで認証プロセスを完了します。
  4. ユーザーはパブリッシャーアカウントのCallback URLフィールドに指定されたページにリダイレクトされます。

• ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトする：

  1. ユーザーがウェブサイト上のボタンをクリックします。
  2. ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
  3. ユーザーはエクソーラID認証ページで認証プロセスを完了します。
  4. ユーザーはパブリッシャーアカウントのCallback URLフィールドに指定されたページにリダイレクトされます。

取得方法

エクソーラIDを介したソーシャルログインを統合するには：

1. ログインウィジェットを統合する。
2. エクソーラをソーシャルネットワークとして有効にする。
3. ユーザー認可トークンの取得を実装する。

ログインウィジェットの統合

アプリケーションにエクソーラログインウィジェットを追加します。これは、既製のユーザー認証インターフェースを提供します。

エクソーラをソーシャルネットワークとして有効にする

1. パブリッシャーアカウントのプロジェクトでPlayers > Loginセクションに移動します。

2. ログインプロジェクトのペインでConfigureをクリックします。

3. Authenticationブロックに移動し、Social loginを選択します。

4. ソーシャルネットワークのリストからエクソーラを選択します。

5. ⚙アイコンをクリックし、Connectを選択します。

6. 次のユーザーシナリオのいずれかを設定します：

   • 同じウィンドウでの認証
   • ポップアップウィンドウでの認証
   • モーダルウィンドウでの認証

同じウィンドウでの認証

ログインウィジェットのLog in with Xsollaボタンをクリックした後にユーザーをエクソーラID認証ページにリダイレクトするには：

1. Authenticationセクションに移動し、Callback URLsをクリックします。
2. Callback URLフィールドに、認証後にユーザーをリダイレクトするURLを入力します。
3. ログインウィジェットのコードのcallbackUrlパラメーターに、認証後にユーザーをリダイレクトするURLを渡します。

ウィジェットコード例：

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  callbackUrl: '[Your Callback URL]',
6});

ポップアップウィンドウでの認証

ウェブサイト上のボタンをクリックした後にポップアップウィンドウでエクソーラID認証ページにユーザーをリダイレクトするには：

1. ナビゲーションページでAuthenticationセクションに移動し、Callback URLsをクリックします。
2. Callback URLセクションに次のURLが追加されていることを確認します：https://login.xsolla.com/api/social/oauth2/callback。
3. ログインウィジェットのコードでbabkaLoginPopupパラメーターにtrue値を渡し、認証後にユーザーをリダイレクトするURLをcallbackUrlパラメーターに渡します。

ウィジェットコード例：

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginPopup: true,
6  callbackUrl: '[Your Callback URL]',
7});

4. エクソーラID認証ページを開くボタンをウェブサイトに追加します。

Log in with Xsollaボタンコード例：

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

モーダルウィンドウでの認証

ログインウィジェットのLog in with Xsollaボタンをクリックした後にモーダルウィンドウでエクソーラID認証ページにユーザーをリダイレクトするには：

1. Authenticationセクションに移動し、Callback URLsをクリックします。
2. Callback URLフィールドに、認証後にユーザーをリダイレクトするURLを入力します。
3. ログインウィジェットのコードでbabkaLoginFlowパラメーターにpopup値を渡し、認証後にユーザーをリダイレクトするURLをcallbackUrlパラメーターに渡します。

ウィジェットコード例：

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginFlow: "popup",
6  callbackUrl: '[Your Callback URL]',
7});

ユーザー認可トークンの取得

エクソーラID側で認証後、ユーザーはcallbackUrlパラメーターに指定されたURLにリダイレクトされます。ユーザー認可トークンはtokenパラメーターで渡されます。

エクソーラID OAuth JWTトークンをエクソーラログインJWTトークンに埋め込むには：

1. パブリッシャーアカウントのプロジェクトでPlayers > Loginセクションに移動します。
2. ログインプロジェクトのペインでConfigureをクリックします。
3. Authenticationブロックに移動し、Social loginを選択します。
4. Embed social network JWT tokenトグルをオンにします。
5. 変更内容を保存をクリックします。