エクソーラIDを介したユーザー認証の統合方法
仕組み
エクソーラ製品全体でシームレスなアクセスを提供する共通アイデンティティプラットフォームであるエクソーラIDを使用したユーザー認証を追加できます。
以下のいずれかのユーザーシナリオを実装できます：
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開きます：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはパブリッシャーアカウントの「コールバックURL」フィールドに指定されたURLにリダイレクトされます。
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、エクソーラID認証ページにリダイレクトします：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
- ユーザーはエクソーラIDで認証プロセスを完了します。
- ユーザーはパブリッシャーアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトします：
- ユーザーがウェブサイト上のボタンをクリックします。
- ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはパブリッシャーアカウントの「コールバックURL」フィールに指定されたページにリダイレクトされます。
以下のいずれかのユーザーシナリオを実装できます：
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開く：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたURLにリダイレクトされます。
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、エクソーラID認証ページにリダイレクトします：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
- ユーザーはエクソーラIDで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトします：
- ユーザーがウェブサイト上のボタンをクリックします。
- ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
以下のいずれかのユーザーシナリオを実装できます：
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開きます：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたURLにリダイレクトされます。
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、エクソーラID認証ページにリダイレクトします：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
- ユーザーはエクソーラIDで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトします：
- ユーザーがウェブサイト上のボタンをクリックします。
- ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
以下のいずれかのユーザーシナリオを実装できます：
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開きます：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたURLにリダイレクトされます。
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、エクソーラID認証ページにリダイレクトします：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
- ユーザーはエクソーラIDで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトします：
- ユーザーがウェブサイト上のボタンをクリックします。
- ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
以下のいずれかのユーザーシナリオを実装できます：
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、モーダルウィンドウでエクソーラID認証ページを開きます：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーはモーダルウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたURLにリダイレクトされます。
ログインウィジェットの「Log in with Xsolla」ボタンをクリックして、エクソーラID認証ページにリダイレクトします：
- ユーザーがログインウィジェットの「Log in with Xsolla」ボタンをクリックします。
- ユーザーは同じウィンドウで開くエクソーラID認証画面にリダイレクトされます。
- ユーザーはエクソーラIDで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
ウェブサイト上のボタンをクリックして、ポップアップウィンドウでエクソーラID認証ページにリダイレクトします：
- ユーザーがウェブサイト上のボタンをクリックします。
- ユーザーはポップアップウィンドウで開くエクソーラID認証ページにリダイレクトされます。
- ユーザーはエクソーラID認証ページで認証プロセスを完了します。
- ユーザーはアカウントの「コールバックURL」フィールドに指定されたページにリダイレクトされます。
取得方法
エクソーラID経由でソーシャルログインを統合するには：
ログインウィジェットの統合
アプリケーションにエクソーラログインウィジェットを追加します。これにより、既製のユーザー認証インターフェースが提供されます。
ソーシャルネットワークとしてエクソーラを有効にする
- パブリッシャーアカウントのプロジェクトでプレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、その他のツール > ログインセクションに移動します。
ログインプロジェクトのペインで「設定」をクリックします。
認証ブロックに移動し、ソーシャルログインを選択します。
ソーシャルネットワークのリストからエクソーラを選択します。
⚙アイコンをクリックし、「接続」を選択します。
ユーザーシナリオのいずれかをセットアップします：
同じウィンドウでの認証
ログインウィジェットの「Log in with Xsolla」ボタンをクリックした後にユーザーをエクソーラID認証ページにリダイレクトするには：
- 認証セクションに移動し、「コールバックURL」をクリックします。
- 「コールバックURL」フィールドに、認証後にユーザーをリダイレクトするURLを入力します。
- ログインウィジェットのコードの
callbackUrlパラメータに、認証後にユーザーをリダイレクトするURLを渡します。
ウィジェットのコード例：
- javascript
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認証ページにユーザーをリダイレクトするには：
- ナビゲーションページで認証セクションに移動し、「コールバックURL」をクリックします。
- 「コールバックURL」セクションに次のURLが追加されていることを確認します：
https://login.xsolla.com/api/social/oauth2/callback。 - ログインウィジェットのコードで
babkaLoginPopupパラメータにtrueの値を渡し、認証後にユーザーをリダイレクトするURLをcallbackUrlパラメータに渡します。
ウィジェットのコード例：
- javascript
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});
- エクソーラID認証ページを開くボタンをウェブサイトに追加します。
Log in with Xsollaのボタンコード例：
- html
1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>
モーダルウィンドウでの認証
ログインウィジェットの「Log in with Xsolla」ボタンをクリックした後にモーダルウィンドウでエクソーラID認証ページにユーザーをリダイレクトするには：
- 認証セクションに移動し、「コールバックURL」をクリックします。
- 「コールバックURL」フィールドに、認証後にユーザーをリダイレクトするURLを入力します。
- ログインウィジェットのコードで
babkaLoginFlowパラメータにpopupの値を渡し、認証後にユーザーをリダイレクトするURLをcallbackUrlパラメータに渡します。
ウィジェットのコード例：
- javascript
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トークンに埋め込むには：
- パブリッシャーアカウントのプロジェクトでプレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
- アカウントでプロジェクトを開き、その他のツール > ログインセクションに移動します。
- ログインプロジェクトのペインで「設定」をクリックします。
- 認証ブロックに移動し、ソーシャルログインを選択します。
- ソーシャルネットワークJWTトークンを埋め込むトグルをオンにします。
- 「変更内容を保存」をクリックします。
誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
