PC端網站微信掃碼登陸

需求分析：用戶經過掃描咱們網頁的二維碼，若是已經綁定咱們平臺的帳戶，即成功進入首頁，不然提示先綁定我的微信帳號。

一、綁定微信帳號：是經過關注微信公衆號實現綁定我的微信帳號。首先經過後臺接口獲取到ticket值，生成二維碼。

$("#erweima-bind").attr('src','https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + data.ticket);

二、掃描二維碼登陸 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

準備工做

網站應用微信登陸是基於OAuth2.0協議標準構建的微信OAuth2.0受權登陸系統。 在進行微信OAuth2.在進行微信OAuth2.0受權登陸接入以前，在微信開放平臺註冊開發者賬號，並擁有一個已審覈經過的網站應用，並得到相應的AppID和AppSecret，申請微信登陸且經過審覈後，可開始接入流程。

在https://open.weixin.qq.com/ 這裏申請開發的帳號

在已經登陸的界面中選擇「管理中心」——》網站應用——》建立網站應用

受權流程說明

微信OAuth2.0受權登陸讓微信用戶使用微信身份安全登陸第三方應用或網站，在微信用戶受權登陸已接入微信OAuth2.0的第三方應用後，第三方能夠獲取到用戶的接口調用憑證（access_token），經過access_token能夠進行微信開放平臺受權關係接口調用，從而可實現獲取微信用戶基本開放信息和幫助用戶實現基礎開放功能等。 微信OAuth2.0受權登陸目前支持authorization_code模式，適用於擁有server端的應用受權。該模式總體流程爲：

1. 第三方發起微信受權登陸請求，微信用戶容許受權第三方應用後，微信會拉起應用或重定向到第三方網站，而且帶上受權臨時票據code參數；
2. 經過code參數加上AppID和AppSecret等，經過API換取access_token；
3. 經過access_token進行接口調用，獲取用戶基本數據資源或幫助用戶實現基本操做。

獲取access_token時序圖：

配置了回調的域名注意：

1、這裏填寫的是域名（是一個字符串），而不是URL，所以請勿加http://等協議頭；
2、受權回調域名配置規範爲全域名，好比須要網頁受權的域名爲：www.qq.com，配置之後此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 均可以進行OAuth2.0鑑權。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com沒法進行OAuth2.0鑑權。

方法一、PC端打開如下連接：

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https://i.yhd.com/login/login.html&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

 

方法二、提供了第二種獲取code的方式，支持網站將微信登陸二維碼內嵌到本身頁面中

步驟1：在頁面中先引入以下JS文件（支持https），步驟2：在須要使用微信登陸的地方實例如下JS對象

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
    var obj = new WxLogin({
            id : "login_container",// 第三方頁面顯示二維碼的容器id
            appid : "",// 應用惟一標識，在微信開放平臺提交應用審覈經過後得到
            scope : "snsapi_login",// snsapi_login
            redirect_uri : "https://i.yhd.com/login/login.html",
            //redirect_uri : callback,
            state : "",
            style : "",
            href : "https://i.yhd.com/weixin.css"
        });
</script>

 網站內嵌二維碼微信登陸JS代碼中href字段做用？ 答：若是第三方以爲微信團隊提供的默認樣式與本身的頁面樣式不匹配，能夠本身提供樣式文件來覆蓋默認樣式。舉個例子，如第三方以爲默認二維碼過大，能夠提供相關css樣式文件，並把連接地址填入href字段

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}