ログイン / Babkaログインを統合する方法
 ドキュメントに戻る

ログイン

  • 統合ガイド

  • 認証オプション

  • ユーザーデータストレージ

  • セキュリティ

  • カスタマイゼーション

  • 通信サービスプロバイダー

  • 特徴

  • ハウツー

  • 拡張機能

  • 法的設定

  • リファレンス

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

    どのように動作するか

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

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

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

    お知らせ
    上の画像は、ログインウィジェットのオプションの1つです。ウィジェットをカスタマイズすることができます。
    お知らせ
    両方の統合オプションを同時に使用することができます。

    Babkaアカウントボタン統合

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

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

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

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

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

    パラメータ種類説明
    Redirect URIs文字列の配列[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]Babkaログインによる認証後、ユーザーをリダイレクトするために使用できるURIアドレスのリストです。
    Audience文字列“https://example.com”Babkaログイン認証が使用されるドメイン。
    Scope文字列の配列[“email”, “transactions”]Babkaの権限のリスト。

    1. エクソーラインテグレーションチームが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. プロジェクトアカウントマネージャーに連絡し、次の情報を提供してください:

    パラメータ種類説明
    Redirect URIs文字列の配列[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]Babkaログインによる認証後、ユーザーをリダイレクトするために使用できるURIアドレスのリストです。
    Audience文字列“https://example.com”Babkaログイン認証が使用されるドメイン。
    Scope文字列の配列[“email”, “transactions”]Babkaの権限のリスト。

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

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

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

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

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

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

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

    ウィジェットコード例:

    Copy
    Full screen
    Small screen

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

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

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

    Copy
    Full screen
    Small screen

    <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. ナビゲーションページで、「認証」セクションに移動し、「ソーシャルログイン」セクションを選択します。

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

    この記事は役に立ちましたか?
    ありがとうございます!
    改善できることはありますか? メッセージ
    申し訳ありません
    この記事が参考にならなかった理由を説明してください。 メッセージ
    ご意見ありがとうございました!
    あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
    このページを評価する
    このページを評価する
    改善できることはありますか?

    答えたくない

    ご意見ありがとうございました!
    最終更新日: 2023年5月30日

    誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

    問題を報告する
    当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
    フォローアップ用のメールをご提供してください
    ご意見ありがとうございました!