ユーザー認証をセットアップする

ユーザーフロー

1. ユーザーは、ユーザーID認証が設定されたウェブショップにアクセスします。
2. ユーザーは、以下のいずれかの方法でウェブショップで認証を行います：
   • ユーザーはファストログインブロックにIDを入力し、ログインボタンをクリックします。
   • ユーザーは、選択したアイテムの購入ボタンまたはトップバーのログインボタンをクリックします：
     1. ユーザーIDを入力するか、ソーシャルネットワークからログインするためのモーダルウィンドウが開きます。
     2. ユーザーはIDを入力し、「続ける」をクリックするか、ソーシャルネットワークのアイコンをクリックしてソーシャルネットワークを選択し、ソーシャルネットワークのページで認証を完了します。

3. システムは、ゲーム内にユーザーが存在するかどうかをチェックします。このIDまたはソーシャルアカウントを持つユーザーがゲーム内に存在する場合、そのユーザーはウェブショップで認証されます。そうでない場合はエラーメッセージが表示されます。

入手方法

1. アプリケーション側では、ユーザー検証ウェブフック処理を実装してください。 ウェブフックを受信した場合、アプリケーションは以下の処理を行う必要があります：
   • ウェブフックで渡されたIDでユーザーを検索します。
   • その結果に応じて、以下のいずれかのステータスコードを送信します。
     • 200 HTTP - ユーザーが見つかった場合のウェブフックからの応答を含むコード
     • 404 HTTP - ユーザー IDが見つからない場合のコード
   • パーソナライズのためのユーザー属性を送信します。

4. サイトに複数のページが含まれている場合は、必要なページを選択してください：
   1. ビルダー上部にある現在のページタイトルをクリックします。
   2. ドロップダウンリストから必要なページを選択してください。
5. 「ログイン設定」ブロックに移動します。

6. ユーザーIDオプションを選択します。

7. ドロップダウンリストから、新規ログインを選択してください。

1. 4. ソーシャルネットワークを設定するには、ソーシャルネットワークカードで、タイトルの右にある⚙アイコンをクリックし、接続を選択します。

ディープリンクとは、アプリケーションやウェブサイトのメインページだけでなく、特定のセクション、ページ、アクションに直接ユーザーを誘導する特別なURLのことです。

ディープリンクは、ユーザーIDでログインする際の追加の認証方法として使用できます。 ゲームがユーザーのモバイル端末にインストールされている場合、ディープリンクを介してゲームにリダイレクトされ、認証トークンが取得されます。

ユーザーフロー

モバイルアプリの場合

1. ウェブショップで未認証のユーザーがログインボタンまたは購入ボタンをクリックします。ユーザーIDを入力するか、モバイルゲームからログインするためのモーダルウィンドウが開きます。

2. ユーザーは「モバイルゲームからログイン」ボタンをクリックします。
3. ユーザーはゲームにリダイレクトされ、認証されたユーザーとして自動的にウェブショップに戻ります。

デスクトップ版

1. ウェブショップで未認証のユーザーがログインボタンまたは購入ボタンをクリックします。ユーザーIDを入力するか、QRコードを使ってモバイル版ゲームにログインするためのモーダルウィンドウが開きます。

2. ユーザーはモバイルデバイスを使用してQRコードをスキャンします。
3. ウェブショップはユーザーのモバイル端末で開きます。
4. ユーザーは自動的にゲームにリダイレクトされ、認証されたユーザーとしてウェブショップに戻ります。

サービスインタラクションフロー

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as ユーザー
    participant WS as ウェブショップ
    participant B as ブラウザ
    participant MOS as モバイルOS
    participant G as ゲーム
    participant LA as ログインAPI
    U->>WS: モバイルゲーム経由でログインするためのボタンをクリックする
    activate WS
    WS->>B: ディープリンクを介してユーザーをリダイレクトする
    activate B
    B->>MOS: モバイルゲームを起動するためのシステムコールを行う
    activate MOS
    MOS->>G: モバイルゲームを起動する
    activate G
    G->>LA: 認証トークンを生成する
    activate LA
    LA-->>G: 認証トークンを返却する
    deactivate LA
    G->>MOS: URLにトークンを含めてブラウザを開くためのシステムコールを行う
    deactivate G
    MOS-->>B: URLにトークンを含めてブラウザを開く
    deactivate MOS
    B-->>WS: 認証済みユーザー向けのウェブショップページを開く
    deactivate B
    WS-->>U: ヘッダーにユーザー名が表示される
    deactivate WS

セットアップ方法

ゲーム側

1. ゲームのモバイルアプリ設定で、ディープリンク経由でゲームを開くためのURLスキームを新規登録してください：
   • Androidアプリ — AndroidManifest.xmlファイル。
   • iOSアプリ — Info.plistファイル。

スキームを登録した後、ユーザーがゲームを介してウェブショップで認証すると、ゲームは指定されたアドレスでゲームが開きます。

登録済みURLスキームを介してゲームを開くリンクの例：

scheme://authorize?operationPayload=<VALUE>：
• scheme — アプリを起動し、必要なアクションへナビゲートするためにカスタムURLスキームで使用される、ゲーム固有の識別子。
• authorize — ゲームが開かれた後に実行されるべきアクション名の一例です。自分のアプリケーションのオペレーティングシステム内のアクションに一致するアクション名を使用してください。
• operationPayload=<VALUE> — 認証時のトークン生成のための情報を含むパラメータです。この値はエクソーラによって生成されたBase64エンコードデータです。

1. 例：

• iOSアプリケーションでURLスキームを登録する
• AndroidアプリケーションでURLスキームを登録する

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. ゲームからのユーザーIDを使用して、JWT形式の認証トークンの生成を実装してください。

curlを使用してユーザートークン生成のAPIメソッドを呼び出す例：
Copy

Full screen

Small screen

• curl

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 7 "settings": {
 8   "projectId": 123456,
 9   "merchantId": 123456
10 },
11 "user": {
12   "id": "123",
13   "country": "US"
14 }
15 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
16}'

{token="JWT_TOKEN"}のような応答が返されます。

3. 認証成功の通知を含むポップアップウィンドウを追加してください（任意）。

4. 取得したユーザートークンを使用して、ブラウザでウェブショップを開く処理を実装してください。

認証されたユーザーがブラウザでウェブショップを開くためのURLを作成する例：
• カスタムドメインを使用している場合はhttps:​//example.com/?token={token}
• エクソーラドメインをしようしている場合はhttps:​//example.xsolla.site/?token={token}
ここで、{token}はユーザーの認証トークンです。

サイトビルダー内

注意
まず、ユーザーID経由での認証を設定します。これは、ユーザーがディープリンク認証を利用できない場合、別の認証方法を提供するために必要です。例えば、ユーザーのモバイルデバイスにゲームがインストールされていない場合などです。
1. パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
1. モバイルゲーム用アカウントでプロジェクトを開き、ウェブショップセクションに移動してください。
2. ウェブショップサイトのカード上で、ユーザーID経由の認証が設定されている場合、「構成」をクリックしてください。
3. ログイン設定に移動し、ユーザーIDセクションを選択します。
4. 「ディープリンク認」トグルを有効にします。



5. 「ディープリンクURL」フィールドに、ユーザー認証用のリンクを入力します。



6. サイトでファストログインブロックを使用している場合：
   1. ファストログインブロックに移動します。
   2. レイアウトセクションで、「QRコード」トグルを有効にします。



7. 認証を確認するには、「プレビュー」をクリックしてください。
8. ウェブサイトを公開するには、「公開」をクリックします。

ディープリンクとは、アプリケーションやウェブサイトのメインページだけでなく、特定のセクション、ページ、アクションに直接ユーザーを誘導する特別なURLのことです。

ディープリンクは、ユーザーIDまたはエクソーラログイン経由での認証プロセスの代わりに、ゲームを通じてウェブショップでワンクリックで認証できるようになります。

ユーザーのモバイルデバイスにゲームがインストールされている場合、認証トークンを取得するために、ディープリンク経由でゲームにリダイレクトされます。

ディープリンクが主要な認証方法として使用される場合、ユーザーIDとディープリンク経由で認証では不可能な支払い詳細を保存できます。ディープリンクは、この場合において認証プロセスを迅速化するものの、新たな機能を追加するものではありません。

ユーザーフロー

モバイルアプリの場合

1. ウェブショップで未認証のユーザーがログインボタンまたは購入ボタンをクリックします。モバイルゲームからログインするためのモーダルウィンドウが開きます。

2. ユーザーは「モバイルゲームからログイン」ボタンをクリックします。
3. ユーザーはゲームにリダイレクトされ、認証されたユーザーとして自動的にウェブショップに戻ります。

デスクトップ版

1. ウェブショップで未認証のユーザーがログインボタンまたは購入ボタンをクリックします。QRコードを使ってモバイル版ゲームにログインするためのモーダルウィンドウが開きます。

2. ユーザーはモバイルデバイスを使用してQRコードをスキャンします。
3. ウェブショップはユーザーのモバイル端末で開きます。
4. ユーザーは自動的にゲームにリダイレクトされ、認証されたユーザーとしてウェブショップに戻ります。

サービスインタラクションフロー

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as ユーザー
    participant WS as ウェブショップ
    participant B as ブラウザ
    participant MOS as モバイルOS
    participant G as ゲーム
    participant LA as ログインAPI
    U->>WS: モバイルゲーム経由でログインするためのボタンをクリックする
    activate WS
    WS->>B: ディープリンクを介してユーザーをリダイレクトする
    activate B
    B->>MOS: モバイルゲームを起動するためのシステムコールを行う
    activate MOS
    MOS->>G: モバイルゲームを起動する
    activate G
    G->>LA: 認証トークンを生成する
    activate LA
    LA-->>G: 認証トークンを返却する
    deactivate LA
    G->>MOS: URLにトークンを含めてブラウザを開くためのシステムコールを行う
    deactivate G
    MOS-->>B: URLにトークンを含めてブラウザを開く
    deactivate MOS
    B-->>WS: 認証済みユーザー向けのウェブショップページを開く
    deactivate B
    WS-->>U: ヘッダーにユーザー名が表示される
    deactivate WS

セットアップ方法

ゲーム側

1. ゲームのモバイルアプリ設定で、ディープリンク経由でゲームを開くためのURLスキームを新規登録してください：
   • Androidアプリ — AndroidManifest.xmlファイル。
   • iOSアプリ — Info.plistファイル。

スキームを登録した後、ユーザーがゲームを介してウェブショップで認証すると、ゲームは指定されたアドレスでゲームが開きます。

登録済みURLスキームを介してゲームを開くリンクの例：

scheme://authorize?operationPayload=<VALUE>：
• scheme — アプリを起動し、必要なアクションへナビゲートするためにカスタムURLスキームで使用される、ゲーム固有の識別子。
• authorize — ゲームが開かれた後に実行されるべきアクション名の一例です。自分のアプリケーションのオペレーティングシステム内のアクションに一致するアクション名を使用してください。
• operationPayload=<VALUE> — 認証時のトークン生成のための情報を含むパラメータです。この値はエクソーラによって生成されたBase64エンコードデータです。

1. 例：

• iOSアプリケーションでURLスキームを登録する
• AndroidアプリケーションでURLスキームを登録する

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. ゲームからのユーザーIDを使用して、JWT形式の認証トークンの生成を実装してください。

curlを使用してユーザートークン生成のAPIメソッドを呼び出す例：
Copy

Full screen

Small screen

• curl

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'Accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "string",
 7 "settings": {
 8   "projectId": 0,
 9   "merchantId": 0
10 },
11 "user": {
12   "id": "string",
13   "country": "string",
14   "name": "string",
15   "picture": "string"
16 },
17 "operationPayload": "eyJ4c29sbGF1aWQiOiIzNzE5Nzc5NjU1MDE2Nzc2MzcifQ%3D%3D"
18}'

{token="JWT_TOKEN"}のような応答が返されます。

3. 認証成功の通知を含むポップアップウィンドウを追加してください（任意）。

4. 取得したユーザートークンを使用して、ブラウザでウェブショップを開く処理を実装してください。

認証されたユーザーがブラウザでウェブショップを開くためのURLを作成する例：
• カスタムドメインを使用している場合はhttps:​//example.com/?token={token}
• エクソーラドメインをしようしている場合はhttps:​//example.xsolla.site/?token={token}
ここで、{token}はユーザーの認証トークンです。

サイトビルダー内

1. パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. ウェブショップのサイトカードで「構成」をクリックします。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. ウェブショップのサイトカードで「構成」をクリックします。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. ウェブショップのサイトカードで「構成」をクリックします。
1. アカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. ウェブショップのサイトカードで「構成」をクリックします。
1. モバイルゲーム用アカウントでプロジェクトを開き、ウェブショップセクションに移動してください。
2. サイトのカードで、「⋮」アイコンをクリックし、「設定」を選択します。
3. ログイン設定に移動し、ディープリンクセクションを選択します。



4. 「ディープリンクURL」フィールドに、ユーザー認証用のリンクを入力します。



5. サイトでファストログインブロックを使用している場合：
   1. ファストログインブロックに移動します。
   2. ブロック設定で、QRコードのログインボタンの表示スタイルを調整します。



6. 認証を確認するには、「プレビュー」をクリックしてください。
7. ウェブサイトを公開するには、「公開」をクリックします。

ユーザーフロー

1. ユーザーがエクソーラログイン認証を設定したウェブショップにアクセスします。
2. 選択したアイテムの購入ボタン、トップバーのログインボタン、または「簡単ログイン」ブロックのログインボタンをクリックします。
3. 認証方法を選べるモーダルウィンドウが開きます。
4. ユーザーが認証を進め、必要に応じて追加データを入力します。
5. システムがゲーム内にユーザーが存在するかを確認します。存在する場合はウェブショップで認証されます。存在しない場合はエラーメッセージが表示されます。

取得方法

2. エクソーラログイン認証のウェブショップサイトのカードで「•••」アイコンをクリックし、「設定」を選択します。
3. 「ビルダーへ移動」をクリックし、「ログイン設定」ブロックまでスクロールします。

4. 「エクソーラログイン」認証方法を選択します。

5. 「エクソーラログイン」オプションで、ドロップダウンリストから認証オプションを選択します：
   • プロジェクトでエクソーラログインがすでにプロジェクトで設定されている場合は、既存のものを選択します
   • ウェブショップ用の認証オプションがまだない場合は、新規ログインを選択します

サイトを初めてプレビューまたは公開する際、ウェブショップのプレビューURLとドメインが、認証オプションの設定内の「コールバックURL」フィールドに自動で追加されます。ユーザーは次の場合にこれらのURLにリダイレクトされます：

• 認証成功後
• メールアドレス確認後
• パスワードリセット後
• 認証失敗時

ウェブショップのドメインを変更すると、これらのURLは自動で更新されます。

6. ユーザーがウェブショップにログインするために利用できるソーシャルネットワークをセットアップします（任意）。詳細はソーシャルログインに関するドキュメントを参照してください。

7. ユーザーデータをエクソーラ側に保存したくない場合は、別のストレージを接続します（任意）。詳細はユーザーデータストレージの接続に関するドキュメントを参照してください。

利用可能な機能は、選択したストレージによって異なります。詳細はユーザーデータストレージオプションの比較に関するドキュメントを参照してください。

ユーザーフロー

1. ユーザーはリンクされたユーザーID認証が設定されたウェブショップに初めてアクセスします。
2. ユーザーは、選択したアイテムの購入ボタン、トップバーのログインボタン、またはファストログインブロックのログインボタンをクリックします。
3. エクソーラログインで設定された認証メソッドでモーダルウィンドウが開きます。
4. ユーザーは認証を進め、必要に応じて追加情報を入力します。

5. エクソーラログインでの認証成功後、ゲームのユーザーIDをリンクするためのモーダルウィンドウが開きます。

6. システムはユーザーの存在を確認します。指定されたIDを持つユーザーがゲームに存在すれば、ウェブショップへの認証が完了します。存在しない場合はエラーメッセージが表示されます。

取得方法

1. アプリケーション側では、ユーザー検証ウェブフック処理を実装してください。

   ウェブフックを受信した場合、アプリケーションは以下の処理を行う必要があります：

   • ウェブフックで渡されたIDでユーザーを検索します。
   • その結果に応じて、以下のいずれかのステータスコードを送信します。
     • 200 HTTP - ユーザーが見つかった場合のウェブフックからの応答を含むコード
     • 404 HTTP - ユーザー IDが見つからない場合のコード
   • パーソナライズのためのユーザー属性を送信します。

4. サイトに複数のページが含まれている場合は、必要なページを選択してください：
   1. ビルダー上部にある現在のページタイトルをクリックします。
   2. ドロップダウンリストから必要なページを選択してください。
5. 「ログイン設定」ブロックに移動します。

6. 「リンクされたユーザーIDでログイン」オプションを選択します。
7. ドロップダウンリストから「新規ログイン」または既存のプロジェクトを選択します。
8. ウェブフックを受け取るURLを入力します。