XD Auth SDK

心动登录 SDK

使用

引入

通过 npmjs 安装并引入

npm

import { signInWithPopup } from "@xd-js-sdk/auth";
const configs = {
  /* 参数列表见 API 说明 */
};

signInWithPopup(configs)
  .then((result) => {
    // 登录成功
  })
  .catch((error) => {
    // 登录失败
  });

CDN

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

API 说明

概览

| api | 功能 | | ---------------- | ----------------------------------------------------------------------------- | | signInWithPopup | 打开登录按钮选择弹窗，在弹窗中完成登录后返回相关凭证信息 | | signInXDWithCode | 用于重定向登录方式，使用 重定向 url 上获取到的参数登录 xd 账号，换取 xd token |

API

signInWithPopup

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

由于安卓部分机型的兼容性问题，安卓手机上会自动切换到重定向登录方式，需要配合使用 signInXDWithCode 。详见下方兼容性问题示例

| 参数 | | 说明 | 类型 | 默认值 | | --------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------- | | clients | 必填 | 各个登录平台的配置，详见下方的详细说明 | Array | 无 | | xd_client_id | 必填 | xd_client_id | String | 无 | | env | 必填 | 当前环境，会影响后端重定向地址和前端 TapTap 登录页面地址。生产环境通常使用 prod 或 prod_intl，其他环境请以 XD 提供的接入配置为准。 | String | 无 | | state | 可选 | 指定应用用于维护授权请求和授权服务器响应之间的状态的任何字符串值（如需了解详情，请访问 state） | String | 随机生成 | | window_features | 可选 | 弹窗特性参数，详见位置和尺寸特征，参数将透传给弹窗属性 | Object | {} | | lang | 可选 | 语言, 默认为中文 | String | 'zh_CN' | | signIn_uri | 可选 | 弹窗中的页面加载地址，默认为登录按钮选择页面，根据 env 参数匹配sdkversion 为 '4' 时通常不需要配置；如需覆盖，应使用 XD 提供或已配置白名单的登录页地址，不要配置为业务方自己的回调页 | String | | | sdkversion | 可选 | 支持的 sdk 版本。可选 '1' , '4' , '6'。默认使用 '6', 调用 sdk6.x 的接口；'4' 走 xdweb-php v3 authorizations 接口 | String['1', '4', '6'] | '6' | | set_cookie | 可选 | 将登录结果 JSON 化后存入 cookie，名为 XD_AUTH可以传入对象作为 cookie 设置，例如：set_cookie: { expires: 180 }全部参数详见：js-cookie | false | |

clients

| 参数 | | 说明 | 类型 | 默认值 | | ------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------ | ---------- | | client_id | 必填（steam 登录除外） | 应用的客户端 IDplatform 为 phone 时，client_id 值为 taptap client id（用于支持新用户注册拦截时跳转到 TapTap 登录）sdkversion 为 '4' 时四种平台均可为空，渠道授权由 xdweb-php 后端登录入口统一处理 | String | 无 | | platform | 必填 | 登录平台国内：'taptap' , 'phone'(手机号登录)海外：'taptap'，'google', 'apple', 'steam'sdkversion 为 '4' 支持：'taptap', 'qq', 'weixin', 'apple' | String | 无 | | state | 可选 | 每个应用的 state, 默认使用外层 state 的值 | String | 外层 state | | redirect_uri | 可选 | 重定向地址。默认使用对应环境的后端地址；如需覆盖，请使用 XD 提供或已配置白名单的地址。 | String | 由 env 决定 |

signInXDWithCode

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

| 参数 | | 说明 | 类型 | 默认值 | | --------------- | ---- | ------------------------------------------- | ------ | ------ | | env | 必填 | 环境，同 signInWithPopup | String | | | xd_client_id | 必填 | xd 客户端 id（同上） | String | | | xd_auth_payload | 必填 | 重定向后，网页上携带的 xd_auth_payload 参数 | String | | | sdkversion | 可选 | SDK 接口版本。新版本会从 xd_auth_payload 自动读取；历史 payload 未携带版本时默认 '6' | String | '6' | | set_cookie | 可选 | （同上） | | |

兼容性问题示例

由于移动端的兼容性问题，移动端浏览器上会自动切换到重定向登录方式，需要配合使用 signInXDWithCode

重定向登录方式登录之后，会返回原地址，并携带 xd_auth_payload 参数

接入网页需自行获取 url 参数，并调用 signInXDWithCode 方法实现登录

以下是接入示例

  const search_params = new URLSearchParams(window.location.search);
  const xd_auth_payload = search_params.get("xd_auth_payload");
  if (xd_auth_payload) {
    try {
      const res = await signInXDWithCode({
        env: "prod",
        xd_client_id: "your_xd_client_id",
        xd_auth_payload,
        set_cookie: { expires: 180 },
      });
      console.log("signInXDWithCode res", res);
      signIn_result.innerHTML = "登陆成功 <br>" + JSON.stringify(res);
    } catch (error) {
      console.error("ERROR:: signInXDWithCode", error);
      signIn_result.innerHTML = "登陆失败 <br>" + JSON.stringify(error);
    }
  }
};

代码兼容性

使用 @babel/preset-env 转义代码。.browserslistrc 如下

defaults
>0.3%
Chrome >= 50

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

参考

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn#enable-apis

https://developers.google.com/identity/gsi/web/guides/display-button#html

https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js

https://dev.twitch.tv/docs/authentication