エクソーラアカウントでユーザー認証を統合する方法

どのように動作するか

エクソーラウォレットでエクソーラアカウントによるユーザー認証を追加できます。

ユーザーシナリオ

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

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クライアントの作成

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

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

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

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

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セクションに以下のURLが追加されていることを確認してください：
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     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. 「変更内容を保存する」をクリックします。