微信

【咸鱼教程】微信网页授权(获取用户头像、昵称等)

云博小周宇5 Mins Read

教程目录
一 流程图
二 微信测试号申请
三 新建Egret项目
四 微信网页授权流程
五 微信Web开发者工具
六 Demo下载


一、流程图
技术分享图片 

二、微信测试号申请
测试号申请参考之前教程：http://bbs.egret.com/thread-26429-1-1.html

申请微信测试号后，要测试网页授权，需要设置授权回调页面域名。

技术分享图片 

技术分享图片 

现在我们有了一个可以测试微信授权的账号。

三、新建Egret项目
新建一个egret项目，里面啥也没有，只有一个label显示将要获取的微信用户信息。
nickname需要显示中文，要用到decodeURI。
技术分享图片 

四、微信网页授权流程
微信官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

技术分享图片 

我们的demo，php文件主要有以下几个：
技术分享图片 
access_token.php   保存获取到access_token(这里我测试是一直重新获取access_token，所以没用到)
HttpUtils.php            https请求
index.php                 主页
wechat.php              网页授权获取用户信息

1. index.php  (获取code)
技术分享图片 
appid：测试微信号的appid
redirect_uri：回调页面。获取code后，会跳转到页面。
response_type：返回类型
scope：授权类型，静默授权或用户授权
state：重定向带上的State参数，直接填STATE
wechat_redirect：重定向必须带上

2. wechat.php   (code换access_token，拉取用户信息，重定向到egret)

[Actionscript3] 
纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
        
require_once
"HttpUtils.php"
;
         
        
//1.获取code
        
$httpUtils =
new
HttpUtils();
        
$code = $_GET[
"code"
];
 
        
if
($code !=
null
){
                
echo(
"code is have"
);
 
                
//2. 通过code换取网页授权access_token
                
$url =
"https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx4a14bf95e973b059&secret=af99ce68694f39e2712e7cf7c22fe224&code=$code&grant_type=authorization_code"
;
                
$res = json_decode($httpUtils->httpGet($url));
                
$access_token = $res->access_token;
                
$openid = $res->openid;
                
$expires_in = $res->expires_in;
                
$refresh_token = $res->refresh_token;
                
$scope = $res->scope;
         
                
//3. 拉取用户信息(需scope为 snsapi_userinfo)       
                
$url =
"https://api.weixin.qq.com/sns/userinfo?access_token=$access_token&openid=$openid&lang=zh_CN"
;
                
$userInfoResult = json_decode($httpUtils->httpGet($url));
                
echo(
"</br>"
);
                
echo(
"openid:"
.$userInfoResult->openid.
"</br>"
);
                
echo(
"nickname:"
.$userInfoResult->nickname.
"</br>"
);
                
echo(
"sex:"
.$userInfoResult->sex.
"</br>"
);
                
echo(
"province:"
.$userInfoResult->province.
"</br>"
);
                
echo(
"city:"
.$userInfoResult->city.
"</br>"
);
                
echo(
"country:"
.$userInfoResult->country.
"</br>"
);
                
echo(
"headimgurl:"
.$userInfoResult->headimgurl.
"</br>"
);
                
echo(
"privilege:"
.$userInfoResult->privilege.
"</br>"
);
                
echo(
"unionid:"
.$userInfoResult->unionid.
"</br>"
);
 
                
//4.重定向
                
$openid = $userInfoResult->openid;
                
$nickname = $userInfoResult->nickname;
                
header(
‘Location:[url]http://120.24.188.118/Example/weixin_php_scope/egret/index.html‘
.[/url]
"?openid="
.$openid.
"&nickname="
.$nickname);
                 
 
        
}
else
{
                
echo(
"code is null"
);
        
}
?>

拉取用户信息成功
技术分享图片 

 

 

五、微信Web开发者工具
在pc端测试时，可以用这个工具，具体用法不再赘述。
官方下载地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

 

六、Demo下载(含php和egret)

https://coding.net/u/gamedaybyday/p/EgretExample/git/tree/master/WxShouQuanDemo