エクソーラアカウントログインを統合する方法
どのように動作するか
エクソーラアカウントを使ってユーザー認証を追加できます。
お知らせ
上の画像は、ログインウィジェットのオプションの1つです。ウィジェットをカスタマイズすることができます。
ユーザーシナリオ
次のユーザーシナリオのいずれかを実装できます:
- ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウのエクソーラアカウント認証ページを開くことができます:
- ユーザーはログイン ウィジェットの「エクソーラアカウント」ボタンをクリックします。
- モーダルウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
- ユーザーはエクソーラアカウントで認証プロセスを完了します。
- パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。
- ログイン ウィジェットの「エクソーラアカウント」ボタンをクリックしてエクソーラアカウント認証ページにリダイレクトします:
- ユーザーはログイン ウィジェットの「エクソーラアカウント」ボタンをクリックします。
- 同じウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
- ユーザーはエクソーラアカウントで認証プロセスを完了します。
- パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。
- ウェブサイト上のボタンをクリックして、ポップアップウィンドウのエクソーラアカウント認証ページにリダイレクトします:
- ユーザーがウェブサイト上のボタンをクリックします。
- ポップアップウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
- ユーザーはエクソーラアカウントで認証プロセスを完了します。
- パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。
入手方法
エクソーラアカウントによる認証をソーシャルネットワークとして統合するには:
- エクソーラアカウントOAuth 2.0クライアントを作成します。
- ログインウィジェットを統合します。
- エクソーラアカウントをソーシャルネットワークとして有効にします。
- ユーザー認証トークンの取得を実装します。
エクソーラアカウントOAuth 2.0クライアントの作成
エクソーラアカウントOAuth 2.0クライアントを作成するには:
- アドミンページでプロジェクトを作成します。
- アドミンページでログインプロジェクトをセットアップします。
- カスタマーサクセスマネージャーに問い合わせるか、csm@xsolla.comに電子メールを送信して、次の情報を提供してください:
パラメータ | 種類 | 例 | 説明 |
---|---|---|---|
Redirect URIs | 文字列の配列 | [“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”] | エクソーラアカウントによる認証後、ユーザーをリダイレクトするために使用できるURIアドレスのリストです。 |
Audience | 文字列 | “https://example.com” | エクソーラアカウントのログインが使用されるドメイン。 |
Scope | 文字列の配列 | [“email”, “transactions”] | エクソーラアカウントの権限のリスト。 |
- エクソーラインテグレーションチームがエクソーラアカウントOauth 2.0クライアントを作成し、その識別子とシークレットキーを提供します。このデータはユーザー認証トークンを取得するために必要なものです。
ログインウィジェットの統合
SDKを使用してログインウィジェットを統合します。
エクソーラアカウントをソーシャルネットワークとして有効にする
- アドミンページでプロジェクトを開き、「ログイン」セクションに移動します。
- ログインプロジェクトのパネルにある「構成する」をクリックします。
- 「認証」セクションに移動し、「ソーシャルログイン」セクションを選択します。
- ソーシャルネットワークのリストから「エクソーラアカウント」を選択します。
- ⚙アイコンをクリックし、「設定」を選択します。
- 次のフィールドに入力します:
- アプリケーションID — エクソーラから受け取ったエクソーラアカウントOAuth 2.0クライアント識別子。
- アプリケーション秘密鍵 — エクソーラから受け取ったエクソーラアカウントOAuth 2.0キー。
- ウェブサイトリンク — ユーザー認証トークンの認証コード交換のリクエストが送信されるウェブサイト。エクソーラアカウントOAuth 2.0クライアントを作成する際に「オーディエンス」パラメータとして指定したURLアドレスと同じものを指定します。
- 「接続する」をクリックします。
- 以下のユーザーシナリオの1つを設定します:
- ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、エクソーラアカウント認証ページにリダイレクトされます(初期設定時):
- 「認証」セクションに移動して「コールバックURL」セクションを選択します。
- 「コールバックURL」フィールドで、認証後にユーザーをリダイレクトするページのURLアドレスを入力します。
- ログインウィジェットのコードの
callbackUrl
パラメータに、認証後のリダイレクト先となるページのURLアドレスを渡します。
- ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、エクソーラアカウント認証ページにリダイレクトされます(初期設定時):
ウィジェットコード例:
Copy
- js
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US',
callbackUrl: '[Your Callback URL]',
});
- ウェブサイト上のボタンをクリックすると、ポップアップウィンドウでエクソーラアカウント認証ページにリダイレクトされます:
- 「認証」セクションに移動して、「コールバックURL」セクションを選択します。
- コールバックURLフィールドで、
https://login-widget.xsolla.com/latest/babka-auth-succeed
を入力します。 - ログインウィジェットのコードでは、
babkaLoginPopup
パラメータにtrue
の値を渡し、callbackUrl
パラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。
- ウェブサイト上のボタンをクリックすると、ポップアップウィンドウでエクソーラアカウント認証ページにリダイレクトされます:
ウィジェットコード例:
Copy
- js
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US',
babkaLoginPopup: true,
callbackUrl: '[Your Callback URL]',
});
- エクソーラアカウント認証ページを開くボタンをウェブサイトに追加します。
エクソーラアカウントボタンのコード例:
Copy
- html
<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>
- ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウでエクソーラアカウント認証ページを開く:
- 「認証」セクションに移動して、「コールバックURL」セクションを選択します。
- 「コールバックURL」フィールドで、認証後にユーザーをリダイレクトさせたいページのURLアドレスを入力します。
- ログインウィジェットのコードでは、
babkaLoginFlow
パラメータにpopup
の値を、callbackUrl
パラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。
- ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウでエクソーラアカウント認証ページを開く:
ウィジェットコード例:
Copy
- js
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トークンに埋め込むには:
- アドミンページでプロジェクトを開き、「ログイン」セクションに移動します。
- ログインプロジェクトのパネルで「構成する」をクリックします。
- 「認証」セクションに移動し、「ソーシャルログイン」セクションを選択します。
- 「ソーシャルネットワークJWTトークンを埋め込む」トグルを「オン」に設定します。
- 「変更内容を保存する」をクリックします。
この記事は役に立ちましたか?
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。このページを評価する
このページを評価する
答えたくない
ご意見ありがとうございました!
誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。