微信 二维码 登陆
為了讓用戶登錄網(wǎng)站的門檻更低，微信掃一掃登錄變得越來越廣泛，所以最近加緊趕制的項(xiàng)目中有用到這個(gè)功能，此篇文字的出發(fā)點(diǎn)基于微信開放平臺(tái)已經(jīng)配置好域名（80端口）并且認(rèn)證成功獲得app_id和secret并有權(quán)限調(diào)用微信的接口。好了，就先談一談微信掃碼登錄的整個(gè)流程吧。
第一步，我們必須得把二維碼放在頁面上顯示。首先普及一下二維碼是有失效時(shí)間以及失效狀態(tài)的，一旦你掃過一次二維碼或者在某段時(shí)間內(nèi)沒有掃描頁面上的二維碼，該二維碼就失效了。OK，微信官網(wǎng)給我們提供兩種方式來顯示二維碼：1.后臺(tái)發(fā)請求返回一個(gè)新的頁面；2.前端js實(shí)例化二維碼內(nèi)嵌在自己的頁面上，顯然第一種比較適合懶的人(因?yàn)槲⑿胖苯臃祷匾粋€(gè)打包好的頁面啊有木有，都不用各種css調(diào)樣式了)，不過在項(xiàng)目中兩種都在用，所以就都說明一下。
1.后臺(tái)發(fā)請求獲取微信返回的掃碼頁面
$redirect_uri="http://你的微信開放平臺(tái)綁定域名下處理掃碼事件的方法";
$redirect_uri=urlencode($redirect_uri);//該回調(diào)需要url編碼
$appID="你的appid";
$scope="snsapi_login";//寫死，微信暫時(shí)只支持這個(gè)值
//準(zhǔn)備向微信發(fā)請求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri
."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
//請求返回的結(jié)果(實(shí)際上是個(gè)html的字符串)
$result = file_get_contents($url);
//替換圖片的src才能顯示二維碼
$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
return $result; //返回頁面
這樣子就會(huì)返回一個(gè)這樣的頁面，掃描后調(diào)用$redirect_uri，
2.內(nèi)嵌JS顯示：
這里就是通過js端實(shí)例化一個(gè)對象即可，首先在<head>標(biāo)簽內(nèi)添加如下js文件，
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
其次在html中定義一個(gè)div包含二維碼，
<div id="login_container"></div>
最后在$(document).ready()內(nèi)進(jìn)行實(shí)例化：
$(document).ready(function()
{
var obj = new WxLogin
({
id:"login_container",//div的id
appid: "你的appid",
scope: "snsapi_login",//寫死
redirect_uri:encodeURI("你的處理掃碼事件的方法") ,
state: "",
style: "black",//二維碼黑白風(fēng)格
href: "https://某個(gè)域名下的css文件"
});
});
注意其中href里指向的css文件必須放在https協(xié)議下才能引用的到，不然頁面上就是默認(rèn)樣式（顯示上是一個(gè)比較大的二維碼，你無法調(diào)節(jié)二維碼的大小，位置，太痛苦了）。最后部分頁面大概長成這樣，這里的二維碼大概只有140px：
好了，二維碼出現(xiàn)在頁面上了，接下來我們就要大概的講講掃碼的邏輯了,整個(gè)流程大概分為5步：
走完這五步你就拿到掃碼用戶的所有信息了，之后再寫上自己需要的的代碼邏輯即可(如重定向或者登陸)，在代碼里的表現(xiàn)形式如下：
//回調(diào)
public function codeinfo()
{
$code = $_GET["code"];
$appid = "你的appid";
$secret = "你的secret";
if (!empty($code)) //有code
{
//通過code獲得 access_token + openid
$url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid
. "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code";
$jsonResult = file_get_contents($url);
$resultArray = json_decode($jsonResult, true);
$access_token = $resultArray["access_token"];
$openid = $resultArray["openid"];
//通過access_token + openid 獲得用戶所有信息,結(jié)果全部存儲(chǔ)在$infoArray里,后面再寫自己的代碼邏輯
$infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid;
$infoResult = file_get_contents($infoUrl);
$infoArray = json_decode($infoResult, true);
} }
總結(jié)
- 上一篇： 出生八字算命婚用命理保婚
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？