最近很火的虚拟朋友圈H5是怎么做的?

时间:2015-10-27 16:59:49

最近层出不穷的出现各种虚拟iOS系统微信朋友圈界面的html5应用,相应的里面聊天信息和朋友圈头像等等都是自己的,这是怎么做到的呢?这篇文章带你了解下微信OAuth网页授权获取用户基本信息接口的基本应用。

最近很火的虚拟朋友圈H5是怎么做的?

最近很火的虚拟朋友圈H5是怎么做的?

最近很火的虚拟朋友圈H5是怎么做的?

这个功能主要是利用网页授权获取用户基本信息(OAuth2.0)实现的,通过这个接口可以拉取用户在微信上设置昵称、头像、城市等等的基本信息。

已经通过微信认证的朋友,可以在微信公众号管理后台-开发者中心-接口权限表,找到(网页授权获取用户基本信息):

已经通过微信认证的朋友,可以在微信公众号管理后台-开发者中心-接口权限表,找到(网页授权获取用户基本信息):

设置授权回调页面域名,如下图所示:

最近很火的虚拟朋友圈H5是怎么做的?


(注意填写g.huceo.com仅表示网页授权只在g.huceo.com域名下有效,并且不要加HTTP协议头)


设置完成后,即进入具体的开发流程:


第一步:在授权域名所在服务器的根目录下建立文件txapi.php,获取code

if (isset($_GET['code'])){
$code = $_GET["code"];
//echo $code ;die(0);
//小宇博客,huceo.com
}else{   
    echo "code_error";
}



第2步:用户同意授权,获取code


授权页面的URL构造:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=您在微信公众号-开发者中心的APPID&redirect_uri=回调URL,如上面的http://game.huceo.com/txapi.php&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

复制这个链接发到微信访问后即进入如下微信授权登录界面(因为我是用微信测试号开发的,所以显示测试号授权):

最近很火的虚拟朋友圈H5是怎么做的?


点击进入后,会在你的txapi.php上显示code。


第三步:通过code换取网页授权access_token

获取code后,请求以下链接获取access_token:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=您在微信公众号-开发者中心的APPID&secret=您在微信公众号-开发者中心的secret&code=上一步获取到的code&grant_type=authorization_code


在浏览器中(不需要发到微信了)访问这个链接,就会得到包含access_token、expires_in等等的json数据,结构如下图所示:

最近很火的虚拟朋友圈H5是怎么做的?

这其中还个有刷新access_token的问题,因为access_token的时效期只有7200秒,也就是两个小时,所以建议获取到access_token后缓存到memcache或mysql进行判断,现在的时间time() - 缓存中的expires_in有效期 > 7200秒即重新拉取access_token。

URL请求如下:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=您在微信公众号-开发者中心的APPID&grant_type=refresh_token&refresh_token=上一步中得到的refresh_token


4. 使用access_token获取用户信息


到这一步就基本完事了,构造URL请求(https):

https://api.weixin.qq.com/sns/userinfo?access_token=上一步中获取到的access_token&openid=用户的openid(微信推送给开发者服务器URL数据包中的FromUserName字段,如下图)&lang=zh_CN

最近很火的虚拟朋友圈H5是怎么做的?


访问构造的URL后得到用户信息:

最近很火的虚拟朋友圈H5是怎么做的?

OK,至少完成了微信网页授权拉取用户信息的操作,其实非常简单,前前后后三四十行代码即可搞定。

把以上步骤翻译成代码:


首先,在txapi.php中建立一个方便https请求的自定义函数(CURL扩展):

function https_request($url){
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, $url);
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	$data = curl_exec($curl);
	if (curl_errno($curl)) {return 'ERROR '.curl_error($curl);}
	curl_close($curl);
	return $data;
}

其次,建立一个拉取用户信息的自定义函数,也就是用到以上几个步骤中的接口:、

function WxUser($code){
	$token_json = https_request("上面第三步中的url");
	$token_array = json_decode($token_json, true);
	$token = $token_array['access_token'];
	$openid = $token_array['openid'];
	$wxuser_json = https_request("上面第四步中的url");
	$wxuser_array = json_decode($wxuser_json, true);
	return $wxuser_array;	
}


输出用户信息(昵称和头像):

$user = WxUser($code);
echo $user["nickname"]; //用户昵称 
echo $user["headimgurl"]; //用户头像

以上URL接口和说明基于微信开发者文档(OAuth2.0鉴权):

http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html


微信朋友圈小游戏应用分享平台:  http://down.huceo.com


服务器环境支持可使用新浪云SAE或阿里云等,其中新浪云新手被邀请注册有一定免费额度,一般足够使用。

 注册地址:http://t.cn/R40C6aD (首次注册可获得200免费云豆奖励,首次充值可获得600云豆奖励)


本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行

本文首发地址:http://www.huceo.com/post/418.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:21 | 浏览:6392

您对本文《最近很火的虚拟朋友圈H5是怎么做的?》有哪些看法?  ---  【期待您的评论】

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

站内文章搜索

转播分享好友

网盟广告赞助