Babkaログインを統合する方法

どのように動作するか

Babkaでのユーザーアカウントを使用して、Babkaログインを介してウェブサイトにユーザー認証を追加できます。次の統合方法を使用できます：

• Babkaアカウントボタン。この場合：
  • パブリッシャーアカウントでエクソーラ認証プロジェクトを作成し、設定する必要はありません。
  • アプリケーションのサーバーサイドで、ユーザー認証トークンと認証コードの交換を実装する必要があります。

• エクソーラログインウィジェットのソーシャルネットワークとしてのBabkaログイン。この場合：
  • パブリッシャーアカウントでエクソーラログインプロジェクトを作成して設定する必要があります。
  • ウェブサイトでユーザー認証トークンをすぐに受け取ります。

Babkaアカウントボタン統合

Babkaアカウントボタンを統合するには：

1. BabkaログインOAuth 2.0クライアントを作成します。
2. アプリケーション側でBabkaログインボタンを統合します。
3. ユーザー認証トークンの取得を実装します。

BabkaログインOAuth 2.0クライアントの作成

Babka Oauth 2.0クライアントを作成するには：

1. プロジェクトアカウントマネージャーに連絡し、次の情報を提供してください：

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

アプリケーション側でのBabkaアカウントボタンの統合

Babka Login SDKを使用して、アプリケーション側でBabkaアカウントボタンを統合します。

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

Babkaログイン側で認証されると、redirect_uriパラメータで指定されたURIアドレスにリダイレクトされます。ユーザー認証トークンを取得する方法は、こちらの説明をご参照ください。ユーザー認証用トークンの有効期限が切れた後に更新する場合は、こちらの説明を参照してください。

ソーシャルネットワークとしてのBabkaログインの統合

Babkaログインをソーシャルネットワークとして統合するには：

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

BabkaログインOAuth 2.0クライアントの作成

BabkaログインOAuth 2.0クライアントを作成するには：

1. パブリッシャーアカウントでプロジェクトを作成します。
2. パブリッシャーアカウントでログインプロジェクトをセットアップします。
3. プロジェクトアカウントマネージャーに連絡し、次の情報を提供してください：

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

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

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

Babkaログインをソーシャルネットワークとして有効にする

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

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

7. 「接続する」をクリックします。
8. Babkaログインポップアップウィンドウの使用を有効にします（任意）：
   1. ナビゲーションページでは、「認証」セクションに移動して「コールバックURL」セクションを選択します。
   2. 「コールバックURL」で、https://login-widget.xsolla.com/latest/babka-auth-succeedを入力してください。
   3. ログインウィジェットコードでは、babkaLoginPopupパラメータにtrue値を渡し、callbackUrlパラメータには、認証後にユーザーをリダイレクトする必要があります。

ウィジェットコード例：

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

1. 4. Babkaアカウントボタンをウェブサイトに追加します。

Babkaアカウントボタンのコード例：

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

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

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

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

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

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

このページを評価する

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

答えたくない

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