H5及web頁面微信授權登錄流程

PC端微信掃碼登錄流程：

為什么要微信登錄：

如果用戶在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取用戶基本信息，進而實現業務邏輯。微信擁有龐大且穩定活躍的用戶基數，直接將我們的app接入到微信的生態可以免去復雜的新用戶注冊流程，使用戶體驗更良好。

微信登錄的幾種情況：

• PC端：

  • PC端微信瀏覽器 -> 直接調用微信授權（不掃碼，使用微信服務號的appid和appsecret）

  • PC端其他瀏覽器 -> 跳轉微信的掃碼登錄頁面（需要掃碼，使用微信開放平台注冊的PC應用appid和appsecret）

• 移動端：

  • 微信客戶端打開 -> 直接調用微信授權（不掃碼，使用微信服務號的appid和appsecret）

  • 其他手機瀏覽器打開 -> 跳轉微信的掃碼登錄頁面（需要掃碼，使用微信開放平台注冊的PC應用appid和appsecret）

區分是否是PC環境的方法：

判斷是PC環境還是移動環境是為了相應切換應用的布局，目前采用css媒體查詢來做判斷：

/* 屏幕寬度小於等於1070像素時識別為移動端（1070像素是使推薦頁常用情報站欄不現實滾動條的最小寬度） */
@media screen and (max-width: 1070px) {
	/* 移動端布局css樣式 */
}
/* 屏幕寬度大於1071像素識別為PC端 */
@media screen and (min-width: 1071px) {
	/* PC端布局樣式 */
}

這里目前的設計是將判斷UI樣式和判斷登錄邏輯區分開的，兩個功能分別獨立判斷

區分微信登錄的幾種情況的方法：

• 前端在登錄時獲取用戶設備信息（userAgent）

let UA = navigator.userAgent.toLocaleLowerCase()  
// UA的格式可能因設備不同而采用不同的大小寫格式這里我們先統一為小寫方便下一步判斷
UA.indexOf("micromessenger") != -1
// 通過indexOf方法來判斷字符串里是否有要查詢的字段

前端操作

1 獲取code(此步驟由前端完成)

• 首先要在微信開放平台里申請創建一個web應用，填寫完基本信息之后提交審核，最長7個工作日，一般兩天就能下來。審核通過以后可以得到web應用的AppID和AppSecret，稍后請求微信登錄的二維碼。

• 在得到web應用的AppID以后前端需要配置請求登錄二維碼的url：

// 前端使用appid和回調域名來獲取微信登陸二維碼

window.location.replace(
	"https://open.weixin.qq.com/connect/qrconnect?" +
	"appid=" + APP_id + "&" +
	"redirect_uri=" + encodeURIComponent('http://wx.digitwonder.com') + "&" +
	"scope=snsapi_login#wechat_redirect" )

這個配置中AppID字段是向后台傳微信開放平台的web應用AppID，回調地址也是在開放平台注冊時留的地址，而且這個回調地址的uri需要經過encode編碼加密以后拼接到請求的。'scope'字段表示請求的作用域，微信掃碼登錄時scope字段固定寫'snsapi_login'。將這個地址拼接好以后就可以將路由定向到微信的二維碼頁面了。

參數說明

參數	是否必須	說明
appid	是	應用唯一標識（前面認證網頁應用中獲得）
redirect_uri	是	重定向地址，需要進行UrlEncode（前面認證網頁應用中獲得）
response_type	是	填code
scope	是	應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可
state	是	用於保持請求和回調的狀態，授權請求后原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數，可設置為簡單的隨機數加session進行校驗

• 在頁面定位到微信二維碼頁面以后掃碼確認，頁面會被定向到之前配置的回調頁面地址並且將請求來的code拼接到url上一並返回，我們在微信確認登陸以后回到url拼接有code的頁面獲取到code之后向后台發送登陸請求。

// 聲明變量flag用來存儲微信回調頁面的code信息
let flag = flag.split("&")[0];
// 重定向該頁面的路由（清除url中的code） - 避免發送code請求
this.$router.replace({
  path: "/login",
  query: {
    redirect: this.$route.query.redirect
  }
});

this.request({
        url: "/biz/login/wx",  // 后台接收code的接口
        method: "POST",  // 使用HTTP的POST方法傳回code
        data: {
          code: flag  // 將頁面存儲code的flag變量以code字段傳給后台
          // 此處區分登錄方式的字段待定
        }
      }).then(res => {
      	// 前端本地獲取用戶信息后的方法
      })

后端操作

接口結構

接口: (post)/biz/login/wx
參數: browser(取值為 wx,other)
返回數據(json):

// 登錄成功時返回
{
    "code": 1,
    "msg": "SUCCESS",
    "data": {
        "nick": "用戶昵稱",
        "role_id": 2,
        "mobile": "手機號",
        "avatar": "用戶頭像",
        "birthday": 1578909982972,
        "gender": 2,
        "location": "地區",
        "summary": "用戶簡介",
        "eval": true,
        "status": "Complete",
        "last_login": 1578909982972,
        "id": "id",
        "create_time": 1571755690000,
        "update_time": 1578885503000
    }
}

// 登錄失敗時返回
{
    "code": 0,
    "msg": "FAILURE"
}

1 獲取access_token

收到登錄請求后首先通過code向微信服務器換取access_token。
根據不同的瀏覽器類型使用相應的appid和secret

// 請求url(Get)
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

參數說明

參數	是否必須	說明
appid	是	應用唯一標識
secret	是	應用密鑰AppSecret
code	是	填寫第一步獲取的code參數
grant_type	是	填authorization_code

微信瀏覽器登錄時使用公眾號appid和secret, 其他瀏覽器登錄使用網站應用appid和secret

返回數據說明

名稱	類型	說明
access_token	String	access_token
expires_in	int	access_token有效時間
refresh_token	String	refresh_token
openid	String	open_id
scope	String	授權作用域

當獲取數據出錯時,返回結果中包含"errCode"字段, 登錄失敗

2 拉取用戶信息

通過第一步中獲取到的access_token和openid拉取user_info

// 請求url(Get)
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

參數說明

參數	是否必須	說明
access_token	是	上一步中獲取到的access_token
openid	是	微信用戶唯一標識，上一步中獲取到的openid

返回數據說明

名稱	類型	說明
openid	String	open_id
unionid	String	union_id
nickname	String	用戶昵稱
sex	int	性別
province	String	省
city	String	城市
country	String	國家
headimgurl	String	用戶頭像
privilege	Array	用戶權限

當獲取數據出錯時,返回結果中包含"errCode"字段, 登錄失敗

3 生成或獲取本地用戶

• 通過union_id獲取第三方平台賬號
• 第三方平台賬號存在時通過uid獲取用戶數據,否則繼續
• 使用微信登錄的賬戶需要將其用戶數據轉換成本地用戶並存儲
• 添加用戶緩存
• 創建或更新用戶Auth數據
• 更新ES(UserIndex)
• 創建用戶媒體

4 返回用戶數據

將用戶數據返回到前台