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

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

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

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</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 クライアント」設定のアドミンページで指定する必要があります。

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

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

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

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

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

アーカイブからパッケージをインポートする

1. CDNまたはGitHubからSDKをダウンロードします。

2. パッケージを解凍します。
3. Unityプロジェクトを開くか、新規プロジェクトを作成します。
4. UnityエディタでメインメニューのAssets > Import Package > Custom PackageからSDKを選択します。

コンパイラをセットアップする

1. メインメニューでEdit > Project Settingsをクリックします。
2. Player > Other Settings > Configurationセクションに移動します。
3. Scripting BackendフィールドでMonoが選択されていることを確認してください。

Androidの依存関係を解決する

Androidビルドの場合、SDKはネイティブのAndroidライブラリにある関数を使用します。

依存関係を解決し、必要なライブラリをダウンロードするには、次の手順に従います：

1. ビルドプラットフォームとしてAndroidを指定します：
   1. Unityエディタでは、メインメニューでFile > Build Settingsに移動します。
   2. Platformパネルで、Androidを選択します。
   3. Switch Platformをクリックします。

2. 依存関係マネージャーを起動します：
   1. IUnityエディタでは、メインメニューでAssets > External Dependency Manager > Android Resolver > Resolveに移動します。
   2. 依存関係マネージャーが終了するまで待ちます。

その結果、すべての必要なAndroidライブラリのJARまたはAARファイルがAssets/Plugins/Androidフォルダにダウンロードされます。

SDKをセットアップする

1. Unityプロジェクトを開きます。
2. メインメニューでWindow > Xsolla > Edit Settingsをクリックします。
3. Inspector以下の方法でパネルで主なプロジェクトパラメータを指定します：

1. 1. アドミンページから設定をインポートします：
      1. Fill settings by PAをクリックします。
      2. LoginとPasswordフィルドでアドミンページの認証データを指定します。
      3. Log Inをクリックします。
      4. Publisher Accountセクションでのフィルドを入力します。

1. 1. 5. Apply Settingsをクリックします。

1. 2. パラメータを手動で指定します：
      1. Project IDフィルドで、プロジェクトIDは、パブリッシャーアカウントでプロジェクト名の横に表示されるものを指定します。
      2. Login IDフィルドで、ログインプロジェクトのIDを指定します。これを取得するには、パブリッシャーアカウントを開き、「ログイン > ダッシュボード > ログインプロンプト」セクションに移動し、ログインプロジェクト名の横にある「IDをコピー」をクリックします。
      3. Callback URLフィルドで、ユーザーが認証、電子メールの確認、またはパスワードのリセットに成功した後にリダイレクトされるURLまたはパスを指定します。この値は、「ログイン > ログインプロジェクト > セキュリティ > OAuth 2.0」セクションのパブリッシャーアカウントで指定したものと一致する必要があります。

1. 1. 4. OAuth Client IDフィールドで、アドミンページのログインプロジェクト > セキュリティ > OAuth 2.0セクションにあるOAuth 2.0用のクライアントIDを指定します。

4. 必要に応じて他の設定も行います（例：Pay Station UIセクションの決済UIの表示オプションなど）。

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

ウィジェットを開くには、XsollaAuth.AuthWithXsollaWidget SDKメソッドを呼び出し、以下のパラメータを渡します：

• onSuccess — ユーザー認証成功時のコールバック。
• onError — リクエストエラー時のコールバック。
• onCancel — ユーザー認証キャンセルコールバック。ユーザーが認証プロセスを完了せずにウィジェットを閉じたときにトリガーされます。
• locale — UI言語（任意）。以下の言語に対応しています：アラビア語（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）。

スタンドアロンのビルドの場合、ウィジェットはSDKに含まれている組み込みブラウザで開きます。URLの変更を追跡できる別の組み込みブラウジングソリューションを使用できます。

SDKをインストールする

必要なライブラリはMaven Centralから入手できます。

ライブラリをインストールするには：

1. Android Studioを起動します。
2. アプリケーションのbuild.gradleファイルを開きます。
3. 依存関係セクションに次の行を追加します。<version_number>は必要なライブラリバージョンです：

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

SDKを初期化する

アプリケーションの起動時に静的メソッドを呼び出して、ログインライブラリを初期化します。これを行うには、Androidプロジェクトのソースコードに次の行を追加します：

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

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

ウィジェットを開くには：

1. ログインライブラリからXLogin.startAuthWithXsollaWidgetメソッドを呼び出し、以下のパラメータを渡します：

1. • fragmentまたはactivity — 現在のフラグメントまたはアクティビティ。

1. • callback — ステータスのコールバック。

1. • locale — UI言語（任意）。以下の言語に対応しています：アラビア語（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）。

2. onActivityResultメソッドの中で、ログインライブラリのXLogin.finishAuthWithXsollaWidgetメソッドを呼び出し、以下のパラメータを渡します：

1. • activity — 現在のアクティビティ。アプリケーションコンテキストの処理には必須です。

1. • activityResultRequestCode — onActivityResultメソッドからのリクエストコード。オリジナルのリクエストを識別するために使用されます。

1. • activityResultCode — onActivityResultメソッドからのリクエストコード。これにより、操作が成功したかどうかを判断できます。

1. • activityResultData — onActivityResultから返されるデータ。これには操作の結果が含まれます。

1. • callback — ステータスコールバック。認証結果の処理に使用されます。

3. 認証結果を処理する際は、ストアライブラリを初期化します。

ストアライブラリを初期化する：

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

SDKをインストールする

1. Epic Gamesランチャーをダウンロードします。
2. Unreal Engineプロジェクトを作成します。

3. SDKをダウンロードしてインストールします：
   1. Unreal EngineマーケットプレイスからSDKをダウンロードしてインストールするには：
      1. Unreal EngineマーケットプレイスでのSDKページに移動します。
      2. Open in Launcherをクリックします。

1. 1. 3. Epic Gamesランチャーに移動します。

1. 1. 4. Install to Engineをクリックします。
      5. Unreal EditorでUnreal Engineプロジェクトを開きます。
      6. Settings > Plugins > Installed > Xsolla SDKセクションに移動します。Enabledボックスにチェックを入れ、Restart Nowをクリックして設定を保存し、Unreal Editorをリロードします。

1. 2. GitHubからSDKをダウンロードしてインストールします：
      1. ご使用のバージョンのエンジンのSDKが含まれたパッケージをダウンロードします。.
      2. パッケージを解凍します。
      3. SDKフォルダをUnreal Engineプロジェクトのルートにあるpluginsディレクトリに移動します。

SDKをセットアップする

1. Unreal EditorでUnreal Engineプロジェクトを開きます。
2. Settings > Project Settings > Plugins > Xsolla Settings > Generalに移動してプロジェクトパラメータを指定します：

1. 1. Project IDフィルドで、プロジェクト名の横にあるアドミンページにあるプロジェクトIDを指定します。
   2. Login IDフィルドで、ログインプロジェクトのIDを指定します。これを取得するには、アドミンページを開き、「ログイン > ダッシュボード > ログインプロンプト」セクションに移動し、ログインプロジェクト名の横にある「IDをコピー」をクリックします。
   3. Client IDフィルドで、ログイン > あなたのログインプロジェクト > セキュリティ > OAuth2.0セクションのアドミンページにあるOAuth2.0のクライアントIDを指定します。
   4. Redirect URIフィルドで、ユーザー認証、メールアドレスの確認、パスワードのリセットに成功した後にリダイレクトされる、アプリケーション内のURLまたはパスを指定します。この値は、「ログイン > あなたのログインプロジェクト > セキュリティ > OAuth 2.0」セクションのアドミンページで指定したものと一致する必要があります。
   5. 必要に応じて他の設定も行います（例：Pay Station UIセクションの決済UIの表示オプションなど）。

1. その結果、アドミンページのプロジェクトは、デモマップに接続されることになります。

3. Content Browser > View Optionsに移動し、Show Engine ContentとShow Plugin Contentボックスをチェックに入れます。

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

AuthWithXsollaWidget SDKメソッドを呼び出し、以下のパラメータを渡します：

• WorldContextObject — ワールドコンテキストオブジェクト（C++コール用）。
• SuccessCallback — ユーザー認証成功およびトークン受信時のコールバック（任意）。
• CancelCallback — ユーザーが認証プロセスを完了せずにウィジェットを閉じるとトリガーされるユーザー認証キャンセルコールバック（任意）。
• ErrorCallback — 認証プロセス中に発生するエラーのコールバック（任意）。
• bRememberMe — 認証データを保持する必要があるかどうか（任意）。デフォルトでは、値はfalseに設定されています。
• Locale — UI言語（任意）。デフォルトでは、この値はユーザーのIPアドレスによって定義されます。
• State — アプリケーションサーバー上でユーザーの追加検証に使用される文字列。デフォルト値はxsollatestに設定されています。

例：