抽离登陆模块

src/wx/load-js.ts

@@ -0,0 +1,21 @@
+// <script src="https://turing.captcha.qcloud.com/TCaptcha.js"></script>
+
+export const dynimicLoadTcapTcha = async (): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.id = 'tencent-captcha'
+    if (document.getElementById('tencent-captcha')) {
+      resolve(true)
+      return
+    }
+    script.src = 'https://turing.captcha.qcloud.com/TCaptcha.js'
+    script.onload = () => {
+      resolve(true)
+    }
+    script.onerror = (error) => {
+      reject(error)
+    }
+    document.body.appendChild(script)
+  })
+}

src/wx/tencent-captcha.ts

@@ -0,0 +1,70 @@
+// 定义回调函数
+export function callback(res) {
+  // 第一个参数传入回调结果，结果如下：
+  // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
+  // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
+  // CaptchaAppId       String    验证码应用ID。
+  // bizState    Any       自定义透传参数。
+  // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
+  console.log('callback:', res);
+  // res（用户主动关闭验证码）= {ret: 2, ticket: null}
+  // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
+  // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
+  // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
+  if (res.ret === 0) {
+    // 复制结果至剪切板
+    var str = '【randstr】->【' + res.randstr + '】      【ticket】->【' + res.ticket + '】';
+    var ipt = document.createElement('input');
+    ipt.value = str;
+    document.body.appendChild(ipt);
+    ipt.select();
+    document.body.removeChild(ipt);
+    alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。 2. 打开浏览器控制台，查看完整返回结果。');
+  }
+}
+export type TencentCaptcha = {
+  actionDuration?: number;
+  appid?: string;
+  bizState?: any;
+  randstr?: string;
+  ret: number;
+  sid?: string;
+  ticket?: string;
+  errorCode?: number;
+  errorMessage?: string;
+  verifyDuration?: number;
+};
+// 定义验证码触发事件
+export const checkCaptcha = (captchaAppId: string): Promise<TencentCaptcha> => {
+  return new Promise((resolve, reject) => {
+    const callback = (res: TencentCaptcha) => {
+      console.log('callback:', res);
+      if (res.ret === 0) {
+        resolve(res);
+      } else {
+        reject(res);
+      }
+    };
+    const appid = captchaAppId;
+    try {
+      // 生成一个验证码对象
+      // CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
+      //callback：定义的回调函数
+      // @ts-ignore
+      var captcha = new TencentCaptcha(appid, callback, {});
+      // 调用方法，显示验证码
+      captcha.show();
+    } catch (error) {
+      // 加载异常，调用验证码js加载错误处理函数
+      var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
+      // 生成容灾票据或自行做其它处理
+      callback({
+        ret: 0,
+        randstr: '@' + Math.random().toString(36).substring(2),
+        ticket: ticket,
+        errorCode: 1001,
+        errorMessage: 'jsload_error',
+      });
+    }
+  });
+};

src/wx/ws-login.ts

@@ -0,0 +1,44 @@
+type WxLoginConfig = {
+  redirect_uri?: string;
+  appid?: string;
+  scope?: string;
+  state?: string;
+  style?: string;
+};
+export const createLogin = async (config?: WxLoginConfig) => {
+  let redirect_uri = config?.redirect_uri;
+  const { appid } = config || {};
+  if (!redirect_uri) {
+    redirect_uri = new URL(window.location.href).origin + '/api/s1/wx/login';
+  }
+  if (!appid) {
+    console.error('appid is not cant be empty');
+    return;
+  }
+  // @ts-ignore
+  const obj = new WxLogin({
+    self_redirect: false,
+    id: 'weixinLogin', // 需要显示的容器id
+    appid: appid, // 微信开放平台appid wx*******
+    scope: 'snsapi_login', // 网页默认即可 snsapi_userinfo
+    redirect_uri: encodeURIComponent(redirect_uri), // 授权成功后回调的url
+    state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
+    stylelite: true, // 是否使用简洁模式
+  });
+  return obj;
+};
+export const wxId = 'weixinLogin';
+export function setWxerwma(config?: WxLoginConfig) {
+  const s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
+  s.id = 'weixinLogin-js';
+  if (document.getElementById('weixinLogin-js')) {
+    createLogin(config);
+    return;
+  }
+  const wxElement = document.body.appendChild(s);
+  wxElement.onload = function () {
+    createLogin(config);
+  };
+}