关于前端:微信PC端扫码登录流程记录

前言

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

具体步骤

1. 注册开发者账号​

2. 创立利用，失去 appid 和 AppSecret，并配置回调域名

2.1 创立利用

2.2 填写利用材料，提交审核，审核通过会失去开发须要用的 appid 和 AppSecret，这两个值，这个值会给到后盾，而后而后再通过接口给到咱们

2.3 利用创立胜利，配置回调域名

4. 开发者资质认证

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

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

https://natapp.cn/login

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

invalid host header 解决办法

• 报错信息

• 解决办法

  webpack 4：能够在 build 目录下的 webpack.dev.conf.js 文件，devServer 下增加 disableHostCheck: true，跳过查看

webpack5: 一样是在批改 vue 的 devService 配置中增加 allowedHosts: ‘all’ 即可

6. 受权流程阐明

官网的阐明

我集体的了解

流程图​

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=wxce0a56c2…

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

2. 以后页面显示二维码

3. 引入 js: http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

4. 在须要应用微信登录的中央实例以下 JS 对象，参数见上文介绍

var obj = new WxLogin({

self_redirect:true,

 id:"login_container",

 appid: "",  scope:"",

 redirect_uri: "",  

state: "",

style: "",

href: ""

 });

8. 总结

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

参考文档

微云 - 微信扫码流程​

官网文档​