第三方網站實現微信掃碼登錄

寫在前面：最近有個需求需要實現使用微信掃碼登錄成功后，網站跳轉到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