标签：redirect 扫码 新年 登录 微信 uri state appid
新年第一个工作日，淦一个扫码登录
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://stackoverflow.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)
标签：redirect,扫码,新年,登录,微信,uri,state,appid 来源： https://www.cnblogs.com/lepanyou/p/15871401.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。