微信公衆號受權--前端

公衆號受權操做

開發微信公衆號時，須要獲取到用戶的信息，於是不得不設計到微信公衆號受權問題（本質是利用OAuth登錄）

開發模式如何進行受權操做

• 微信公衆號提供了兩種環境的受權模式，生產環境 開發環境
  • 生產環境也就是正式上線環境，具體不作討論
  • 重點談論開發環境（由於道理同樣，主要是在開發時，如何可以更好地模擬生產環境下，獲取用戶信息）

開發環境

• 申請開發環境微信公衆號

  • 獲取到用戶的 appid

• 找到對應的網頁受權獲取用戶基本信息，添加域名

填寫的域名本地服務器地址（域名 / ip）便可，不區份內網仍是外網

• 生成連接 須要先完成下面三個的具體參數，其餘不動
  • APPID --- 註冊測試的公衆號時生成的
  • REDIRECT_URI --- 上面填寫的域名的完整地址
  • SCOPE --- snsapi_base / snsapi_userinfo

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

• 在微信開發者工具中輸入上述地址，修改後的地址

• 成功後會進入是否受權的肯定

• 跳轉回來，地址欄會攜帶 code參數，拿到參數進行請求，具體的用戶信息，須要後臺根據傳遞的 code 來進行請求

code [vue]

getCode () {
  const code = location.href.split('?')[1]
  if (!code) return {}
  const obj = {}
  code.split('&').forEach(item => {
    const arr = item.split('=')
    obj[arr[0]] = arr[1]
  })
  return obj
},

getLogin () {
  const { code } = this.getCode()
  if (!code) {
    this.$dialog.toast({
      mes: '請受權登錄',
      timeout: 1500,
      icon: 'error'
    })
    return
  }
  const PARAMS = {
    code
  }
  // login 後臺提供的接口
  this.$fetch.post(login, PARAMS).then(res => {
    /**
      * TODO: 若token沒值
      */
    const { token } = res.data
    this.$store.dispatch('saveToken', token)
  }).catch(_ => {
    this.$dialog.toast({
      mes: '登錄失敗',
      timeout: 1500,
      icon: 'error',
      callback: () => {
        this.$dialog.alert({ mes: '給你一次重來的機會！' })
      }
    })
  })
},

參考連接

• 官方連接
• 獲取用戶信息
• 網友