目錄
1. 前提
- 基於微信開放平台已經配置好域名（80端口）並且認證成功獲得app_id和secret並有權限調用微信的接口。
2. 簡介
1. 二維碼的失效時間和失效狀態
- 一旦掃過一次二維碼或者在某段時間內沒有掃描頁面上的二維碼，該二維碼就失效了。
2. 微信官網提供兩種方式來顯示二維碼
- 后台發請求返回一個新的頁面
- 前端js實例化二維碼內嵌在自己的頁面上
3. 實現代碼
1. 后台發請求獲取微信返回的掃碼頁面
$redirect_uri="http://你的微信開放平台綁定域名下處理掃碼事件的方法";
$redirect_uri=urlencode($redirect_uri);//該回調需要url編碼
$appID="你的appid";
$scope="snsapi_login";//寫死，微信暫時只支持這個值
//准備向微信發請求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri
."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
//請求返回的結果(實際上是個html的字符串)
$result = file_get_contents($url);
//替換圖片的src才能顯示二維碼
$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
return $result; //返回頁面
2. 內嵌JS顯示
1. js實例化對象
# 通過js端實例化一個對象即可，首先在<head>標簽內添加如下js文件
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
2. html中定義一個div包含二維碼
<div id="login_container"></div>
3. 在$(document).ready()內進行實例化
# 注：其中href里指向的css文件必須放在https協議下才能引用的到，不然頁面上就是默認樣式。
$(document).ready(function()
{
var obj = new WxLogin
({
id:"login_container",//div的id
appid: "你的appid",
scope: "snsapi_login",//寫死
redirect_uri:encodeURI("你的處理掃碼事件的方法") ,
state: "",
style: "black",//二維碼黑白風格
href: "https://某個域名下的css文件"
});
});
4. 微信掃碼登錄流程圖
5. 回調處理
//回調
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 獲得用戶所有信息,結果全部存儲在$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);
}
}