微信服務號網頁授權的製作

服務號中的網頁授權

網頁授權的目的是獲取微信用戶的 openid ，有兩種授權方式：snsapi_base 和 snsapi_userinfo，微信用戶無論是否關注了服務號前者都是靜默授權，其只能獲取到 openid ，而對於後者的方式，關注了服務號的用戶是靜默授權，沒有關注的話則需要用戶手動添加授權按鈕。授權的過程是：

1. 請求 oauth
   發送請求 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 其中 APPID 填寫開發者的 appid ，REDIRECT_URI 填寫最終要跳轉到的 url，注意要將該 url 使用 encoder 編碼，SCOPE 填寫上面的兩種方式其一，STATE 可以隨意填寫，一般填寫 1 或者 123 等。
2. 獲取回調的 code
   上面步驟1發送請求後瀏覽器中會跳轉到回調的 url 中，並且攜帶 code 在 url 中作爲參數，如：redirect_uri/?code=CODE&state=STATE ，這裏的 STATE 沒有用。

3. 使用步驟2中的 CODE 再次發送請求獲取 ACCESS_TOKEN
   發送請求 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 獲取 ACCESS_TOKEN，將步驟2中獲取到的 CODE 填充到該 URL 中，如果使用的是第一種授權方式，那麼獲取到 ACCESS_TOKEN 的同時也拿到了 openid，返回的結果模型是：

   {
     "access_token":"ACCESS_TOKEN",
     "expires_in":7200,
     "refresh_token":"REFRESH_TOKEN",
     "openid":"OPENID",
     "scope":"SCOPE" 
   }

坑

前端使用了 Angular ，並且使用的是哈希路由，導致 url 中帶有 # ，在上面第一步請求返回回調的地址中，其拼接 code 時候拼到了中間，然後瞬間被 angular 跳轉到默認路徑中，導致後面獲取不到 code ，也就無法執行第三步來獲取 ACCESS_TOKEN，如下圖：

上面一個地址是服務器返回的回調地址瞬間值，很快被重置爲下面的地址，導致前端獲取不到 code ，自然無法獲取到 ACCESS_TOKEN。那麼要解決這個問題需要將 angular 路由修改爲非哈希模式。