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