新年第一个工作日，淦一个扫码登录
0. 缘起
自研后台管理系统需要整个企业微信扫码登录。
官网文档
构造扫码登录链接 - 接口文档 - 企业微信开发者中心 (qq.com)
1. 第一种方法 直接通过iframe显示（会有CORB浏览器拦截的警告）
<iframe
:src="codeUrl"
height="500px"
:scrolling="false"
frameborder="0"
sandbox="allow-scripts allow-top-navigation allow-same-origin"
></iframe>
codeUrl实质上是拼接字符串
let { agentid, appid, state, redirect_uri } = res.data;
this.codeUrl = `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${appid}&agentid=${agentid}&redirect_uri=${redirect_uri}&state=${state}`;
图片能显示出来，但是因为iframe的某些限制控制台会报错，看着难受，就又整了第二种
控制台报错提示：
Uncaught DOMException: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes.
简单的说，就是没法在沙箱模式中设置domain，window.domain
参考——https://*.com/questions/34379012/unable-to-load-iframe-in-sandbox-environment
2. 第二种方法 通过企业微信自己内嵌的iframe显示（最终采用的这个方法）
官网下个wwLogin-1.2.5.js文档，放本地public文件下（这样可以规避文件加载顺序颠倒带来的一系列麻烦，如果非要在线加载，需要用到async await）
__重点！__初始化中的redirect_uri是需要后端配置与加密的，因为这里对方给了我一个经过encode的，我就没做处理。如果是公司内部网站，比如本地或者服务器，就需要进行内网穿透（这里用的花生壳，号里有内网穿透后的地址，老贵了。）
<div id="wx_reg" />
methods: {
async getWeWorkLoginInfo() {
let res = await getWeWorkLoginInfo();
if (res.code === 1) {
let { agentid, appid, state, redirect_uri } = res.data;
this.WeWorkInfo = res.data;
var wwLogin = new WwLogin({
id: "wx_reg",
appid: appid,
agentid: agentid,
redirect_uri: redirect_uri,
state: state,
});
}
},
}
3. encodeURI与encodeURIComponent
企业微信redirect_uri的地址是需要经过编码的！
encodeURI 和 encodeURIComponent 的区别
- encodeURI 通过将特定字符的每个实例的每个实例替换为一个、两个三或转义序列来对统一标识符进行编码。参数是一个完整的 URI 返回值是一个新字符串，表示提供的字符串编码为统一资源标识符 不会替换保留字符（; , / ? : @ & = + $）、非转义的字符（字母 数字 - _ . ! ~ * ' ( )、数字符号（#） 注意：encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的 URI，例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。
- encodeURIComponent 是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的 UTF-8 编码（只有由两个 Unicode 代理区字符组成的字符才用四个转义字符编码） 参数是 string： URI 的组成部分 返回值是一个新字符串，原字符串作为 URI 组成部分被编码后形成的字符串。 不转义的字符 A-Z a-z 0-9 - _ . ! ~ * ' ( )
作者：无语听梧桐
链接：https://juejin.cn/post/6844904159146147854
4. 关闭host检查
devServer下添加disableHostCheck: true(vue.config.js)
5. edge与chrome浏览器出现的CORS问题
Access to XMLHttpRequest at 'http://xxx:8080/sockjs-node/info?t=1644229310321' from origin 'http://xxx.zicp.vip:12178' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space
private.请求客户端不是安全上下文，资源位于多个专用地址空间“private”。
而火狐搜狗没这个问题
6. 心情小记
一开始弄这个的时候，不会！对，就是满脑子都是（这TM都是什么跟什么），好在这个也不是很匆忙，就一点一点慢慢看。读书百遍，其意自现，到后面也明白过来这个都是些啥跟啥，内网穿透也整了一下。心心念念地优化丑链接，后来才知道没法搞，那就这样吧。
附录
参考大佬的企业微信扫码登陆过程
Vue中企业微信扫码登录 - 简书 (jianshu.com)
博客园の大佬的第二种登录
Vue实现企业微信扫码登录 - 野狼谷 - 博客园 (cnblogs.com)
iframe
嵌入的iframe又不能访问了？还有这些你不知道的事 - 掘金 (juejin.cn)
关于http的小知识
CORB之谜
Cross-Origin Read Blocking (CORB) - 掘金 (juejin.cn)