ログイン / エクソーラアカウントログインを統合する方法
  ドキュメントに戻る

ログイン

エクソーラアカウントログインを統合する方法

どのように動作するか

エクソーラアカウントを使ってユーザー認証を追加できます。

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

ユーザーシナリオ

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

  1. ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウのエクソーラアカウント認証ページを開くことができます:
    1. ユーザーはログイン ウィジェットの「エクソーラアカウント」ボタンをクリックします。
    2. モーダルウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
    3. ユーザーはエクソーラアカウントで認証プロセスを完了します。
    4. パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。

  1. ログイン ウィジェットの「エクソーラアカウント」ボタンをクリックしてエクソーラアカウント認証ページにリダイレクトします:
    1. ユーザーはログイン ウィジェットの「エクソーラアカウント」ボタンをクリックします。
    2. 同じウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
    3. ユーザーはエクソーラアカウントで認証プロセスを完了します。
    4. パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。

  1. ウェブサイト上のボタンをクリックして、ポップアップウィンドウのエクソーラアカウント認証ページにリダイレクトします:
    1. ユーザーがウェブサイト上のボタンをクリックします。
    2. ポップアップウィンドウで開くエクソーラアカウント認証画面にリダイレクトされます。
    3. ユーザーはエクソーラアカウントで認証プロセスを完了します。
    4. パブリッシャーアカウントの「コールバックURL」フィールドでURLが指定されているページにリダイレクトされます。

入手方法

エクソーラアカウントによる認証をソーシャルネットワークとして統合するには:

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

エクソーラアカウントOAuth 2.0クライアントの作成

エクソーラアカウントOAuth 2.0クライアントを作成するには:

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

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

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

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

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

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

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

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

  1. 接続する」をクリックします。

  1. 以下のユーザーシナリオの1つを設定します:
    • ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、エクソーラアカウント認証ページにリダイレクトされます(初期設定時):
      1. 認証」セクションに移動して「コールバックURL」セクションを選択します。
      2. コールバックURL」フィールドで、認証後にユーザーをリダイレクトするページのURLアドレスを入力します。
      3. ログインウィジェットのコードのcallbackUrlパラメータに、認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例:

Copy
Full screen
Small screen

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

    • ウェブサイト上のボタンをクリックすると、ポップアップウィンドウでエクソーラアカウント認証ページにリダイレクトされます:
      1. 認証」セクションに移動して、「コールバックURL」セクションを選択します。
      2. コールバックURLフィールドで、https://login-widget.xsolla.com/latest/babka-auth-succeedを入力します。
      3. ログインウィジェットのコードでは、babkaLoginPopupパラメータにtrueの値を渡し、callbackUrlパラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例:

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]',
});

エクソーラアカウントボタンのコード例:

Copy
Full screen
Small screen

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

    • ログインウィジェットの「エクソーラアカウント」ボタンをクリックすると、モーダルウィンドウでエクソーラアカウント認証ページを開く:
      1. 認証」セクションに移動して、「コールバックURL」セクションを選択します。
      2. コールバックURL」フィールドで、認証後にユーザーをリダイレクトさせたいページのURLアドレスを入力します。
      3. ログインウィジェットのコードでは、babkaLoginFlowパラメータにpopupの値を、callbackUrlパラメータに認証後のリダイレクト先となるページのURLアドレスを渡します。

ウィジェットコード例:

Copy
Full screen
Small screen

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

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

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

答えたくない

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

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

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