微信中微信受權邏輯

開篇我先吐槽一下微信開發者的文檔，千年不更新。

寫文時間：2020年3月14日，先敲個時間，別那邊偷偷改了有人吐槽我。

文檔中寫的拒絕和容許都會觸發回調，而後我測試拒絕的時候就不會觸發回調。

微信受權邏輯

1. 進入頁面，獲取受權狀態，（getUserid）通常是看cookie裏面有用戶信息嗎。
2. 有用戶信息，pass。

3. 無用戶信息。這裏只是打個標記，並不在一進入頁面就強制受權。而是在用戶操做的時候提示用戶受權，由於這樣體驗比較好。
   體驗上是能夠告訴用戶你瀏覽咱們是不須要你的信息的，而你在咱們平臺互動是須要註冊登陸的。

   1. 用戶拒絕受權，這裏頁面是無感知的，因此不作任何處理。可是頁面能夠知道用戶是非首次互動，這時候能夠先彈出一個框告知用戶，用戶須要容許受權。
   2. 用戶容許受權，這個時候會觸發刷新頁面。這裏建議頁面給本身加個標記，就是用戶觸發受權的事件，刷新以後從新調用一下。

需求一: 拒絕受權的時候彈窗

嘿嘿你猜我在作的是什麼。

我看以前代碼是有拒絕回調邏輯的，並且我也在文檔中確認過了。
可是我在測試的時候發現，拒毫不會觸發回調，成功的時候邏輯是對的。

那麼在這個場景下，咱們怎麼顯示呢？

1. 咱們作一個小頁面藏在受權彈框後面，由於拒絕的時候頁面無變化，用戶就能夠看到後面的小頁面。
2. 基於方案1咱們發現，網慢的狀況下，贊成受權的用戶也會看到彈窗，這對於咱們要求體驗的前端er來講是很差的。咱們這裏能夠嘗試給一個稍微大一點的setTimeout顯示小頁面。
3. 基於方案2，由於微信受權彈窗不會阻塞主進程，因此咱們並不能穩定控制小頁面的顯示與隱藏。極端狀況下用戶的體驗還是很差的。那麼咱們應該怎麼辦呢？捶產品，砍需求，哈哈固然是不作這個彈框，把這部分的功能換另外一種交互方式咯。

需求二: 非微信綁定的域名作微信受權

由於如今微信管得太嚴了，怕被微信拉黑，因此考慮使用其餘域名作分享外鏈。

可是咱們又但願能夠在微信受權登陸一下，這樣這個需求就來了。

微信中綁定的安全域名和回調域名爲 a.com，
咱們分享到微信打開的域名爲 b.com。

方案一：跨域方案

首先咱們要明確幾個要點。

1. 我方服務端判斷登陸是判斷 cookie 。
2. 對於前端來說 a.com 和 b.com 是跨域的。
3. a.com 是沒法把 cookie 寫到 b.com 下的。
4. 一樣 b.com 也沒法讀取 a.com 的 cookie。

好了基於上面的要點。咱們開始實現功能。

1. a.com/wxauth 會觸發微信受權，咱們默認用戶贊成受權
2. 微信會將頁面重定向到 callback 頁面。（這裏是在公衆號配置好的）
3. callback 頁面寫 cookie。這個時候咱們就能拿到用戶登陸信息。
4. 可是基於上面咱們跨域的cookie是沒法共享的。那麼咱們能夠開CORS來使用，a.com 的接口容許 b.com的頁面發出請求。
5. 可是跨域的狀況下默認是不攜帶 cookie 的。這個時候咱們能夠配置 withCredentials 來達到攜帶cookie的目的。

基於上面的跨域方案，咱們 b.com 下面沒有任何 cookie，只有頁面。
咱們全部的請求和 cookie 都放在 a.com。

方案二：共享，我以爲叫受權驗證也能夠

上個方案是全部請求都走 a.com。

這個方案是全部請求都走當前域名。我網上看了幾個別人作好的，也都是這種方案。

這種方案其實能夠把 a.com 理解成第三方平臺。

微信公衆號：前端linong