Login Widget SDK APIコールの使用方法
以下の場合で、ログインウィジェットからLogin Widget SDK APIコールを別に扱うことができます:
- 自分のウィジェットを使用する
- ログインウィジェットフローを部分的に実装する
お知らせ
すべてのAPIコールがこのシナリオをサポートしているわけではありません。
コードの初期化
Login Widget SDK APIコールをウィジェットなしで使用するには、以下のコードを<body>
タグに接続します:
Copy
1<script>
2const api = new XsollaLogin.Api({
3 projectId: 'someProjectId'
4});
5</script>
npm-packageを使用する場合の初期化コード:
Copy
1import XsollaLogin from '@xsolla/login-sdk';
2const api = new XsollaLogin.Api({
3 projectId: 'someProjectId'
4});
初期化コードでは、以下のパラメータが渡されます:
パラメータ | 種類 | 説明文 |
---|---|---|
projectId | string | アドミンページからのログインプロジェクトのID。必須。 |
fullLocale | string | <language code>_<country code> フォーマットのインターフェース言語と地域、そこで:
このパラメータは、指定された地域での使用頻度によるソーシャルネットワークのソートや、ユーザーに送信されるメール言語に影響します。 |
callbackUrl | string | ログインまたはサインアップが成功した場合にエクソーラログインサーバーが機能するURL。 |
emailTemplate | string | ユーザーにメールを送信するためのプロジェクト名。 |
payload | string | コードで渡すことのできる追加データ。このデータは、ログイン成功後にユーザーJWTに追加されます。 |
with_logout | boolean | 新規ログイン時に以前のトークンを取り消すかどうか。 デフォルトではfalse です。 |
clientId | string | クライアントアプリのID。アプリでOAuth 2.0プロトコルベースの認証が使用されている場合に渡されます。 |
scope | string | アプリによって要求されたユーザーアカウントに関する追加情報。アプリでOAuth 2.0プロトコルベースの認証が使用されている場合に渡されます。 可能な値:
|
state | string | CSRF攻撃などを防ぐための追加のユーザー認証です。8文字以上でなければなりません。 |
redirectUrl | string | ユーザーがアカウントを確認、ログイン、またはパスワードのリセットを確認した後、ユーザーがリダイレクトされるURL。 |
disableConfirmByLink | boolean | ユーザーがメールまたは電話によるパスワードなしでログインした際に、電子メール内のリンクによるパスワードなし認証の確認を無効にするかどうか。デフォルトではfalse です。 |
is_oauth2 | boolean | OAuth 2.0プロトコルベースの認証をユーザーに使用するかどうか。デフォルトではfalse です。 |
APIコール
以下のLogin Widget SDK APIコールは、ログインウィジェットがなくても使用できます:
パスワードによるユーザー登録
コール | 説明 | パラメータ |
---|---|---|
api.signup(userInfo); | 新しいユーザを登録します。ユーザに関するデータは、登録時にuserInfo オブジェクトに渡されます。登録されたユーザのトークンはレスポンスに渡されます。 |
|
Copy
1let result
2// Request
3api.signup({
4 userInfo: {
5 email: 'email@address.com',
6 fields: {
7 nickname: 'Johny'
8 },
9 password: 'password123',
10 username: 'John'
11 }
12}).then((res) => {
13 result = res;
14})
15
16// Response
17result === {
18 login_url: 'https://someurl.com?token=XXXXXXX'
19}
パスワードによるログイン
コール | 説明 | パラメータ |
---|---|---|
api.login(credentials); | パスワードを使用してユーザーを認証します。ユーザーログインに必要なユーザーに関するデータは、credentials オブジェクトに渡されます。認証されたユーザーのトークンがレスポンスに渡されます。 |
|
Copy
1let result
2// Request
3api.login({
4 credentials: {
5 password: 'password123',
6 username: 'email@address.com'
7 }
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
アカウント確認
コール | 説明 | パラメータ |
---|---|---|
api.resendEmail(username); | 追加のアカウント確認メールを送信します。アカウントを確認するには、ユーザーはメール内のリンクをクリックする必要があります。ユーザーのメールアドレスは、username オブジェクトで渡されます。標準コード204が応答で返されます。 |
|
Copy
1let result
2// Request
3api.resendEmail({
4 username: 'email@address.com'
5}).then((res) => {
6 res.code === 204;
7})
パスワードレス認証
ユーザーフロー:- ユーザーは、電話番号やメールアドレスを入力します。入力された認証情報に応じて、
api.phoneGetCode
またはapi.emailGetCode
のいずれかが呼び出されます。 - サーバーはそのデータを受け取り、コードを記載したメールまたはSMSをユーザーに送信します。コードの初期化時に、電子メール内のリンクによるログイン確認を無効にする
disableConfirmByLink=true
パラメータが渡されると、リンクをクリックした後のユーザーの自動リダイレクトにapi.getConfirmCode
コールが使用されます。 api.phoneGetCode
またはapi.emailGetCode
コールは、api.loginWithPhoneCode
またはapi.loginWithEmailCode
コールによる電話番号またはメールアドレスの確認に使用したoperation_id
パラメータを返します。- メールアドレスまたは電話番号の確認に成功すると、
token
パラメータを持つURLが返されます。このトークンは、ユーザーに関する追加データのリクエストに使用されます。
コール | 説明 | パラメータ |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | 電話番号に確認コードを送信します。電話番号の確認に使用したoperation_id パラメータがレスポンスに返されます。 |
|
Copy
1let result
2// Request
3api.phoneGetCode({
4 phone_number: '+somenumber',
5 link_url: 'https://someurl.com',
6 isOauth2: true
7}).then((res) => {
8 result = res;
9})
10
11// Response
12result === {
13 operation_id: '2334j255fdf13d515fgd1'
14}
コール | 説明 | パラメータ |
---|---|---|
api.phoneGetCode({ phone_number, link_url, isOauth2 }); | メールアドレスに確認コードを送信します。メールアドレスの確認に使用したoperation_id パラメータがレスポンスに返されます。 |
|
Copy
1let result
2// Request
3api.emailGetCode({
4 email: 'email@address.com',
5 link_url: 'https://someurl.com',
6 isOauth2: true
7}).then((res) => {
8 result = res;
9})
10
11// Response
12result === {
13 operation_id: '2334j255fdf13d515fgd1'
14}
コール | 説明 | パラメータ |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | ユーザーがリンクをクリックした後に、自動的にリダイレクトするための確認コードを取得します。 |
|
Copy
1let result
2// Request
3const axiosCancelToken = Axios.CancelToken.source();
4
5api.getConfirmCode({
6 cancelToken: axiosCancelToken,
7 login: '+somenumber' || 'email@address.com',
8 operation_id: '334j255fdf13d515fgd1'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 code: 'string'
16}
17
18// If the waiting time has elapsed, returns:
19result === {
20 error: {
21 code: '010-050',
22 description: 'Deadline exceeded.'
23 }
24}
25
26// If you no longer need to wait for verification through the link you can close the request waiting period:
27axiosCancelToken.cancel();
コール | 説明 | パラメータ |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 電話番号を確認します。レスポンスには、token パラメータを持つURLが返されます。これは、ユーザーに関する追加データのリクエストに使用されます。 |
|
Copy
1let result
2// Request
3api.loginWithPhoneCode({
4 phone_number: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17
18// Response with additional fields
19result === {
20 ask_fields: [{
21 confirmation_type: 'code' || 'link'
22 name: 'email'
23 required: false
24 step: 0 // Displays the position of the field in the data retrieval queue.
25 type: 'email'
26 validation: {} // Custom validation
27 }]
28 login_url: 'https://someurl.com?token=XXXXXXX',
29 token: 'sometoken'
30}
コール | 説明 | パラメータ |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | メールアドレスを確認します。レスポンスには、token パラメータを持つURLが返されます。これは、ユーザーに関する追加データのリクエストに使用されます。 |
|
Copy
1let result
2// Request
3api.loginWithEmailCode({
4 email: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
パスワードなしでのフィールド追加リクエスト
ユーザーフロー:- ユーザーの認証に成功した後、
api.loginWithEmailCode
またはapi.loginWithPhoneCode
のコールは、アプリ内で別のフォームで表示できるフィールドの配列を返し、さらにユーザーの電話番号とメールアドレスを収集します。また、api.getAskFields
コールを実行することで、フィールドのリストを取得することができます。 - ユーザーは、電話番号やメールアドレスを入力します。
api.ask
が実行されます。 - データを受け取ったサーバーは、電話番号やメールアドレスに確認コードを送信します。コードの初期化時に、メール内のリンクによるログイン確認を無効にする
disableConfirmByLink=true
パラメータが渡された場合、リンクをクリックした後の自動ユーザーリダイレクトにapi.getConfirmCode
コールが使用されます。 api.ask
コールは、api.loginWithPhoneCode
またはapi.loginWithEmailCode
コールによる電話番号またはメールアドレスの確認に使用されるoperation_id
パラメータを返します。- 認証されたユーザーへのリダイレクトに使用されるURLは、データの確認に成功した後に返されます。
コール | 説明 | パラメータ |
---|---|---|
api.getAskFields(token); | 追加リクエストのフィールドのリストを取得します。 |
|
Copy
1let result
2// Request
3api.getAskFields({
4 token: 'sometoken'
5}).then((res) => {
6 result = res;
7})
8
9// Response
10result === [
11 {
12 confirmation_type: 'code' || 'link'
13 name: 'phone_number' || 'email'
14 required: false
15 step: 0 // Displays the position of the field in the data retrieval queue.
16 type: 'phone' || 'email'
17 validation: {} // Custom validation
18 }
19]
コール | 説明 | パラメータ |
---|---|---|
api.ask({ fields, token, link_url }); | ユーザーに関する追加データ — 電話番号またはメールアドレスを送信します。指定された電話番号やメールアドレスを確認するためのoperation_id パラメータがレスポンスに返されます。確認が不要な場合は、認証済みユーザーへのリダイレクトに使用されるtoken パラメータを持つURLをレスポンスに返します。 |
|
Copy
1let result
2// Request
3api.ask({
4 fields: {
5 phone_number: '+somenumber'
6 },
7 link_url: 'https://someurl.com',
8 token: 'sometoken'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 error: {
16 code: '003-014'
17 description: 'Confirm phone number.'
18 details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
19 }
20}
21
22// Response without confirmation
23result === {
24 redirect_url: '<login_url>?token=<token>'
25}
メールアドレスを送信する場合の例:
Copy
1let result
2// request
3api.ask({
4 fields: {
5 email: 'email@address.com'
6 },
7 link_url: 'https://someurl.com',
8 token: 'sometoken'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 error: {
16 code: '003-011'
17 description: 'Confirm email.'
18 details: { operation_id: 'BPaBScLM44GesoOYSxT5I8QfgIrTSURd' }
19 }
20}
21
22// Response without confirmation
23result === {
24 redirect_url: '<login_url>?token=<token>'
25}
コール | 説明 | パラメータ |
---|---|---|
api.getConfirmCode({ cancelToken, login, operation_id }); | リンクをクリックした後、ユーザーを自動的にリダイレクトするための確認コードを取得します。 |
|
Copy
1let result
2// Request
3const axiosCancelToken = Axios.CancelToken.source();
4
5api.getConfirmCode({
6 cancelToken: axiosCancelToken,
7 login: '+somenumber' || 'email@address.com',
8 operation_id: '334j255fdf13d515fgd1'
9}).then((res) => {
10 result = res;
11})
12
13// Response
14result === {
15 code: 'string'
16}
17
18// If the waiting time has elapsed, returns:
19result === {
20 error: {
21 code: '010-050',
22 description: 'Deadline exceeded.'
23 }
24}
25
26// If you no longer need to wait for verification through the link you can close the request waiting period:
27axiosCancelToken.cancel();
コール | 説明 | パラメータ |
---|---|---|
api.loginWithPhoneCode({ phone_number, code, operation_id, isOauth2 }); | 電話番号を確認します。レスポンスには、token パラメータを持つURLが返されます。これは、ユーザーに関する追加データのリクエストに使用されます。 |
|
Copy
1let result
2// Request
3api.loginWithPhoneCode({
4 phone_number: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17
18// Response with additional fields
19result === {
20 ask_fields: [{
21 confirmation_type: 'code' || 'link'
22 name: 'email'
23 required: false
24 step: 0 // Displays the position of the field in the data retrieval queue.
25 type: 'email'
26 validation: {} // Custom validation
27 }]
28 login_url: 'https://someurl.com?token=XXXXXXX',
29 token: 'sometoken'
30}
コール | 説明 | パラメータ |
---|---|---|
api.loginWithEmailCode({ email, code, operation_id, isOauth2 }); | メールアドレスを確認します。レスポンスには、token パラメータを持つURLが返されます。これは、ユーザーに関する追加データのリクエストに使用されます。 |
|
Copy
1let result
2// Request
3api.loginWithEmailCode({
4 email: 'email@address.com',
5 code: '3423',
6 operation_id: '334j255fdf13d515fgd1',
7 isOauth2: true
8}).then((res) => {
9 result = res;
10})
11
12// Response
13result === {
14 login_url: 'https://someurl.com?token=XXXXXXX'
15}
16
17// Response with additional fields
18result === {
19 ask_fields: [{
20 confirmation_type: 'code' || 'link'
21 name: 'phone_number'
22 required: false
23 step: 0 // Displays the position of the field in the data retrieval queue.
24 type: 'phone'
25 validation: {} // Custom validation
26 }]
27 login_url: 'https://someurl.com?token=XXXXXXX',
28 token: 'sometoken'
29}
パスワードのリセット
ユーザーフロー:- アプリケーションがフォームを開き、ユーザーが電子メールアドレスまたはユーザー名を入力します。
api.reset
コールが実行されます。 - サーバーはユーザーに確認メールを送信します。
- ユーザーはメール内のリンクをクリックして、新しいパスワードを入力するフォームを開きます。
- ユーザーが新しいパスワードを入力します。
api.set
コールが実行されます。
コール | 説明 | パラメータ |
---|---|---|
api.reset(username); | パスワードをリセットし、アクションを確認します。パスワードリセットを確認するためには、ユーザはメール内のリンクをクリックする必要があります。ユーザ名またはユーザの電子メールアドレスは、username オブジェクトで渡されます。レスポンスには204 コードが返されます。 |
|
Copy
1let result
2// Request
3api.reset({
4 username: 'John'
5}).then((res) => {
6 res.code === 204;
7})
コール | 説明 | パラメータ |
---|---|---|
api.set({ new_password, reset_code, user_id }); | 新しいパスワードを設定し、アクションを確認します。新しいパスワードを確認するには、ユーザーはメール内のリンクをクリックする必要があります。レスポンスには204 コードが返されます。 |
|
Copy
1let result
2// Request
3api.set({
4 new_password: 'newpass',
5 reset_code: '3423',
6 user_id: '324324234'
7}).then((res) => {
8 res.code === 204;
9})
シングルサインオン
お知らせ
詳しくは、シングルサインオンについての説明をご覧ください。
パラメータ | 種類 | 説明文 |
---|---|---|
api.checkUserAuthSSO(); | ユーザがシングルサインオンで認証されているかどうかを確認します。成功すると、1回限りのcode が返されます。 |
Copy
1let result
2// Request
3api
4 .checkUserAuthSSO()
5 .then(res => {
6 result === res;
7 });
8
9result === {
10 code: "examplecode"
11}
コール | 説明 | パラメータ |
---|---|---|
api.userAuthSSOWithRedirect(loginUrl); | ユーザーがシングルサインオンで認証されたかどうかを確認します。認証に成功した場合は、認証コードを含む生成されたloginUrl のURLにリダイレクトされます。 |
|
Copy
1// Request
2api
3 .userAuthSSOWithRedirect(
4 loginUrl: 'some-redirect-url.com'
5 )
6 .then(res => {
7 res.code === 302;
8 });
コール | 説明 | パラメータ |
---|---|---|
api.logout(token, session); | システムのユーザーをログアウトし、session パラメータに従ってユーザーセッションを削除します。 |
|
Copy
1// Request
2api
3 .logout(
4 token: 'exampleToken',
5 session: 'sso' | 'all'
6 )
7 .then(res => {
8 res.code === 204;
9 });
パラメータ | 種類 | 説明文 |
---|---|---|
api.clearSSO(); | 現在のユーザーのデバイスからシングル サインオンクッキーファイルを削除します。呼び出しが成功すると、応答で204 コードが返されます。 |
Copy
1// Request
2api
3 .clearSSO()
4 .then(() => {
5 // Success
6 });
この記事は役に立ちましたか?
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。