连接Xsolla Login widget SDK

可使用NPM包管理器或HTML页面上的<script>标记来安装艾克索拉登录管理器小组件。

通过以下方式之一连接Xsolla Login widget SDK：

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</script>

初始化Xsolla Login widget 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。

设置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，请打开发布商帐户，前往登录管理器 > 仪表板 > 您的登录管理器项目部分，然后单击登录管理器项目名称旁边的复制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

1. 下载Epic Games启动器。
2. 新建一个虚幻引擎项目。

3. 下载并安装SDK：
   1. 要从虚幻商城下载并安装该SDK：
      1. 前往虚幻商城上的SDK页面。
      2. 单击Open in Launcher。

1. 1. 3. 前往Epic Games启动器。

1. 1. 4. 单击Install to Engine。
      5. 在虚幻编辑器中打开您的虚幻引擎项目。
      6. 前往Settings > Plugins > Installed > Xsolla SDK部分。勾选Enabled复选框并单击Restart Now以保存设置并重新加载虚幻编辑器。

1. 2. 要从GitHub下载并安装该SDK：
      1. 下载包含用于相应引擎版本SDK的包。
      2. 解压缩包。
      3. 将SDK文件夹移至虚幻引擎项目根目录下的plugins目录。

设置SDK

1. 在虚幻编辑器中打开您的虚幻引擎项目。
2. 前往Settings > Project Settings > Plugins > Xsolla Settings > General并指定项目参数：

1. 1. 在Project ID字段中，指定可在发布商帐户中项目名称旁边找到的项目ID。
   2. 在Login ID字段中，指定登录管理器项目的ID。要获取该ID，请打开发布商帐户，前往登录管理器 > 仪表板 > 您的登录管理器项目部分，然后单击登录管理器项目名称旁边的复制ID。
   3. 在Client ID字段中，为OAuth 2.0指定可在发布商帐户登录管理器 > 您的登录管理器项目 > 安全性 > OAuth 2.0部分中找到的客户端ID。
   4. 在Redirect URI字段中，指定用户成功完成认证、邮箱验证或密码重置后将其重定向到的URL或应用程序内路径。该值必须与发布商帐户中登录管理器 > 您的登录管理器项目 > 安全性 > OAuth 2.0部分中指定的值一致。
   5. 如有需要，设置其他的设置（如Pay Station UI部分中的支付UI显示选项）。

1. 之后，您在发布商帐户中的项目将连接到演示Map。

3. 前往Content Browser > View Options，然后勾选Show Engine Content和Show Plugin Content复选框。

添加艾克索拉登录管理器小组件的打开

调用AuthWithXsollaWidget SDK方法，传入以下参数：

• WorldContextObject — world context对象（适用于C++调用）。
• SuccessCallback — 用户成功认证和收到令牌的回调（可选）。
• CancelCallback — 用户认证取消回调，在用户未完成认证流程即关闭小组件的情况下触发（可选）。
• ErrorCallback — 认证过程中发生错误的回调（可选）。
• bRememberMe — 是否需要留存身份认证数据（可选）。默认情况下值设置为false。
• Locale — UI语言（可选）。默认情况下，该值由用户IP地址定义。
• State — 用于应用程序服务器上额外用户验证的字符串。默认值设置为xsollatest。

示例：