如何集成通过艾克索拉帐户进行用户认证

运行机制

您可以在艾克索拉钱包中添加通过艾克索拉帐户进行用户认证。

用户场景

您可以实现以下用户场景之一：

1. 在登录小组件中单击通过艾克索拉登录按钮在模态窗口中打开艾克索拉钱包身份认证页面：
   1. 用户在登录小组件中单击通过艾克索拉登录按钮。
   2. 他们将跳转到一个打开的模态窗口，显示艾克索拉钱包身份认证屏幕。
   3. 用户在艾克索拉钱包上完成身份认证过程。
   4. 用户将跳转到在发布商帐户的回调URL字段中指定的URL页面。

2. 在登录小组件中单击通过艾克索拉登录按钮后跳转到艾克索拉钱包身份认证页面：
   1. 用户在登录小组件中单击通过艾克索拉登录按钮。
   2. 他们将跳转到在同一个窗口中打开的艾克索拉钱包身份认证屏幕。
   3. 用户在艾克索拉钱包上完成身份认证过程。
   4. 用户将跳转到在发布商帐户的回调URL字段中指定的URL页面。

3. 单击网站上的按钮后在弹窗中跳转到艾克索拉钱包身份认证页面：
   1. 用户在网站上点击按钮。
   2. 他们将跳转到在弹窗中打开的艾克索拉钱包身份认证屏幕。
   3. 用户在艾克索拉钱包上完成身份认证过程。
   4. 用户将跳转到在发布商帐户的回调URL字段中指定的URL页面。

如何获取

要将艾克索拉认证作为社交网络进行集成：

1. 创建艾克索拉帐户OAuth 2.0客户端。
2. 集成登录管理器小组件。
3. 将艾克索拉作为社交网络启用。
4. 实现用户授权令牌的检索。

创建艾克索拉帐户OAuth 2.0客户端

1. 在发布商帐户中创建一个项目。
2. 在发布商帐户中设置登录管理器项目。
3. 联系您的客户成功经理或发送邮件至csm@xsolla.com并提供以下信息：

4. 艾克索拉集成团队将为您创建一个艾克索拉帐户OAuth 2.0客户端并为您提供其ID和密钥。这些数据在获取用户授权令牌时需用到。

集成登录管理器小组件

将艾克索拉作为社交网络启用

1. 在发布商帐户中打开您的项目，然后前往登录管理器部分。
2. 在登录管理器项目面板中单击配置。
3. 前往身份认证部分，然后选择社交网络登录部分。
4. 在社交网络列表中选择艾克索拉。

5. 单击⚙图标，然后选择设置。
6. 填写以下字段：
   • 应用程序ID — 从艾克索拉收到的艾克索拉帐户OAuth 2.0客户端ID。
   • 应用程序密钥 — 从艾克索拉收到的艾克索拉帐户OAuth 2.0密钥。
   • 您的网站链接 — 发送用授权代码交换用户授权令牌请求的网站。请指定创建艾克索拉帐户OAuth 2.0客户端时在Audience参数中指定的同一个URL地址。

7. 单击Connect。

8. 设置以下用户场景之一：
   • 在登录小组件中单击通过艾克索拉登录按钮后跳转到艾克索拉钱包身份认证页面（默认）：
     1. 前往身份认证部分并选择回调URL部分。
     2. 在回调URL字段中，输入用户认证后要跳转到的页面的URL地址。
     3. 在登录小组件代码的callbackUrl参数中，传入用户认证后应跳转到的页面的URL地址。

小组件代码示例：

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  callbackUrl: '[Your Callback URL]',
});

1. • 单击网站上的按钮后在弹窗中跳转到艾克索拉钱包身份认证页面：
     1. 在导航页中，前往身份认证部分并选择回调URL部分。
     2. 确保在回调URL部分添加了以下URL：
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • https://login.xsolla.com/api/social/oauth2/callback
     3. 在登录小组件代码中，在babkaLoginPopup参数中传入true值并在callbackUrl参数中传入用户认证后应跳转到的页面的URL地址。

小组件代码示例：

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. • 4. 在网站上添加打开艾克索拉钱包身份认证页面的按钮。

通过艾克索拉登录按钮代码示例：

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

1. • 在登录小组件中单击通过艾克索拉登录按钮后在模态窗口中打开艾克索拉钱包身份认证页面：
     1. 前往身份认证部分并选择回调URL部分。
     2. 在回调URL字段中，输入用户认证后要跳转到的页面的URL地址。
     3. 在登录小组件代码中，在babkaLoginFlow参数中传入popup值，并在callbackUrl参数中传入用户认证后应跳转到的页面的URL地址。

小组件代码示例：

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginFlow: popup,
  callbackUrl: '[Your Callback URL]',
});

获取用户授权令牌

在艾克索拉侧授权后，用户将被重定向到callback_url参数中指定的URL。用户授权令牌在token参数中传递。

要在艾克索拉登录管理器JWT令牌中嵌入艾克索拉帐户OAuth JWT令牌：

1. 在发布商帐户中打开您的项目，然后前往登录管理器部分。
2. 在登录管理器项目面板中单击配置。
3. 前往身份认证部分，然后选择社交网络登录部分。

4. 将嵌入社交网络JWT令牌开关设置为开。
5. 单击保存更改。