微信公眾號授權--前端

公眾號授權操作

開發微信公眾號時，需要獲取到用戶的信息，因而不得不設計到微信公眾號授權問題（本質是利用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: '給你一次重來的機會！' })
      }
    })
  })
},

參考鏈接

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