0.官方文檔

微信網(wǎng)頁授權(quán)步驟 --> 傳送門

1 第一步：用戶同意授權(quán)十艾，獲取code
2 第二步：通過code換取網(wǎng)頁授權(quán)access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用戶信息(需scope為 snsapi_userinfo)
5 附：檢驗授權(quán)憑證（access_token）是否有效

1.第一步：用戶同意授權(quán)，獲取code

組裝鑒權(quán)鏈接--->
在確保微信公眾賬號擁有授權(quán)作用域（scope參數(shù)）的權(quán)限的前提下（服務(wù)號獲得高級接口后查剖，默認(rèn)擁有scope參數(shù)中的snsapi_base和snsapi_userinfo）飒泻，引導(dǎo)關(guān)注者打開如下頁面(直接把url貼到微信鞭光，打開鏈接即可)：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示“該鏈接無法訪問”啊掏，請檢查參數(shù)是否填寫錯誤，是否擁有scope參數(shù)對應(yīng)的授權(quán)作用域權(quán)限衰猛。
首先做一個你內(nèi)網(wǎng)穿透：
https://ray.ngrok.xiaomiqiu.cn 是我本地做的一個內(nèi)網(wǎng)穿透(小米球)迟蜜，映射到本地6001服務(wù)。

image.png

https://open.weixin.qq.com/connect/oauth2/authorize?appid="+ appid + "&redirect_uri=https%3a%2f%2fray.ngrok.xiaomiqiu.cn%2fwechat%2fgetCode&response_type=code&scope=snsapi_userinfo&state=xxx#wechat_redirect
注意：回調(diào)redirect_uri的值需要encode-->
https://ray.ngrok.xiaomiqiu.cn/wechat/getCode  -->utf8-encode--> https%3a%2f%2fray.ngrok.xiaomiqiu.cn%2fwechat%2fgetCode

用戶點擊該url--->微信跳轉(zhuǎn)回調(diào)我們設(shè)置的redirect_uri(https://ray.ngrok.xiaomiqiu.cn/wechat/getCode).
那么我們在

image.png

2.通過code換取網(wǎng)頁授權(quán)access_token

    -->>>>>>>>>>獲取code后娜睛，請求以下鏈接請求獲取access_token
    public static final String WEB_GET_ACCESS_REQ_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";

    public static WxOauth2Token getOauth2AccessToken(String appId, String appSecret, String code) {
        WxOauth2Token wat = null;
        // 拼接請求地址
        String requestUrl = WEB_GET_ACCESS_REQ_URL;
        requestUrl = requestUrl.replace("APPID", appId);
        requestUrl = requestUrl.replace("SECRET", appSecret);
        requestUrl = requestUrl.replace("CODE", code);
        // 獲取網(wǎng)頁授權(quán)憑證
//        JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);
        JSONObject jsonObject = WxUtil.doGetStr(requestUrl);
        if (null != jsonObject) {
            try {
                wat = new WxOauth2Token();
                wat.setAccessToken(jsonObject.getString("access_token"));
                wat.setExpiresIn(jsonObject.getInteger("expires_in"));
                wat.setRefreshToken(jsonObject.getString("refresh_token"));
                wat.setOpenId(jsonObject.getString("openid"));
                wat.setScope(jsonObject.getString("scope"));
            } catch (Exception e) {
                wat = null;
                int errorCode = jsonObject.getInteger("errcode");
                String errorMsg = jsonObject.getString("errmsg");
                logger.error("獲取網(wǎng)頁授權(quán)憑證失敗 errcode:{} errmsg:{}" + errorCode + errorMsg);
            }
        }
        return wat;
    }

    WxOauth2Token weixinOauth2Token = WxWebUtil.getOauth2AccessToken(WxAuth.instance().getAppid(), WxAuth.instance().getAppsec(), code);

現(xiàn)在得到了access_token，可以取到用戶信息了Ｘ远谩Ｆ杞洹！＝嵝颉障斋！

3.第三步：刷新access_token（如果需要）

由于access_token擁有較短的有效期，當(dāng)access_token超時后徐鹤，可以使用refresh_token進(jìn)行刷新垃环，refresh_token有效期為30天，當(dāng)refresh_token失效之后返敬，需要用戶重新授權(quán)遂庄。

獲取第二步的refresh_token后，請求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
具體參考官方文檔劲赠。

4.拉取用戶信息(需scope為 snsapi_userinfo)

    /**
     * 通過網(wǎng)頁授權(quán)獲取用戶信息
     * 
     * @param accessToken 網(wǎng)頁授權(quán)接口調(diào)用憑證
     * @param openId 用戶標(biāo)識
     * @return WxWebUserInfo
     */
    @SuppressWarnings({ "deprecation", "unchecked" })
    public static WxWebUserInfo getSNSUserInfo(String accessToken, String openId) {
        WxWebUserInfo snsUserInfo = null;
        // 拼接請求地址
        String requestUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID";
        requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace(
                "OPENID", openId);
        // 通過網(wǎng)頁授權(quán)獲取用戶信息
        JSONObject jsonObject = WxUtil.doGetStr(requestUrl);
        if (null != jsonObject) {
            try {
                snsUserInfo = new WxWebUserInfo();
                // 用戶的標(biāo)識
                snsUserInfo.setOpenId(jsonObject.getString("openid"));
                // 昵稱
                snsUserInfo.setNickname(jsonObject.getString("nickname"));
                // 性別（1是男性涛目，2是女性，0是未知）
                snsUserInfo.setSex(jsonObject.getInteger("sex"));
                // 用戶所在國家
                snsUserInfo.setCountry(jsonObject.getString("country"));
                // 用戶所在省份
                snsUserInfo.setProvince(jsonObject.getString("province"));
                // 用戶所在城市
                snsUserInfo.setCity(jsonObject.getString("city"));
                // 用戶頭像
                snsUserInfo.setHeadImgUrl(jsonObject.getString("headimgurl"));
                // 用戶特權(quán)信息
//              JSONArray.parseArray()
//              snsUserInfo.setPrivilegeList(JSONArray.toList(jsonObject.getJSONArray("privilege"), List.class));
            } catch (Exception e) {
                snsUserInfo = null;
                int errorCode = jsonObject.getInteger("errcode");
                String errorMsg = jsonObject.getString("errmsg");
                logger.error("獲取用戶信息失敗 errcode:{} errmsg:{}" +  errorCode + errorMsg);
            }
        }
        return snsUserInfo;
    }

    //通過第二步凛澎，獲取accesstoken和openid
    WxOauth2Token weixinOauth2Token = WxWebUtil.getOauth2AccessToken(WxAuth.instance().getAppid(), WxAuth.instance().getAppsec(), code);
    // 網(wǎng)頁授權(quán)接口訪問憑證
    String accessToken = weixinOauth2Token.getAccessToken();
    // 用戶標(biāo)識
    openId = weixinOauth2Token.getOpenId();
    // 獲取用戶信息
    WxWebUserInfo snsUserInfo = WxWebUtil.getSNSUserInfo(accessToken, openId);

結(jié)尾處霹肝，重定向到vue前端首頁并帶上唯一標(biāo)志：

    /**
     * 鑒權(quán)回調(diào)
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping("/getCode")
    public ModelAndView getCode(HttpServletRequest request) {
        String code = request.getParameter("code");
        String state = request.getParameter("state");
        String openId = GlobalConstant.Symbol.EMPTY;
        // 用戶同意授權(quán)
        if (!"authdeny".equals(code)) {
            // 獲取網(wǎng)頁授權(quán)access_token
            WxOauth2Token weixinOauth2Token = WxWebUtil.getOauth2AccessToken(WxAuth.instance().getAppid(), WxAuth.instance().getAppsec(), code);
            // 網(wǎng)頁授權(quán)接口訪問憑證
            String accessToken = weixinOauth2Token.getAccessToken();
            // 用戶標(biāo)識
            openId = weixinOauth2Token.getOpenId();
            // 獲取用戶信息
            WxWebUserInfo snsUserInfo = WxWebUtil.getSNSUserInfo(accessToken, openId);

            if (ObjUtils.isNotEmpty(redisDAO)) {
                redisDAO.set(RedisKeyUtil.getPartnerUserAuthInfoKey(openId), weixinOauth2Token, RedisKeyUtil.EXPIRE_TIME_SEC_MAX);
            }

            log.info("獲取用戶信息: " + snsUserInfo.toString());

            return null;
        }

        // 重定向到vue前端首頁并帶上唯一標(biāo)志, 這里你可以帶上加密后的token，然后前后端識別就使用該token進(jìn)行用戶身份驗證識別塑煎，
        //我在此處簡單處理沫换，就直接用openid，然后前端展示首頁的時候轧叽，截取url里面的內(nèi)容：openid苗沧，然后前端vue就獲取到了openid了。
        //shaw.ngrok.xiaomiqiu.cn是我做的一個內(nèi)網(wǎng)穿透炭晒，指向前端vue頁面待逞。
        String url_to = "http://shaw.ngrok.xiaomiqiu.cn/vue-project?openid=" + openId;


        return new ModelAndView(new RedirectView(url_to));
    }

該鏈接一般設(shè)置到服務(wù)號的菜單欄里面，設(shè)置微信菜單欄网严，后期發(fā)布文章识樱。
我們在手機端點擊開那個鑒權(quán)鏈接，經(jīng)過上面的操作之后，就會重定向到后臺設(shè)置的跳轉(zhuǎn)到vue項目首頁怜庸。首頁通過openid獲取服務(wù)器數(shù)據(jù)当犯。

5.前端部分：

我做的是將前端打包放到tomcat下

image.png

image.png