微信開放平臺提供了網站掃碼登錄的接口,用於獲取用戶基本信息(頭像,暱稱)方便網站快速接入微信登錄,快捷登錄。需要使用登錄接口,需要成爲微信開放平臺認證開發者(300元)纔可以獲得這個接口權限。
準備工作:
1、準備APPID、APPSECRET
2、準備接口地址
3、準備REDIRECT_URI
獲取code接口
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
獲取acess_token、openid接口
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
獲取用戶信息接口:
https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid
流程:
1、獲取CODE
2、獲取access_token、openid
3、獲取用戶信息
操作:
1、請求CODE
參數說明
通過接口地址,拼接以上參數進行訪問即可
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=這裏填寫redirect_uri&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
redirect_uri說明
這是點擊上面地址掃碼後跳轉的地址,跳轉的地址回給你帶上兩個參數,code和state參數。
state說明
用於保持請求和回調的狀態,授權請求後原樣帶回給第三方。該參數可用於防止csrf攻擊(跨站請求僞造攻擊),建議第三方帶上該參數,可設置爲簡單的隨機數加session進行校驗。
可以自己生成隨機字符串,爲了簡單學習,我這裏用時間戳進行MD5加密簡單生成
<?php
$data = time();
$state = MD5($data);
?>
例如你的redirect_uri是http://www.baidu.com/login.php,那麼掃碼後,跳轉的地址會是這樣的。
http://www.baidu.com/login.php?code=生成的code&state=生成的state
當然redirect_uri需要進行urlEncode編碼。
<?php
$redirect_uri = urlEncode("http://www.baidu.com/login.php");
?>
最終獲取CODE的訪問鏈接就是這樣的:
<?php
$appid = "填寫你的APPID";
$redirect_uri = UrlEncode("http://www.baidu.com/login.php");
$data = time();
$state = MD5($data);
//跳轉頁面
echo "<script>location.href=\"https://open.weixin.qq.com/connect/qrconnect?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_login&state=$state#wechat_redirect\";</script>";
?>
然後就跳轉到了一個掃碼的頁面了:
2、獲取access_token和openid
通過curl向接口發起請求即可
<?php
//從redirect_uri得到code
$code = $_GET["code"];
$appid = "填寫你的";
$secret = "填寫你的";
//獲取access_token和openid
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$secret&code=$code&grant_type=authorization_code";
function post($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$rst = curl_exec($ch);
curl_close($ch);
return $rst;
}
//發送請求
$result = post($url);
//返回接口的數據
$arr = json_decode($result,true);
//解析json,單獨把openid和access_token取出來待會用
$openid = $arr['openid'];
$token = $arr['access_token'];
?>
3、獲取用戶信息
<?php
//這裏是接着上面的代碼的
//獲取用戶信息需要openid 和 access_token
//獲取用戶信息
$getinfourl = "https://api.weixin.qq.com/sns/userinfo?access_token=$token&openid=$openid";
function getinfo($getinfourl) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $getinfourl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$rst = curl_exec($ch);
curl_close($ch);
return $rst;
}
//發送請求獲取用戶信息
$info_result = getinfo($getinfourl);
//返回接口的數據
// echo $info_result;
$info_arr = json_decode($info_result,true);
$nickname = $info_arr['nickname'];
$headimgurl = $info_arr['headimgurl'];
//顯示頭像和暱稱
echo "<img src=\"$headimgurl\"/>";
echo "<h2>$nickname<h2>";
?>
完整代碼
code.php
<?php
$appid = "填寫你的";
$redirect_uri = UrlEncode("http://www.baidu.com/login.php");
$data = time();
$state = MD5($data);
echo "<script>location.href=\"https://open.weixin.qq.com/connect/qrconnect?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_login&state=$state#wechat_redirect\";</script>";
?>
login.php
<!DOCTYPE html>
<html>
<head>
<title>登錄成功!</title>
<style type="text/css">
*{margin:0px;padding: 0px;}
#headimg{
width: 180px;
height: 180px;
margin:100px auto 10px;
border-radius: 100%;
}
#headimg img{
width: 180px;
height: 180px;
border-radius: 100%;
}
h2{
text-align: center;
}
p{
text-align: center;
font-size: 38px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
</body>
</html>