エクソーラアカウントログインを統合する方法

どのように動作するか

エクソーラアカウントを使ってユーザー認証を追加できます。

ユーザーシナリオ

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

1. ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウのエクソーラアカウント認証ページを開くことができます：
   1. ユーザーはログイン ウィジェットの「エクソーラアカウント」ボタンをクリックします。
   2. モーダルウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
   3. ユーザーはエクソーラアカウントで認証プロセスを完了します。
   4. パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。

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

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

入手方法

エクソーラアカウントによる認証をソーシャルネットワークとして統合するには：

1. エクソーラアカウントOAuth 2.0クライアントを作成します。
2. ログインウィジェットを統合します。
3. エクソーラアカウントをソーシャルネットワークとして有効にします。
4. ユーザー認証トークンの取得を実装します。

エクソーラアカウントOAuth 2.0クライアントの作成

エクソーラアカウントOAuth 2.0クライアントを作成するには：

1. アドミンページでプロジェクトを作成します。
2. アドミンページでログインプロジェクトをセットアップします。
3. カスタマーサクセスマネージャーに問い合わせるか、csm@xsolla.comに電子メールを送信して、次の情報を提供してください：

4. エクソーラインテグレーションチームがエクソーラアカウントOauth 2.0クライアントを作成し、その識別子とシークレットキーを提供します。このデータはユーザー認証トークンを取得するために必要なものです。

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

SDKを使用してログインウィジェットを統合します。

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

1. アドミンページでプロジェクトを開き、「ログイン」セクションに移動します。
2. ログインプロジェクトのパネルにある「構成する」をクリックします。
3. 「認証」セクションに移動し、「ソーシャルログイン」セクションを選択します。
4. ソーシャルネットワークのリストから「エクソーラアカウント」を選択します。

5. ⚙アイコンをクリックし、「設定」を選択します。
6. 次のフィールドに入力します：
   • アプリケーションID — エクソーラから受け取ったエクソーラアカウントOAuth 2.0クライアント識別子。
   • アプリケーション秘密鍵 — エクソーラから受け取ったエクソーラアカウントOAuth 2.0キー。
   • ウェブサイトリンク — ユーザー認証トークンの認証コード交換のリクエストが送信されるウェブサイト。エクソーラアカウントOAuth 2.0クライアントを作成する際に「オーディエンス」パラメータとして指定したURLアドレスと同じものを指定します。

7. 「接続する」をクリックします。

8. 以下のユーザーシナリオの1つを設定します：
   • ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、エクソーラアカウント認証ページにリダイレクトされます（初期設定時）：
     1. 「認証」セクションに移動して「コールバックURL」セクションを選択します。
     2. 「コールバックURL」フィールドで、認証後にユーザーをリダイレクトするページのURLアドレスを入力します。
     3. ログインウィジェットのコードのcallbackUrlパラメータに、認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例：

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

1. • ウェブサイト上のボタンをクリックすると、ポップアップウィンドウでエクソーラアカウント認証ページにリダイレクトされます：
     1. 「認証」セクションに移動して、「コールバックURL」セクションを選択します。
     2. コールバックURLフィールドで、https://login-widget.xsolla.com/latest/babka-auth-succeedを入力します。
     3. ログインウィジェットのコードでは、babkaLoginPopupパラメータにtrueの値を渡し、callbackUrlパラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例：

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

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

エクソーラアカウントボタンのコード例：

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウでエクソーラアカウント認証ページを開く：
     1. 「認証」セクションに移動して、「コールバックURL」セクションを選択します。
     2. 「コールバックURL」フィールドで、認証後にユーザーをリダイレクトさせたいページのURLアドレスを入力します。
     3. ログインウィジェットのコードでは、babkaLoginFlowパラメータにpopupの値を、callbackUrlパラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例：

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

ユーザー認証トークンを取得する

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

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

1. アドミンページでプロジェクトを開き、「ログイン」セクションに移動します。
2. ログインプロジェクトのパネルで「構成する」をクリックします。
3. 「認証」セクションに移動し、「ソーシャルログイン」セクションを選択します。

4. 「ソーシャルネットワークJWTトークンを埋め込む」トグルを「オン」に設定します。
5. 「変更内容を保存する」をクリックします。

このページを評価する

改善できることはありますか？ 送信

答えたくない

ご意見ありがとうございました！