微信網頁開發—網頁授權並顯示用戶信息

官方文檔

如果用戶在微信客戶端中訪問第三方網頁,公衆號可以通過微信網頁授權機制,來獲取用戶基本信息,進而實現業務邏輯。

關於網頁授權回調域名的說明

1、在微信公衆號請求用戶網頁授權之前,開發者需要先到公衆平臺官網中的“開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息”的配置選項中,修改授權回調域名。請注意,這裏填寫的是域名(是一個字符串),而不是URL,因此請勿加 http:// 等協議頭;

這裏會要求下載一個文件,放到web服務器上,記得放就行。

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鑑權

3、如果公衆號登錄授權給了第三方開發者來進行管理,則不必做任何設置,由第三方代替公衆號實現網頁授權即可

授權頁面demo

<html>
<!doctype html>
<html lang="ch">
<head>
    <title>用戶信息獲取</title>
    <meta charset="utf-8" />
	<meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1,  minimum-scale=1, maximum-scale=1"/>
	<style>
		.container {
			text-align: center;
			font-size: 24px;
		}
		.head {
			width: 150px;
			height: 150px;
		}
	</style>
	<script>				
		//獲取地址參數, 參數可以是中文也可以是英文
		function getUrlParam(key) {
			var url = window.location.search;
			var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
			var result = url.substr(1).match(reg);
			return result ? decodeURIComponent(result[2]) : null;
		}	
		var openid = getUrlParam("openid"); // 用戶openid
		var nickname = getUrlParam("nickname"); // 用戶暱稱
		var headimgurl = getUrlParam("headimgurl"); //用戶頭像
		
		var appID = "公衆號AppID"; // 公衆號AppID
		var redirectUri = "http://授權接口地址"; // 授權接口地址
		var state = "project1"; // 狀態標識
		if(openid == null || openid == undefined || openid == ''){ // 通過判斷地址參數是否有openid來確定是否要跳轉授權
			var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + redirectUri + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
			window.location.href = strUrl;
		}
	</script>
</head>

<body>
    <div class="container">
        <img src="" alt="head" id="head" />
        <br/><br/>
        <span>暱稱:<font id="nickname"></font></span>
        <br/><br/>
        <span>openid:<font id="openid"></font></span>
    </div>
	<script>
		document.getElementById("head").src = headimgurl;
		document.getElementById("nickname").innerHTML = nickname;
		document.getElementById("openid").innerHTML = openid;
	</script>
</body>
</html>

授權提取部分

<?php
$appId = '公衆號AppId'; // 公衆號AppId
$appSecret = '公衆號AppSecret'; // 公衆號AppSecret
$code = $_GET['code'];
$state = $_GET['state'];
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appId&secret=$appSecret&code={$code}&grant_type=authorization_code";
$a = file_get_contents($url);
switch($state){
	case 'project1':
		preg_match_all("/\"openid\":\"(.*?)\"/", $a, $matches, PREG_SET_ORDER);
		$openid = $matches[0][1];
		//返回的JSON數據包裏面有很都東西,按照需求加載
		$json=(array)json_decode($a);
		if(!isset($json['errcode'])){
			$openid = $json['openid'];
			$url ="https://api.weixin.qq.com/sns/userinfo?access_token=".$json['access_token']."&openid=".$json['openid'];
			$a = file_get_contents($url);
			$json = (array)json_decode($a);
			$nickname = $json['nickname'];
			$headimgurl = $json['headimgurl'];
			
			header("Location:http://你的地址/index.html?openid=$openid&nickname=$nickname&headimgurl=$headimgurl");
		}else{
		}
	break;
	//可以再定義事件
	default:
		echo "ERROR";
}
?>

正確返回的json包裏面包含的數據如下:

{   
  "openid":" OPENID",//用戶的唯一標識
  "nickname": NICKNAME,
  "sex":"1",  //用戶的性別,值爲1時是男性,值爲2時是女性,值爲0時是未知
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",//用戶頭像
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],//用戶特權信息,json 數組,如微信沃卡用戶爲(chinaunicom)
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"//只有在用戶將公衆號綁定到微信開放平臺帳號後,纔會出現該字段。
}

搗鼓一天,集百家之所長的結果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章