微信网页开发—网页授权并显示用户信息

官方文档

如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

关于网页授权回调域名的说明

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"//只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。
}

捣鼓一天,集百家之所长的结果。

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