微信掃碼登錄的實現方式

首先要明確微信掃碼登錄的流程，掃碼是掃碼登錄。就是在登錄界面顯示一個二維碼，用戶使用手機微信掃一掃功能掃描這個二維碼，掃描后手機上有提示登錄哪個應用，點擊確定后網頁就處於登錄狀態了

　　如何實現微信掃碼登錄呢，首先需要注冊微信開放平台，注意是微信開放平台不是公眾平台，公眾平台是做公眾號應用的，開放平台才可以實現掃碼登錄（當然如果用戶公眾平台並且用戶已經關注了公眾號也可以從另一個角度實現掃碼登錄，但是這種方式用戶體驗上會差一些，前提是先需要關注公眾號）。

　　注冊開放平台通過https://open.weixin.qq.com/進行注冊，並且通過認證，認證需要企業身份哦，這個有點難，不過如果你是給公司開發這項功能，公司會幫你認證的，如果公司也不清楚那就需要你和公司做好溝通啦。認證通過后先申請網頁應用，這樣就會獲取到AppID和AppSecret。有了這兩個東西就可以進行開發了。

　　第一步是顯示二維碼，這各有兩種方式，一種是打開一個新頁面顯示二維碼可以通過構建類似https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect的地址，各項參數說明如下：

參數說明

參數	是否必須	說明
appid	是	應用唯一標識
redirect_uri	是	請使用urlEncode對鏈接進行處理
response_type	是	填code
scope	是	應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可
state	否	用於保持請求和回調的狀態，授權請求后原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數，可設置為簡單的隨機數加session進行校驗

第二種方式是在當前頁面嵌入二維碼，這是首先要引入一個js文件，然后使用js代碼調用，如下：

 

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
var obj = new WxLogin({
                              id:"顯示二維碼的容器id", 
                              appid: "申請到的appid", 
                              scope: "snsapi_login", 
                              redirect_uri: "這里是回調地址",
                              state: "",
                              style: "black",
                              href: ""
                            });

 

這樣頁面打開后也會加載出二維碼

用戶掃碼允許授權后，將會重定向到redirect_uri的網址上，並且帶上code和state參數,這是要通過code獲取access_token，url格式https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

參數說明

參數	是否必須	說明
appid	是	應用唯一標識，在微信開放平台提交應用審核通過后獲得
secret	是	應用密鑰AppSecret，在微信開放平台提交應用審核通過后獲得
code	是	填寫第一步獲取的code參數
grant_type	是	填authorization_code

正確的話會返回access_token，最后通過access_token可以獲取到用戶的某些信息，這樣就可以記錄后實現掃碼登錄了。