跳到主要内容

网页登录 JS SDK 接入指南

使用​

引入 SDK​

NPM​

npm install @xd-js-sdk/auth --registry=http://npm.xindong.com/
import { signInWithPopup, signInXDWithCode } from "@xd-js-sdk/auth";

CDN​

<script src="https://website.xdcdn.net/xd-login-sdk/pro/index.js"></script>
const { signInWithPopup, signInXDWithCode } = XDAuth;

示例​

线上测试环境 demo 地址​

代码示例​

const env = "dev";
const xd_client_id = "xxx"; // xd client id
const taptap_client_id = "xxx";// tap client id
const google_client_id = "xxx";// google client id
const apple_client_id = "xxx";// apple client id

/* 弹窗登录 */
signInWithPopup({
  env,
  xd_client_id,
  clients: [
    {
      client_id: taptap_client_id,
      platform: "taptap",
    },
    {
      client_id: google_client_id,
      platform: "google",
    },
    {
      client_id: apple_client_id,
      platform: "apple",
    },
    {
      platform: "steam",
    },
  ],
  //...
})
.then((result) => {
  // 登录成功
})
.catch((error) => {
  // 登录失败
});
/* 重定向登录 -移动端 */
const search_params = new URLSearchParams(window.location.search);
const xd_auth_payload = search_params.get("xd_auth_payload");
signInXDWithCode({
  env,
  xd_client_id,
  xd_auth_payload,
}).then((result) => {
  // 登录成功
}).catch((error) => {
  // 登录失败
});

API 说明​

概览​

api功能
signInWithPopup弹窗登录，使用 window.open 弹出登录界面。完成登录后返回相关凭证信息。注意：移动端上不会弹窗
signInXDWithCode重定向登录，移动端需调用。前置依赖 signInWithPopup，使用 url 上获取到的参数登录 xd 账号，换取 xd token

signInWithPopup​

打开登录按钮选择弹窗，在弹窗中完成登录后返回相关凭证信息。

由于安卓部分机型 postMessage 的兼容性问题，移动端内统一自动切换到重定向登录方式。 需要配合使用 signInXDWithCode 。使用方式详见示例

参数说明类型默认值
clients必填各个登录平台的配置，详见下方的详细说明Array无
xd_client_id必填xd client idString无
env必填当前环境，会影响后端重定向地址 和 前端 TapTap 登录页面地址
可选值有：
local（本地国内） , local_intl（本地海外）
dev（国内测试）,dev_intl（海外测试）
prod（国内生产）,prod_intl（海外生产）		String无
state可选指定应用用于维护授权请求和授权服务器响应之间的状态的任何字符串值
（如需了解详情，请访问 state）		String随机生成
window_features可选弹窗特性参数，详见位置和尺寸特征，参数将透传给弹窗属性Object{}
lang可选语言, 国内默认为中文，海外默认为英文String'zh_CN'
signIn_uri可选弹窗中的页面加载地址，默认为登录按钮选择页面，根据 env 参数匹配String
sdkversion可选支持的 sdk 版本。可选 '1' , '6'。默认使用 '6', 调用 sdk6.x 的接口String['1', '6']'6'
set_cookie可选将登录结果 JSON 化后存入 cookie，key 为 XD_AUTH
可以传入对象作为 cookie 设置，例如：
set_cookie: { expires: 180 }
全部参数详见：js-cookie		false
clients​
参数说明类型默认值
client_id必填
steam 和 phone 除外		应用的客户端 IDString无
platform必填登录平台
国内：taptap，phone(手机号登录)
海外：taptap，google，apple，steam		String无
state可选每个应用的 state, 默认使用外层 state 的值String外层 state
redirect_uri可选重定向地址
默认为相应环境下的后端地址，详见下方环境对应说明		String详见下方环境对应说明

signInXDWithCode​

用于重定向登录方式，使用 重定向 url 上获取到的参数登录 xd 账号，换取 xd token

参数说明类型默认值
env必填环境（同上）String
xd_client_id必填xd 客户端 id（同上）String
xd_auth_payload必填重定向后，网页上携带的 xd_auth_payload 参数String
set_cookie可选（同上）false

环境对应说明​

默认情况下，只需要提供 env 参数，sdk 会根据提供的环境加载对应的配置

如有特殊情况，可以提供可选参数覆盖掉，但 env 参数始终是必传的

对应的配置枚举如下：

env 枚举​

值备注
local本地国内环境，用于开发
local_intl本地海外环境，开发使用
dev国内开发/测试环境
dev_intl海外开发/测试环境
prod国内线上环境
prod_intl海外线上环境

clients 中的 redirect_uri 默认值枚举​

locallocal_intldevdev_intlprodprod_intl
googlehttps://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/google/authorization_code/https://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/google/authorization_code/https://test-xdsdk-6.xd.cn/api/login/v1/auth/google/authorization_code/https://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/google/authorization_code/https://xdsdk-6.xd.cn/api/login/v1/auth/google/authorization_code/https://xdsdk-intnl-6.xd.com/api/login/v1/auth/google/authorization_code/
applehttps://test-xdsdk-6.xd.cn/api/login/v1/auth/apple/access_tokenhttps://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/apple/access_tokenhttps://test-xdsdk-6.xd.cn/api/login/v1/auth/apple/access_tokenhttps://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/apple/access_tokenhttps://xdsdk-6.xd.cn/api/login/v1/auth/apple/access_tokenhttps://xdsdk-intnl-6.xd.com/api/login/v1/auth/apple/access_token
taptaphttps://test-xdsdk-6.xd.cn/api/login/v1/auth/taptap/access_tokenhttps://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/taptap/access_tokenhttps://test-xdsdk-6.xd.cn/api/login/v1/auth/taptap/access_tokenhttps://test-xdsdk-intnl-6.xd.com/api/login/v1/auth/taptap/access_tokenhttps://xdsdk-6.xd.cn/api/login/v1/auth/taptap/access_tokenhttps://xdsdk-intnl-6.xd.com/api/login/v1/auth/taptap/access_token

signIn_uri 默认值枚举​

环境地址
localhttp://localhost:3333/index.btns.html?
local_intlhttp://localhost:3333/index.btns.html?
devhttp://39.107.229.24:12008/
dev_intlhttps://login-xdsdk-test.xd-cf-2022.workers.dev/
prodhttps://login-xdsdk.xd.cn/
prod_intlhttps://login-xdsdk.xd.com/

taptap 登录页面​

环境地址
localhttps://accounts.xdrnd.com/authorize
local_intlhttps://accounts-io.xdrnd.com/authorize
devhttps://accounts.xdrnd.com/authorize
dev_intlhttps://accounts-io.xdrnd.com/authorize
prodhttps://accounts.taptap.com/authorize
prod_intlhttps://accounts.taptap.io/authorize

代码兼容性​

使用 @babel/preset-env 转义代码

.browserslistrc:

defaults
>0.3%
Chrome >= 50

具体浏览器支持程度，请查看