微信掃碼登錄【第三方登錄】

今天做的微信掃碼登錄

微信掃描登錄分為2種 。

1、 跳轉到其他頁面生成二維碼

2、 內嵌式生成二維碼

 

因為項目中， 無法控制跳轉頁面關閉，而且為了好看【UI要求的】，做成了內嵌式掃描登錄， 碰到了幾個坑，特此記錄

微信開放文檔：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

步驟1：在頁面中先引入如下JS文件（支持https）：http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步驟2：在需要使用微信登錄的地方實例以下JS對象：
weixinLogin(){
let state = new Date().getTime() + Math.round(Math.random() * 10000000); //隨機生成6位數字，后面備用
 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", //后台提供
 scope: "snsapi_login", 
 redirect_uri: "", //后台提供
  state: "state",
 style: "black",
 href: "" //調節樣式
 });

}

3、 新建一個DIV，id為  login_container。

坑點： 這個DIV不能嵌入到其他DIV，不然報  'innerHTML of null'

 

4、然后可以掃描登錄。。 又一個坑出現了

 

在微信創建的html上面出現了返回的信息，但是無法攔截拿到。-_-||

5、后與后台商議，采用websocket或者輪詢去拿這個數據。但是坑爹的websocket竟然不給面子的報錯了，調試了半天，還是不行。 果斷換輪詢，由后台重新開接口， 去輪詢查找數據，上面的隨機六位數state作為標志， 后台每隔30分鍾刪除一次請求過的數據。

6、 后面就是根據具體業務去處理了。  我們是判斷是否有id，如果沒有，就跳到注冊頁面去注冊。又就登錄。

 

到此， 微信登錄完成。