react 接入企业微信登录组件

news2025/2/2 4:39:00

需求简述

把某web登录页替换成使用企业微信的扫码登录。

具体实现

自建应用：登录企微后台/应用管理，滑到最底部，创建应用并填写应用相关信息：

在这里插入图片描述
2. 创建成功之后，进入应用详情，配置可信域名以及授权登录：

配置可信域名：

注意：回调域名的配置规则必须要与企业主体关联的域名且不能包含协议头，不支持ip地址及短链域名。
域名验证：将校验文件下载下来，上传至配置的可信域名的服务器，通过nginx配置，浏览器能直接访问到该文件，则验证成功。
企业微信授权登录/web网页，设置授权回调域
搭建本地联调环境
由于调用企业微信的sdk，必须与自建应用配置的可信域名一致，否则调不通，处理如下：
修改本地host文件，将127.0.0.1映射到可信域名下（18x.xxx.cn）

代理到https：mkcert ---- 用go写的零配置专门用来本地环境 https 证书生成的工具
使用如下：

安装：   
brew install mkcert   /  npm install -g mkcert
为本地安装CA：   
 mkcert  -install     
 mkcert 18x.xxx.cn

成功安装CA会生成cert以及key两个文件
在这里插入图片描述
在webpack中配置https：

 devServer: {
    allowedHosts: 'all',
    https: {
      key: fs.readFileSync(
        'cn-key.pem文件的绝对路径'
      ),
      cert: fs.readFileSync(
        'cn.pem文件的绝对路径'
      )
    }
  },

登录面板参数配置：

ww.createWWLoginPanel({
      // 登录组件挂载元素
      el: "#ww_login",
      params: {
        login_type: "CorpApp",
        // 企业 CorpID
        appid: APP_ID,
        // 应用 AgentID
        agentid: AGENT_ID,
        // 登录成功后的跳转地址,注意：CUSTOM_CN 必须跟应用配置的授权登录回调域一致（域名+端口）
        redirect_uri: `${CUSTOM_CN}/api/sso/login`,
        // 该参数可用于防止 CSRF 攻击（跨站请求伪造攻击），可设置为简单随机数
        state: "WWLogin",
        // 登录成功跳转类型
        redirect_type: "callback",
        // 登录面板大小
        panel_size: "small",
        lang: "zh",
      },
      onLoginSuccess({ code }) {
        console.log(code, "9090");
        // redirect_type=callback 时，扫码成功后触发
        window.location.href = `${CUSTOM_CN}/api/sso/login?code=${code}`;
      },
      onLoginFail({ errCode, errMsg }) {
        console.log("error", errCode, errMsg);
        // 提示错误信息
        // 错误码参考：https://developer.work.weixin.qq.com/document/path/98152#%E9%99%84%E5%BD%95
      },
    });

执行命令yarn start，运行项目，将原本的127.0.0.1替换为可信域名https://18x.xxx.cn即可!
在这里插入图片描述