作者：陳惠，叩丁狼教育高階講師。原創文章，轉載請註明出處。

在學習網頁授權之前，我們先來了解下這次的需求：

我們的應用中有一個用來顯示個人資訊的頁面，當微信使用者在微信app中開啟這個頁面，希望可以獲取到該使用者的頭像，暱稱等資訊，並顯示到該頁面中。如下圖所示：

如果使用者在微信客戶端中訪問第三方網頁(我們的應用)，可以通過微信網頁授權機制，來獲取使用者的基本資訊（包括暱稱、性別、城市、國家等，注意：手機，QQ，郵箱通過微信網頁授權是無法獲取的）。利用這些使用者資訊，我們可以實現一些業務邏輯，比如來源統計、帳號繫結、使用者身份鑑權等功能。

OAuth2.0

微信的網頁授權是基於OAuth2.0協議的，百科上對OAuth的介紹是：OAuth（開放授權）是一個開放標準，允許使用者讓第三方應用訪問該使用者在某一網站上儲存的私密的資源（如頭像，個人資訊等），而無需將使用者名稱和密碼提供給第三方應用；而OAuth2.0則是OAuth協議的升級版，但並不相容老版本。

實際上，現在很多企業都使用到OAuth2.0，比如支付寶，微信，QQ授權登入等等。

授權流程

微信開發文件中引導我們操作的流程是：

更詳細的流程如下，主要是利用一個code授權碼來進行授權：

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，頭像，暱稱，城市，性別等)，這種授權需要使用者手動同意，無須關注公眾號，就可在使用者同意後獲取該使用者的基本資訊。

實現步驟

注意：服務號或者測試號才有網頁授權的功能許可權

二：配置授權域名，設定該域名擁有網頁授權的許可權(如果不設定，就沒有許可權使用網頁授權)。

在介面許可權列表找到網頁授權，點修改按鈕：

把域名填入到輸入框中：

確認儲存即可。

程式碼：

    @RequestMapping("person")
    public String person(){
        return "person";
    }

暫時的效果如圖所示，沒有顯示具體的使用者資訊：

引數介紹：
appid： 公眾號的唯一標識（從公眾號頁面中拷貝）
redirect_uri： 回撥地址（現在使用者開啟的地址是open.weixin.qq.com的頁面，頁面中會提示使用者是否同意授權，當用戶同意授權之後，就會跳轉到指定的回撥地址上，也就是我們自己的頁面）
response_type： 返回型別，請填寫code（關於網頁授權的引數，統一填code即可）
scope： 應用授權作用域（如之前介紹的兩種授權作用域，填snsapi_base或者snsapi_userinfo）
state： 重定向到回撥地址後會帶上state引數，開發者可以填寫任意引數值（該引數不是必填，可傳可不傳，有些業務操作需要自定義引數就可以用上）
#wechat_redirect：無論直接開啟還是做頁面302重定向時候，必須帶此引數

五：把地址拷貝到web開發者工具中，檢視效果
左邊的檢視出現了授權頁面，這是因為我使用的是snsapi_userinfo授權作用域，所以需要使用者同意授權，此時使用者點選確認登入後即可重定向到回撥地址。

可以看到，重定向到回撥地址後，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失效之後，需要使用者重新授權。

    //獲取使用者資訊的介面
    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>

效果：

從上圖中已經看到頭像，暱稱，國家，城市，性別都已經從微信伺服器獲取到了，而手機，QQ，微訊號這些內容屬於使用者比較隱私的內容，微信是不會提供給我們的，我們只能讓使用者進入頁面自己去補充其他的資訊。