需求分析:用戶通過掃描我們網頁的二維碼,如果已經綁定我們平台的賬戶,即成功進入首頁,否則提示先綁定個人微信賬號。
1、綁定微信賬號:是通過關注微信公眾號實現綁定個人微信賬號。首先通過后台接口獲取到ticket值,生成二維碼。
$("#erweima-bind").attr('src','https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + data.ticket);
2、掃描二維碼登錄 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鑒權。
方法1、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
方法2、提供了第二種獲取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;}