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

一、事先准備工作

配置參數測試公眾平台信息（測試號相關配置示例）：

1、打開公眾平台的測試賬號

2、配置js接口安全域名

3、掃碼關注測試公眾號

4、修改網頁授權地址

配置授權回調的域名，至於什么是OAuth2.0，大家自行百度吧。這里的域名也要與上面的域名一致。配置成功會有通過安全監測的提示，這里不上截圖了。

注意：

1、這里填寫的是域名（是一個字符串），而不是URL，因此請勿加http://等協議頭；
2、授權回調域名配置規范為全域名，比如需要網頁授權的域名為：www.qq.com，配置以后此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑒權。
但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com無法進行OAuth2.0鑒權

以上信息配置正確后。將參數傳給后端（redirect_uri 需要 urlEncode 對鏈接進行處理后端更好處理）拼接起來。用返回的地址 window.locahost.href=‘xxxx’。調整新的地址並攜帶code

 

二、授權登錄

1、微信登錄的幾種情況：

• PC端：

  • PC端微信瀏覽器 -> 網頁內嵌二維碼方式（需要掃碼，使用微信服務號的 appid 和 appsecret）

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

• 移動端：

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

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

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

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

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

2.2、js判斷客戶端是PC端還是移動端訪問

function IsPC(){  
     var userAgentInfo = navigator.userAgent;
     var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
     var flag = true;  
     for (var v = 0; v < Agents.length; v++) {  
         if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }  
     }  
     return flag;  
  }
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

3、PC網頁微信授權登錄

3.1、網頁外鏈跳轉的方式

1）、請求后台的接口，會返回一個微信掃碼的界面地址，使用js跳轉過去即可

wxlogin () {
       User.wxlogins().then(res => {
        console.log(res)
        window.location.href = res.result.url
      })
},

2）、用戶在掃完碼點擊確定授權后，后台會拿到微信授權用戶的信息后，會幫我們跳轉到事先給后台重定向的地址頁面（這里我是新建了一個空白頁用來接收后台返回的數據），在地址后面后台會拼接一個token，我們拿到這個token，去獲取用戶信息，跳轉到首頁，即可完成登錄

let token = this.$route.query.token
    if (token) {
      this.getUserInfo().then(ures => {
        this.$router.push({
          name: 'home'
        })
      })
    }

3.1、網頁內嵌二維碼方式

1）、配置好下面相關參數，即可生成微信授權登錄/綁定二維碼，（注意：setWxerwma （）此方法需在mounted中調用）

 setWxerwma () {
      const s = document.createElement('script')
      s.type = 'text/javascript'
      s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      const wxElement = document.body.appendChild(s)
      wxElement.onload = function () {
        var obj = new WxLogin({
          id: '', // 需要顯示的容器id
          appid: '', // 公眾號appid wx*******
          scope: 'snsapi_login', // 網頁默認即可
          redirect_uri: encodeURIComponent(''), // 授權成功后回調的url
          state: Math.ceil(Math.random() * 1000), // 可設置為簡單的隨機數加session用來校驗
          style: 'black', // 提供"black"、"white"可選。二維碼的樣式
          href: '' // 外部css文件url，需要https
        })
      }
    },

2）、后面的邏輯根據后台返回的數據來處理即可，同方法一步驟二類似

或者也可以用下面步驟：

1）、在頁面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

2）、在需要使用微信登錄的地方實例以下JS對象：

var obj = new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "", 
  scope: "", 
  redirect_uri: "",
  state: "",
  style: "",
  href: ""
});

參數說明：

redirect_uri 為回調鏈接，由后端提供給前端

引入遠程js的方法：

mounted () {
  const wxJs = document.createElement('script')
  wxJs.type = 'text/javascript'
  wxJs.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  document.body.appendChild(wxJs)
},
beforeRouteLeave (to, from, next) {
  document.body.removeChild(wxJs)
  next()
}

tips：用戶掃碼授權后，進入回調頁面，由后端完成與微信開放平台間的數據請求后，重定向回到前端頁面鏈接，鏈接后面帶上參數，然后前端截取鏈接后面的參數，請求后端接口，進行登錄操作，例子如下：

beforeRouteEnter (to, from, next) {
  next(vm => {
    if (JSON.stringify(vm.$route.query) === '{}') {
      console.log('沒有參數')
    } else {
      // 使用this.$route.query截取鏈接后面的參數，請求后端接口
      vm.pWxLogin()
    }
  })
},

4、移動端微信授權登錄

靜默授權的意思是用戶無感知的獲取用戶信息，不需要用戶有任何的操作動作，注意靜默授權只能獲取到用戶的openId。並不能獲取到用戶的其他信息。

非靜默授權的意思是需要用戶去操作，點擊同意按鈕，也就是說，如果產品要求是非靜默授權，那么前端會彈起用戶授權的按鈕，待用戶同意之后，就可以獲取到用戶的openId,個人信息，關注信息等相關內容。

注：靜默授權和非靜默授權的區別在於調用的接口的 scope 字段是 snsapi_base 還是 snsapi_userinfo 

4.1、創建一個按鈕，點擊觸發事件,跳轉到微信授權頁面

wxlogin () {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
}
//this.appid 公眾號APPID  this.url  用戶點擊授權后，會跳轉到后台幫我們重定向的頁面（這里我是新建了一個空白頁，專門接收code）

其中：

appid：是應用的appid
redirect_uri：是指回跳的url
response_type：只寫code
scope：表示授權的作用域，多個可以用逗號隔開，snsapi_base 表示靜默授權，snsapi_userinfo 表示非靜默授權
state：用於保持請求和回調的狀態，授權請求后原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數，可設置為簡單的隨機數加session進行校驗

4.2、頁面會自動跳轉到類似以下地址，在重定向的頁面拿到給我們返回的 code，會拼接在URL后面

https://www.test.com/?code=021MZkll2DUtR63EuUnl21BZPv0MZklE&state=STATE

注意：如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE。若用戶禁止授權，則重定向后不會帶上code參數，僅會帶上state參數redirect_uri?state=STATE

4.3、通過code換取網頁授權access_token

在業務代碼中，用JS獲取code參數，然后訪問以下地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

其中：

• appid：應用的appid,
• secret: 應用密鑰AppSecret,
• code：上一步中獲取到的code
• grant_type：值為authorization_code

成功后的返回數據如下：（主要是拿access_token和openid字段）

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

4.4、用access_token 和openid獲取用戶信息

用access_token和openid字段訪問以下地址：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

其中：

• access_token：上一步的access_token
• openid:上一步的openid

返回值如下：

{   
    "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"
}

錯誤時微信會返回JSON數據包如下（示例為openid無效）:

{"errcode":40003,"errmsg":" invalid openid "}

值得注意的地方：

　　用戶管理類接口中的“獲取用戶基本信息接口”，是在用戶和公眾號產生消息交互或關注后事件推送后，才能根據用戶OpenID來獲取用戶基本信息。這個接口，包括其他微信接口，都是需要該用戶（即openid）關注了公眾號后，才能調用成功的。

　　網頁授權獲取用戶基本信息也遵循UnionID機制。即如果開發者有在多個公眾號，或在公眾號、移動應用之間統一用戶帳號的需求，需要前往微信開放平台（open.weixin.qq.com）綁定公眾號后，才可利用UnionID機制來滿足上述需求。

　　UnionID機制的作用說明：如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區分用戶的唯一性，因為同一用戶，對同一個微信開放平台下的不同應用（移動應用、網站應用和公眾帳號），unionid是相同的。

　　尤其注意：由於公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務器，不允許傳給客戶端。后續刷新access_token、通過access_token獲取用戶信息等步驟，也必須從服務器發起。

 

參閱官方文檔： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html