独自の認証システムを使用している場合、この段階では、エクソーラがサブスクリプションを管理するために必要とする以下のデータをシステムが保存し、渡すことができるように確保するだけで済みます：

• ユニークユーザーID
• ユーザーのメールアドレス

この場合、ウェブショップテンプレートを使用してウェブサイトを作成し、IDまたはディープリンク経由でユーザー認証を設定することをお勧めします。

これを行うには：

1. パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. 「サイトを作成」をクリックします。
3. ウェブショップテンプレートを選択します。
4. ゲームが利用可能な外部プラットフォームのURLを追加します。これにより、ゲームのスタイル（画像、ゲームタイトル、開発元情報、カラースキーム）を自動でページに追加し、迅速にページを作成できます。ゲームデータを使いたくない場合は、App StoreまたはGoogle Play URL経由でゲーム情報をコピーのトグルを非アクティブにしてください。

5. 「ウェブショップを作成」をクリックします。

6. 以下のいずれかのユーザー認証オプションを設定してください：

   • ユーザーID認証
   • ユーザーIDとディープリンクによる認証
   • ディープリンク認証
   • リンクされたユーザーIDを使用したエクソーラログインによる認証

パブリッシャーアカウントでユーザー認証の設定

エクソーラでは、ユーザーを認証する様々な方法を設定することができます。このガイドでは、エクソーラを統合して設定する最も簡単な方法 - ワンタイムコードまたはソーシャルネットワーク経由でユーザーを認証する既製のウィジェットを使用する方法 - について説明します。

後で、ユーザー認証方法を変更したり、別の統合オプションを使用したりできます。

エクソーラは標準的なウィジェットテンプレートを提供しています。その外観とコンテンツは、プロジェクトで選択されたログイン方法と、パブリッシャーアカウントからのウィジェットカスタマイズ設定によって決定されます。

ワンタイムコードまたはソーシャルネットワーク経由での認証のための標準ウィジェットビュー：

パブリッシャーアカウントでユーザー認証をセットアップするには：

1. パブリッシャーアカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
2. ダッシュボードセクションで、「ログインプロジェクトを作成」をクリックします。
3. 「標準ログインプロジェクト」を選択し、「作成してセットアップする」をクリックします。新しいログインプロジェクトが作成されるまで待ちます。ログインプロジェクトのページが表示されます。
4. ログイン方法ブロックで、「パスワードレスログイン」を選択します。
5. 「構成する」をクリックします。
6. ワンタイムコードを使用した認証を設定します：
   1. パスワードレスログインブロックで、コールバックURLを選択します。
   2. コールバックURLフィールドに、認証成功後にユーザーがリダイレクトされるURLを追加します。
   3. 「変更内容を保存」をクリックします。
7. ソーシャルネットワーク経由の認証を設定します（任意）：
   1. パンくずリスト内にあるログインプロジェクト名をクリックして、ログインプロジェクトページに戻ります。
   2. 認証ブロックに移動してソーシャルログインを選択します。
   3. ユーザーがアプリケーションへの新規登録やログインに使用できるソーシャルネットワークを接続します：

1. 1. • ご希望のソーシャルネットワークに接続するには、「⚙」アイコンをクリックし、「接続」を選択します。

1. 1. • 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します（枠線が緑色になる）。それで、「管理」ドロップダウンメニューから、「接続する」を選択します。

1. 1. • 利用可能なすべてのソーシャルネットワークを一度に接続するには、「すべて選択」をクリックします。それで、「管理」ドロップダウンメニューから、「接続する」を選択します。

1. 4. 「変更内容を保存する」をクリックします。

ウィジェット設定をテストすることができます。これを行うには、画面の左側にある「今すぐ確認」をクリックし、ログインしてください。

統合プロセス中に、ログインプロジェクトIDが必要になります。このIDは、パブリッシャーアカウントのお客様のプロジェクト内にあるプレイヤー > ログイン > ダッシュボードセクションで確認できます。

アプリケーションでのユーザー認証の実装

以下に、エクソーラログインを統合する最速の方法 — 既製のウェブウィジェットをアプリケーションに統合する方法の手順を紹介します。

独自のUIを使用してアプリケーションにユーザーをログインさせたい場合は、ログインAPIまたはSDKメソッドを使用してユーザー認証ロジックを実装する必要があります。

エクソーラログインウィジェットSDKを接続する

エクソーラログインウィジェットは、NPMパッケージマネージャー、またはHTMLページの<script>タグを使ってインストールできます。

以下のいずれかの方法でエクソーラログインウィジェットSDKを接続します：

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

エクソーラログインウィジェットSDKを初期化する

以下のいずれかの方法でウィジェットを初期化します。以下のパラメータを指定します：

• projectId — ログインプロジェクトID。これは、プロジェクトのパブリッシャーアカウントのプレイヤー > ログイン > ダッシュボードセクションにあります。
• preferredLocale — インタフェース言語。以下の言語に対応しています：アラビア語（ar_AE）、ブルガリア語（bg_BG）、チェコ語（cz_CZ）、英語（en_US）、ドイツ語（de_DE）、スペイン語（es_ES）、フランス語（fr_FR）、ヘブライ語（he_IL）、イタリア語（it_IT）、日本語（ja_JP）、韓国語（ko_KR）、ポーランド語（pl_PL）、ポルトガル語（pt_BR）、ルーマニア語（ro_RO）、ロシア語（ru_RU）、タイ語（th_TH）、トルコ語（tr_TR）、ベトナム語（vi_VN）、簡体字中国語（zh_CN）、繁体字中国語（zh_TW）。
• clientId — OAuth 2.0 クライアントID。これは、プロジェクトのパブリッシャーアカウントのプレイヤー > ログイン > あなたのログインプロジェクト > セキュリティ > OAuth 2.0セクションにあります。
• redirectUri — ユーザーがアカウントの確認、ログイン、またはパスワードのリセットの確認後にリダイレクトされるURL。「OAuth 2.0 クライアント」設定のパブリッシャーアカウントで指定する必要があります。

残りのパラメータは変更しないでください。

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

エクソーラログインウィジェットの開き方を追加する

1. HTMLページに、on-clickイベントとxl.open()機能を持つボタンを追加します：

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. HTMLページの<div>ブロックでウィジェットを開くためのコードを追加します。

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

パブリッシャーアカウントでユーザー認証の設定

エクソーラでは、ユーザーを認証する様々な方法を設定することができます。このガイドには、その中でも最速で設定できる方法—ワンタイムコードまたはソーシャルネットワーク経由でユーザーを認証する方法—に関する手順が記載されています。

後から、ユーザーの認証方法を変更できます。

パブリッシャーアカウントでユーザー認証をセットアップするには：

1. パブリッシャーアカウントでプロジェクトを開き、プレイヤー > ログインセクションに移動します。
2. ダッシュボードセクションで、「ログインプロジェクトを作成」をクリックします。
3. 「標準ログインプロジェクト」を選択し、「作成してセットアップする」をクリックします。新しいログインプロジェクトが作成されるまで待ちます。ログインプロジェクトのページが表示されます。
4. ログイン方法ブロックで、「パスワードレスログイン」を選択します。
5. 「構成する」をクリックします。
6. ワンタイムコードを使用した認証を設定します：
   1. パスワードレスログインブロックで、コールバックURLを選択します。
   2. コールバックURLフィールドに、認証成功後にユーザーがリダイレクトされるURLを追加します。
   3. 「変更内容を保存」をクリックします。
7. ソーシャルネットワーク経由の認証を設定します（任意）：
   1. パンくずリスト内にあるログインプロジェクト名をクリックして、ログインプロジェクトページに戻ります。
   2. 認証ブロックに移動してソーシャルログインを選択します。
   3. ユーザーがアプリケーションへの新規登録やログインに使用できるソーシャルネットワークを接続します：

1. 1. • ご希望のソーシャルネットワークに接続するには、「⚙」アイコンをクリックし、「接続」を選択します。

1. 1. • 複数のソーシャルネットワークを一度に接続するには、必要なペインを選択します（枠線が緑色になる）。それで、「管理」ドロップダウンメニューから、「接続する」を選択します。

1. 1. • 利用可能なすべてのソーシャルネットワークを一度に接続するには、「すべて選択」をクリックします。それで、「管理」ドロップダウンメニューから、「接続する」を選択します。

1. 4. 「変更内容を保存する」をクリックします。

サイトビルダーでユーザー認証の設定

サイトを作成し、ユーザー認証を設定するには：

1. パブリッシャーアカウントでプロジェクトを開き、ストアフロント > ウェブサイトセクションに移動します。
2. 「サイトを作成」をクリックします。
3. 任意のサイトテンプレートを選択し、サイトの作成に進んでください。

4. ビルダー内で、ログイン設定 > エクソーラログインセクションに移動し、ドロップダウンリストから以前に設定した認証オプションを選択します。
5. 認証モーダルウィンドウをサイトのカラースキームと一致させるには、サイトテーマを使用トグルを有効に設定してください（推奨）。
6. レイアウトセクションで、必要に応じてロゴとカスタム背景を設定します。