作者：陈惠，叩丁狼教育高级讲师。原创文章，转载请注明出处。
在学习网页授权之前，我们先来了解下这次的需求：
我们的应用中有一个用来显示个人信息的页面，当微信用户在微信app中打开这个页面，希望可以获取到该用户的头像，昵称等信息，并显示到该页面中。如下图所示：
图片.png
如果用户在微信客户端中访问第三方网页(我们的应用)，可以通过微信网页授权机制，来获取用户的基本信息（包括昵称、性别、城市、国家等，注意：手机，QQ，邮箱通过微信网页授权是无法获取的）。利用这些用户信息，我们可以实现一些业务逻辑，比如来源统计、帐号绑定、用户身份鉴权等功能。
OAuth2.0
微信的网页授权是基于OAuth2.0协议的，百科上对OAuth的介绍是：OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如头像，个人信息等），而无需将用户名和密码提供给第三方应用；而OAuth2.0则是OAuth协议的升级版，但并不兼容老版本。
实际上，现在很多企业都使用到OAuth2.0，比如支付宝，微信，QQ授权登录等等。
授权流程
微信开发文档中引导我们操作的流程是：
图片.png
更详细的流程如下，主要是利用一个code授权码来进行授权：
图片.png
AppID，AppSecret，OpenID，Access_Token这些在之前的文章都已经介绍过了，有需要的参考开发教程(一)，开发教程(二)，开发教程(四)文章。
特别注意：
1.本文中用到的Access_Token是专属于网页授权而使用的Access_Token凭据，与之前其他接口用的Access_Token凭据是不同的，所以我们要通过另外一个接口来获取网页授权使用的Access_Token。
2.网页授权分两种scope授权作用域
(1)scope为snsapi_base的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的，也就是说用户完全感觉不到你在获取他的信息，但只能获取openid。
(2)scope为snsapi_userinfo的网页授权，是用来获取用户的基本信息的(包括openid，头像，昵称，城市，性别等)，这种授权需要用户手动同意，无须关注公众号，就可在用户同意后获取该用户的基本信息。
实现步骤
注意：服务号或者测试号才有网页授权的功能权限
一：安装微信web开发者工具，待会用于调试页面
下载地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
二：配置授权域名，设置该域名拥有网页授权的权限(如果不设置，就没有权限使用网页授权)。
在接口权限列表找到网页授权，点修改按钮：
图片.png
把域名填入到输入框中：
图片.png
确认保存即可。
三：准备好一个页面，用于显示用户的详细信息
我的页面访问地址为http://huihui.mynatapp.cc/person.do，是通过controller请求转发到个人信息页面。
代码：
@RequestMapping("person")
public String person(){
return "person";
}
暂时的效果如图所示，没有显示具体的用户信息：
图片.png
四：拼接网页授权的url链接，引导用户打开授权界面
格式如下：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数介绍：
appid： 公众号的唯一标识（从公众号页面中拷贝）
redirect_uri： 回调地址（现在用户打开的地址是open.weixin.qq.com的页面，页面中会提示用户是否同意授权，当用户同意授权之后，就会跳转到指定的回调地址上，也就是我们自己的页面）
response_type： 返回类型，请填写code（关于网页授权的参数，统一填code即可）
scope： 应用授权作用域（如之前介绍的两种授权作用域，填snsapi_base或者snsapi_userinfo）
state： 重定向到回调地址后会带上state参数，开发者可以填写任意参数值（该参数不是必填，可传可不传，有些业务操作需要自定义参数就可以用上）
#wechat_redirect：无论直接打开还是做页面302重定向时候，必须带此参数
五：把地址拷贝到web开发者工具中，查看效果
左边的视图出现了授权页面，这是因为我使用的是snsapi_userinfo授权作用域，所以需要用户同意授权，此时用户点击确认登录后即可重定向到回调地址。
网页授权页面.png
个人信息页面.png
可以看到，重定向到回调地址后，url上有两个参数，一个是code，这是一个授权码，有了它之后我们才能做后面的操作，另一个是state，就是之前说的可以自定义参数传递，因为我没有设置state所以这里是空。
也可以使用手机来测试，用微信来打开链接，但微信的浏览器不易看出地址及参数的变化。
六：通过code来获取网页授权专用的access_token凭据
在请求的时候，我们把appid，secret，code这三个参数设置进去即可。
public class WeChatUtil {
//公众号唯一标识
public static final String APPID = "wx59687be81dd3d388";
//公众号的appsecret
public static final String APPSECRET = "d4624c36b6795d1d99dcf0547af5443d";
//获取网页授权accessToken的接口
public static final String GET_WEB_ACCESSTOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
/**
* 获取网页授权的AccessToken凭据
* @return
*/
public static JSONObject getWebAccessToken(String code){
String result = HttpUtil.get(GET_WEB_ACCESSTOKEN_URL.replace("APPID", APPID).replace("SECRET", APPSECRET).replace("CODE", code));
JSONObject json = JSONObject.parseObject(result);
return json;
}
若请求正确时返回的结果如下：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
参数介绍：
access_token：网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
expires_in：access_token接口调用凭证超时时间，单位（秒）
refresh_token：用户刷新access_token
openid：用户唯一标识
scope：用户授权的作用域
注意：
1.code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
2.access_token作为换取用户信息的票据，有效期为2个小时，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。
七：通过access_token来获取用户的基本信息
接口地址：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
//获取用户信息的接口
public static final String GET_USERINFO_URL = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN";
/**
* 获取用户信息
*
*/
public static JSONObject getUserInfo(String accessToken,String openId){
String result = HttpUtil.get(GET_USERINFO_URL.replace("ACCESS_TOKEN", accessToken).replace("OPENID",openId));
JSONObject json = JSONObject.parseObject(result);
return json;
}
若请求正确时返回的结果如下：
{
"openid":" OPENID",
"nickname": "NICKNAME",
"sex":"1",
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
参数介绍：
openid：用户的唯一标识
nickname ：用户昵称
sex：用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
province：用户个人资料填写的省份
city：普通用户个人资料填写的城市
country：国家
headimgurl：用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
privilege：用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
unionid：只有将公众号绑定到微信开放平台帐号后，才会出现该字段。
八：整合Controller调用方法
@RequestMapping("person")
public String person(String code,Model model){
if(code!=null) {
//1.通过code来换取access_token
JSONObject json = WeChatUtil.getWebAccessToken(code);
//获取网页授权access_token凭据
String webAccessToken = json.getString("access_token");
//获取用户openid
String openid = json.getString("openid");
//2.通过access_token和openid拉取用户信息
JSONObject userInfo = WeChatUtil.getUserInfo(webAccessToken, openid);
//获取json对象中的键值对集合
Set<Map.Entry<String, Object>> entries = userInfo.entrySet();
for (Map.Entry<String, Object> entry : entries) {
//把键值对作为属性设置到model中
model.addAttribute(entry.getKey(),entry.getValue());
}
}
return "person";
}
为了便于理解，业务逻辑暂时写在controller中，实际开发时应抽取到业务层。
九：页面获取model数据
<div class="weui-cells mt5">
<div class="weui-cell ">
<div class="weui-cell__bd">
昵称
</div>
<div class="weui-cell__price">${nickname}</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
国家
</div>
<div class="weui-cell__price">${country}</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
所在城市
</div>
<div class="">${province} ${city}</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd">
姓别
</div>
<div class="weui-cell__price">
<c:choose>
<c:when test="${sex==2}">
女
</c:when>
<c:when test="${sex==1}">
男
</c:when>
</c:choose>
</div>
</div>
效果：
图片.png
从上图中已经看到头像，昵称，国家，城市，性别都已经从微信服务器获取到了，而手机，QQ，微信号这些内容属于用户比较隐私的内容，微信是不会提供给我们的，我们只能让用户进入页面自己去补充其他的信息。
网友评论