本地开发企业微信手机扫码登录集成避坑指南

准备阶段

• 本地开发需要有一个域名；
• 一个互联网上的外网服务器，有独立互联网IP；
• frp 软件实现本地开发环境联调；

基本关系如下：

图片.png

企业微信配置

开发测试可以用个人身份注册企业微信，注册好后，新建应用。注意：应用名称、图标会在手机扫码界面显示。注册过程中几个信息保留好，包括 企业ID、应用的 AgentId 和 Secret ，后面开发阶段会使用。

为新建的应用配置权限，否则扫码时，手机端会显示没有权限。可以拉两个微信好友加入到企业帮忙测试。

图片.png

设置“企业微信授权登录”，配置授权回调域。本地开发如果使用的不是标准80、443端口，需要同时配置端口，否则后面生成二维码一直提示 “redirect_uri 与配置的授权完成回调域名不一致”。注意文档中，可以是域名+端口。

图片.png

开发集成

使用内嵌登录二维码方式集成，具体可以看官方文档（url 就不提供了，否则文章无法发布）。

页面中引入 wwLogin-1.2.4.js ，本地开发时 使用 http 引入 js 资源。部署生产环境时，由于生产环境是 https 协议，引入的 js 需要切换为 https 协议，否则会请求不到 资源。

var wwLogin = new WwLogin({
  "id": "显示二维码的DOM id",
  "appid": "企业ID",
  "agentid": "应用的 AgentId",
  "redirect_uri": "重定向地址，需要进行UrlEncode”,
  "state": "随机uuid",
  "href": "外挂样式文件",
  "lang": "zh",
});

对于生成的二维码，可以调整样式。外挂样式文件通过 href 传入，由于本地域名为 http 协议的所以一直未生效，可以直接把样式 base64 编码后传入 href。

"href": "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZSAgIWltcG9ydGFudH0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30KCg==",