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

运行机制

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

注:
上图显示了登录小组件的方案之一。您可以自定义小组件

用户场景

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

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

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

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

如何获取

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

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

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

要创建艾克索拉帐户OAuth 2.0客户端:
  1. 在发布商帐户中创建一个项目
  2. 在发布商帐户中设置登录管理器项目
  3. 联系您的客户成功经理或发送邮件至csm@xsolla.com并提供以下信息:
参数类型示例描述
Redirect URIs字符串数组[“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”]可用于在用户通过艾克索拉帐户认证后将其重定向到的URI地址列表。
Audience字符串“https://example.com”用户可通过艾克索拉帐户登录的域名。
Scope字符串数组[“email”, “transactions”]艾克索拉帐户中的权限列表。
  1. 艾克索拉集成团队将为您创建一个艾克索拉帐户OAuth 2.0客户端并为您提供其ID和密钥。这些数据在获取用户授权令牌时需用到。

集成登录管理器小组件

请使用SDK集成登录管理器小组件。

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

  1. 发布商帐户中打开您的项目,然后前往登录管理器部分。
  2. 在登录管理器项目面板中单击配置
  3. 前往身份认证部分,然后选择社交网络登录部分。
  4. 在社交网络列表中选择艾克索拉
  1. 单击⚙图标,然后选择设置
  2. 填写以下字段:
    • 应用程序ID — 从艾克索拉收到的艾克索拉帐户OAuth 2.0客户端ID。
    • 应用程序密钥 — 从艾克索拉收到的艾克索拉帐户OAuth 2.0密钥。
    • 您的网站链接 — 发送用授权代码交换用户授权令牌请求的网站。请指定创建艾克索拉帐户OAuth 2.0客户端时在Audience参数中指定的同一个URL地址。

  1. 单击Connect

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

小组件代码示例:

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

    • 单击网站上的按钮后在弹窗中跳转到艾克索拉钱包身份认证页面:
      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地址。

小组件代码示例:

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

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

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

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

小组件代码示例:

Copy
Full screen
Small screen
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. 前往身份认证部分,然后选择社交网络登录部分。

  1. 嵌入社交网络JWT令牌开关设置为
  2. 单击保存更改
本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!
上次更新时间: 2024年3月15日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!