微信公众号开发教程(六)获取微信用户信息-网页授权

作者：陈惠，叩丁狼教育高级讲师。原创文章，转载请注明出处。

在学习网页授权之前，我们先来了解下这次的需求：

我们的应用中有一个用来显示个人信息的页面，当微信用户在微信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

现在把我们具体的参数填上：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx59687be81dd3d388&redirect_uri=http://huihui.mynatapp.cc/person.do&response_type=code&scope=snsapi_userinfo#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凭据

接口地址：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

在请求的时候，我们把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，微信号这些内容属于用户比较隐私的内容，微信是不会提供给我们的，我们只能让用户进入页面自己去补充其他的信息。