第三方网站实现微信扫码登录

写在前面：最近有个需求需要实现使用微信扫码登录成功后，网站跳转到Home页，就不需要用户手动输入用户名和密码进行登录了，后面由于各种原因又不需要这个功能了，于是将这2天研究的微信网站扫码登录做个记录，方便以后开发该功能的时候再取用

微信开发平台申请网站应用：https://open.weixin.qq.com/

微信官方文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

一、申请网站

进入上方第一个链接，申请微信登录网站的权限，设置网站的信息，注意网站填写的地址和授权作用域

授权作用域决定了我们可以获取到微信提供的哪些权限

 

 申请之后，微信官方审核通过就可以在进行开发了

二、生成微信登录的二维码

我这里找的是网上提供的code和appid生成的二维码，实际开发过程中code是在用户授权登录后，会在跳转的链接上面的拼接code参数返回。

1）在index.html中引入微信登录的官方js文件

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2）定义展示二维码的容器

<div id="login_container"></div>
mounted(){
        this.init()
    },
    methods:{
        init(){
            var obj = new WxLogin({   // 实际开发过程中这些参数值可以都是后端以一个接口返回回来
                self_redirect:false,
       id:'login_container',
       appid:'wxe19e3e2415e89353',
       scope:'snsapi_login',     redirect_uri:encodeURIComponent('http://www.coolarch.net/Mingzhu/wechat/callBack'),
       state:'1211111',
       style:'black',
       href:'',
            });
        }
    }

3）生成的二维码如下

 

 4）扫描登录之后就可以通过code和appid去获取用户的access_token，然后通过access_token获取用户的信息，前提是

 微信官网测试网站登录链接，可以微信扫描测试下，登录后页面会跳转：https://open.weixin.qq.com/connect/qrconnect?appid=wx39c379788eb1286a&scope=snsapi_login&redirect_uri=http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

 

 步骤写的有些简洁，这里附上其他大佬总结的，会更加清晰：

https://blog.csdn.net/weixin_43737917/article/details/106002566?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

https://blog.csdn.net/u011042316/article/details/107924065

http://xuedingmiao.com/blog/wx_scan_login_demo.html