アプリケーションでユーザーを認証する
セキュリティと支払いトランザクションの正しい操作を確保するために、Xsolla APIは、エクソーラログインを使用して承認中に取得したユーザーJSONウェブトークンを使用します。
以下に、エクソーラログインを統合する最速の方法 — 既製のウェブウィジェットをアプリケーションに統合する方法の手順を紹介します。
独自のUIを使用してアプリケーションにユーザーをログインさせたい場合は、Login APIまたはSDKメソッドを使用してユーザー認証ロジックを実装する必要があります。
プロジェクトに最適なSDKを選択します：
お知らせ
エクソーラログインウィジェットSDKを接続する
エクソーラログインウィジェットは、NPMパッケージマネージャー、またはHTMLページの<script>タグを使ってインストールできます。
以下のいずれかの方法でエクソーラログインウィジェットSDKを接続します：
コンソールを起動し、コマンドを実行します：
Copy
- bash
npm i @xsolla/login-sdk
エクソーラログインウィジェット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 クライアント」設定のアドミンページで指定する必要があります。
残りのパラメータは変更しないでください。
JSファイルに初期化コードを追加します：
Copy
- javascript
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'
});
エクソーラログインウィジェットの表示を追加する
- HTMLページに、
on-clickイベントとxl.open()機能を持つボタンを追加します：
Copy
- html
<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>
- HTMLページの
<div>ブロックでウィジェットを開くためのコードを追加します。
JSファイルに次のコードを追加します：
Copy
- javascript
xl.mount('xl_auth');
const showFullscreen = () => {
const myDiv = document.querySelector('#xl_auth');
myDiv.style.display = 'block';
xl.open();
}
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
