公益统一登录 sdk

更新日志

v0.8.1 2023-01-13

1. 修复mac下chrome浏览器无痕模式偶现 QQ扫码tab 不显示 问题
2. 页面错误提示优化： 区分接口错误和页面逻辑错误
3. sdk 版本号为 0.8，当前支持版本 dev / test / pre / prod

v0.8 2022-12-15

1. 增加单机构是否自动跳转参数 autoRedirect 。详见 使用说明 - 使用 sdk - 登录 GYLogin
2. sdk 版本号更新为 0.8，当前支持版本 dev / test / pre / prod

v0.7 2022-12-12

1. 修改初始化 GYLInit() 传参, 增加 onRefresh, 处理刷新页面的逻辑。详见 使用说明 - 使用 sdk - 初始化
2. sdk 版本号更新为 0.7，当前仅支持测试环境和预发布环境，文件名为 gylogin.test.0.7.umd.js / gylogin.pre.0.7.umd.js

v0.6 2022-12-08

1. 修改初始化 GYLInit() 传参, 增加 onReLogin, 处理重新登录的逻辑。详见 使用说明 - 使用 sdk - 初始化
2. sdk 版本号更新为 0.6，当前仅支持测试环境和预发布环境，文件名为 gylogin.test.0.6.umd.js / gylogin.pre.0.6.umd.js

v0.5 2022-12-07

1. 增加全局初始化 GYLInit(), 用于监听机构切换，发送通知。详见 使用说明 - 使用 sdk - 初始化
2. sdk 版本号更新为 0.5，当前仅支持测试环境，文件名为 gylogin.test.0.5.es.js / gylogin.test.0.5.umd.js

v0.4 vPre.0.4 2022-11-26

1. GYLogin 增加 onSuccess 和 onError，处理登录成功和失败的状态，详见 使用说明 - 使用 sdk - 登录 GYLogin
2. sdk 开发版本号更新为 0.4，预发布版本号更新为 pre.0.4

v0.3 2022-11-24

1. umd 格式修改全局变量名为 GYL，详见 使用说明 - 引入 sdk
2. sdk 版本号更新为 0.3

vPre 2022-11-24

1. 增加预发布环境版本，sdk 版本号为 gylogin.pre.es.js / gylogin.pre.umd.js
2. 引入方式同 v0.2

v0.2 2022-11-23

1. 增加 GYLogout，清除用户登录态
2. 引入 sdk 方式变更，详见 使用说明 - 引入 sdk
3. sdk 版本号更新为 0.2

v0.1 2022-11-18

1. 修复登录后回调页面配置问题
2. redirect_url 参数名改为 redirect_uri
3. 为方便调试，sdk 文件名增加版本号 0.1

登录 sdk 主要功能

1. 提供微信和 QQ 扫码登录，登录成功后如果不需要展示结构列表，直接跳转至回调页面

1. 如果需要展示结构列表，用户选择机构后，跳转至回调页面；

使用说明

1. 引入 sdk

登录 sdk 提供es, umd两种引入方式（注意文件名不同）：

1. es 模块引入

import {
  GYLInit,
  GYLogin,
  GYLogout,
} from "https://scdn.gongyi.qq.com/login/sdk/gylogin.0.4.es.js";
// 预发布版本: "https://scdn.gongyi.qq.com/login/sdk/gylogin.pre.0.4.es.js";

2. umd 引入

<script src="https://scdn.gongyi.qq.com/login/sdk/gylogin.0.4.umd.js"></script>
<!-- 预发布版本: https://scdn.gongyi.qq.com/login/sdk/gylogin.pre.0.4.umd.js" -->

<script>
  const { GYLInit, GYLogin, GYLogout } = GYL;
</script>

2. 使用 sdk

1. 初始化 GYLInit

初始化 GYLInit，用于监听机构切换，向同一浏览器其他 tab 标签页发送通知，提醒用户状态变更，刷新页面或者重新登录. 该方法需要在项目初始化时调用，确保每个页面都注册了监听事件 GYBroadcast

GYLInit({
  onRefresh: () => {
    // 点击 刷新页面 执行
    // console.log("刷新页面");
  },
  onReLogin: () => {
    // 点击 重新登录 执行
    // console.log("重新登录");
    // GYLogout().then(() => {
    //   window.location.href = "//org.gongyi.qq.com";
    // });
  },
});

2. 登录 GYLogin

GYLogin({
  id: "app",
  redirect_uri: "//xxxx.gongyi.qq.com/index.html",
  autoRedirect: true
  onSuccess: () => {
    // 登录成功
    // console.log('success')
  },
  onError: () => {
    // 登录态失效 / 机构列表报错 / 选择机构报错
    // console.log('error')
  },
});

请求参数：

3. 登出 GYLogout

// 退出登录
GYLogout().then(() => {
  // 登出之后的操作，如 跳转至登录页：
  // window.location.href = "//xxxx.gongyi.qq.com/login";
});

3. 引入样式文件、指定挂载 dom

<!-- 登录模块挂载的位置 （必须）-->
<div id="app"></div>

<!-- 引入sdk的样式文件 （必须）-->
<link rel="stylesheet" href="https://scdn.gongyi.qq.com/login/sdk/style.css" />

<!-- 样式代码示例 -->
<style>
  #app {
    width: 32rem;
    height: auto;
    border-radius: 1.5px;
    opacity: 1;
    border: 0.25px solid rgba(220, 220, 220, 1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2.5px 2.5px 0 rgba(0, 0, 0, 0.1), 0 4px 5px 0 rgba(0, 0, 0, 0.06),
      0 1.5px 7px 0 rgba(0, 0, 0, 0.05);
  }
</style>

sdk 登录逻辑说明

1. 新用户首次登录

1. 显示 微信/QQ 二维码， 扫码成功后，会直接跳转至传参的 redirect_uri， 机构需要判断是手机号核验 or 身份三要素核验
2. 核验成功后，可再次调用 GYLogin，会自动判断是否需要展示机构列表
3. 如不需要选择机构，则直接跳转至传参的 redirect_uri； 如需要选择机构，则展示机构列表，用户选择后跳转至传参的 redirect_uri

2. 已绑定机构用户首次登录

1. 显示 微信/QQ 二维码， 扫码成功后，会自动判断是否需要展示机构列表
2. 如不需要选择机构，则直接跳转至传参的 redirect_uri； 如需要选择机构，则展示机构列表，用户选择后跳转至传参的 redirect_uri

3. 已绑定机构用户登录态有效，进入系统

1. 不显示微信/QQ 二维码， 直接判断是否需要展示机构列表

注意事项

1. 调用登录 sdk 的域名必须为.qq.com 域名下，否则 qq 扫码登录会有跨域问题；因此本地开发时建议配置代理为 xxx.gongyi.qq.com
2. 挂载 dom 的
   外层样式需要业务方自己处理，sdk 仅包含内部样式
3. 如果有其他问题，请联系 @christyma