世游通行证 SSO 登录组件

本 SDK 支持在浏览器端和微信小程序端使用，以完成世游通行证的登录。

login() 登录原理

• SDK 以全屏 iframe 方式打开世游通行证 login 页面
• 用户完成登录后，login 页面通过 postMessage 方式将 id token 发送给 SDK
• 调用页面将 id token 发送给后端 api 进行验证
• 验证通过后返回一个授权的信息（jwt or session Cookie）来进行后续 api 调用

注意

• id token 仅仅用于验证，时效性很短，不能用于实际业务 api 通讯；
• 登录调用将会受到域名白名单限制，本地调试请修改 host 使用，否则将会被拒绝；
• 后端 api 验证逻辑另有 SDK 可用；

mpLogin() 登录原理

首次登录

• 通过手机号快速验证组件向用户申请手机号，获得动态令牌 code
• 将 code 发送给通行证进行用户资料获取
• 通行证将 user id / token / id token 返回给小程序
• 小程序保存 user id / token 到本地，并将 id token 发送给自己后端 api 进行验证
• 验证通过后返回一个授权的信息来进行后续 api 调用

再次登录

• 通过缓存在本地的 user id / token 调用通行证进行登录验证
• 如果验证失败（比如超时或用户设备记录删除）则进入首次登录流程
• 验证通过后返回 id token 给小程序
• 小程序将 id token 发送给自己后端 api 进行验证
• 验证通过后返回一个授权的信息来进行后续 api 调用

发布

• 发布到 npmjs.com:
• 如果设置了 npm 镜像, 需要恢复: npm config set registry https://registry.npmjs.org/
• 执行: pnpm -F login pub

开发说明

使用 login 函数进行拉起登录界面, 输入参数如下, 输出参数为 Promise<string | false | Error> 注意对输出进行判断:

export function login(
  { endpoint: Endpoint,
    timeout: number = 6000,
    backgroundOpacity: number = 0.7,
    isAnonymous: boolean = false
  }
): Promise<string | false | Error>

注意: 尽量使用 preload 方法提前加载登录页面, 可以大大加快 login 的时候显示页面的速度(原理是提前加载了登录页,获取了网页资源,当真正 login 的时候, 直接显示 preload 的网页资源)

export function preload(endpoint: Endpoint, isAnonymous: boolean = false)

// 代码示例:
import { preload } from "@seayoo-account/login";
preload("account.seayoo.com", false)

代码示例

非匿名登录

// 代码示例:
import { login } from "@seayoo-account/login";

const idToken: Ref<string> = ref("");

async function doLoginProd() {
  const data = (await login({ endpoint: "account.seayoo.com"})) || "";
  if (typeof data === "string") {
    idToken.value = data;
  } else {
    console.error("data :>> ", data);
  }
}

匿名登录

import { login } from "@seayoo-account/login";

const idToken: Ref<string> = ref("");

async function doLoginProdAnonymouse() {
  const data = (await login({ endpoint: "account.seayoo.com", isAnonymous: true })) || "";
  if (typeof data === "string") {
    idToken.value = data;
  } else {
    console.error("data :>> ", data);
  }
}