前端實現微信公眾號授權—獲取openid

weixin_34391445發表於2018-04-27
前端

前陣子在做業務的時候，涉及到要微信公眾號授權獲取openid，再用openid進行活動的投票等操作的業務。當時授權這塊是由後端的同事處理的，最近抽空研究了下前端進行授權。
首先說明下結論：
        前端不能實現微信公眾號的授權操作。
原因有以下兩點：
        1.在授權獲取openid的時候，涉及到appid, appsecret。由於公眾號的secret和獲取到的access_token安全級別都非常高，必須只儲存在伺服器，不允許傳給客戶端。

        2.就算不怕洩露appid、appsecret，在獲取openid的時候，會出現跨域問題無法解決，jsonp等方式都不行。
8270338-2009e53cb70bd261.png
獲取openid 跨域報錯

ps:上圖顯示的不是appid，是code，頁面顯示有問題。
接下來分享下獲取openid的流程，感興趣的朋友可以繼續。

首先可以快速申請一個公眾平臺測試賬號：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

可以看下官網文件，講的已經很詳細了，我這邊就挑著比較重要的步驟說：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

獲取openid的步驟有兩步：
1、引導使用者進入授權頁面同意授權，獲取code
2、通過code換取網頁授權access_token，獲取openid

第一步：使用者同意授權，獲取code。
我們需要在進入頁面之前，先請求這個url: https://open.weixin.qq.com/connect/oauth2/authorize
有如下幾個引數：

appid  必須 公眾號的唯一標識
redirect_url 必須 授權後跳轉頁面 請使用urlEncode對連結進行處理
response_type 必須 直接填code
scope 必須 應用授權作用域 後面詳細講解
state 非必須 引數 返回時會是 state=XXXXXXXXX
#wechat_redirect 必須 無論直接開啟還是做頁面302重定向時候，必須帶此引數

其中scope 分為兩種情況：
一種是snsapi_base，只獲取openid，這種方式不會彈窗，只會靜默授權，使用者無感。
另一種是snsapi_userinfo，彈出授權頁面，可通過openid拿到暱稱，性別，所在地。即使未關注，也能獲取其資訊。

在請求授權成功後，會跳轉至redirect_uri/?code=CODE&state=STATE。
在獲取到code之後，我們去請求這個url:https://api.weixin.qq.com/sns/oauth2/access_token,這裡涉及到四個引數：

appid 必須 公眾號的唯一標識
secret 必須 公眾號的appsecret
code 必須 第一步獲取的code引數
grant_type 必須 直接寫authorization_code

這一步就必須在伺服器實現了，否則會出現跨域的問題
正確請求後就會返回JSON資料：

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

這樣我們就能成功拿到openid了。

接下來分享下當時我們做授權時候的流程，我們主要實現的是一個微信投票的功能，每個使用者只能投一票，所以需要拿到openid就可以了。
步驟如下：

1、在app內使用者參加活動後分享微信進行投票，這時候我們將分享的url設定為後端的一個介面，而不是分享投票的落地頁。
2、由後端同事進行上面所講的兩步的openid請求。
3、在請求成功後，攜帶openid跳轉到我們的落地頁。
4、在投票時攜帶openid對這個openid進行驗證，進而投票成功。

相關文章