前言

接入微信扫码登录整个流程的记录

具体步骤

1. 注册开发者账号 (opens new window)​

2.创建应用，得到appid和AppSecret，并配置回调域名

2.1 创建应用

2.2 填写应用资料，提交审核，审核通过会得到开发需要用的appid和AppSecret，这两个值， 这个值会给到后台，然后然后再通过接口给到我们

2.3 应用创建成功，配置回调域名

4. 开发者资质认证

5. 配置一个内网穿透，方便调试（如果你们公司的是内网域名，那也可以，微信只校验了域名的合法性）

我使用的natapp来做内网穿透，

https://natapp.cn/login (opens new window)

如果是使用vue-cli 构建的项目，开启穿透会报错 invalid host header

invalid host header 解决办法

• 报错信息

• 解决办法

webpack 4：可以在build目录下的webpack.dev.conf.js文件，devServer下添加disableHostCheck: true，跳过检查

webpack5:一样是在修改vue 的devService 配置中添加 allowedHosts: 'all' 即可

6.授权流程说明

官网的说明

我个人的理解

流程图 (opens new window)​

7. 核心代码

• 参数说明

重点说明

• href的连接必须是一个外网的可访问的地址
• 自定义二维码样式相关代码

.impowerBox .qrcode {width: 200px;}

.impowerBox .title {display: none;}

.impowerBox .info {width: 200px;}.

status_icon {display: none}

.impowerBox .status {text-align: center;}

常规套路，会新开一个页面，然后扫码授权的方式

https://open.weixin.qq.com/connect/qrconnect?appid=wxce0a56c2bb620e25&redirect_uri=https%3A%2F%2Fpassport.vip.com%2Fcallback%2Fweixin&response_type=code&scope=snsapi_login&state=e77986eb500341029f1e1aff094ee6c2#wechat_redirect (opens new window)

1.将上面的连接放到一个a标签中即可

2.当前页面显示二维码

3.引入js: http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js (opens new window)

4.在需要使用微信登录的地方实例以下JS对象，参数见上文介绍

var obj = new WxLogin({

self_redirect:true,

 id:"login_container",

 appid: "",  scope: "",

 redirect_uri: "",  

state: "",

style: "",

href: ""

 });

8. 总结

好好看文档，许多坑都是不好好看文档的下场 😄，与君共勉之

参考文档

微云-微信扫码流程 (opens new window)​

官方文档 (opens new window)​