微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟

更新時(shí)間：2020年06月08日 10:28:03 作者：飛歌Fly

這篇文章主要介紹了微信h5靜默和非靜默授權(quán)獲取用戶openId的方法和步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、openId是什么？

openId是用戶在當(dāng)前公眾號(hào)下的唯一標(biāo)識(shí)（‘身份證'），就是說通過這個(gè)openId，就能區(qū)分在這個(gè)公眾號(hào)下具體是哪個(gè)用戶。

二、openId有什么用？

假如用戶A在當(dāng)前公眾號(hào)下購買了一件商品，用戶的下單信息肯定要存儲(chǔ)到后臺(tái)數(shù)據(jù)庫，那根據(jù)什么進(jìn)行存儲(chǔ)呢？openId是用戶在當(dāng)前公眾號(hào)下的唯一標(biāo)識(shí)，通過openId和用戶的下單購買信息進(jìn)行鍵值對的數(shù)據(jù)綁定。那么我要查詢該用戶購買過什么商品，就能夠通過openId去查詢，并且數(shù)據(jù)是唯一的，不會(huì)和另外的用戶數(shù)據(jù)有沖突。

拓展：UnionID：一個(gè)商家或公司可能會(huì)有多個(gè)公眾號(hào)，假如用戶A同時(shí)都關(guān)注了這個(gè)公司下面的三個(gè)公眾號(hào)，那么這個(gè)用戶就會(huì)有三個(gè)openId(一個(gè)公眾號(hào)就對應(yīng)一個(gè)openID)。如果作為開發(fā)者的我們，要對這個(gè)用戶在這三個(gè)公眾號(hào)下消費(fèi)的數(shù)據(jù)進(jìn)行匯總，我怎么獲取到這三份數(shù)據(jù)（同一用戶的）？答案是 UnionId，微信開發(fā)者文檔：如果開發(fā)者擁有多個(gè)移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào)，可通過獲取用戶基本信息中的unionid來區(qū)分用戶的唯一性，因?yàn)橥挥脩?，對同一個(gè)微信開放平臺(tái)下的不同應(yīng)用（移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào)），unionid是相同的。就是說如果要獲取用戶在同一公司不同公眾號(hào)下的數(shù)據(jù)，后臺(tái)表結(jié)構(gòu)不但要關(guān)聯(lián)openId,還要關(guān)聯(lián)UnionId。

三、怎么獲取openId？

（一）登錄微信公眾平臺(tái)后臺(tái)獲取公眾號(hào)的AppId，設(shè)置回調(diào)地址。

回調(diào)地址設(shè)置頁面向?qū)В洪_發(fā)>接口權(quán)限>網(wǎng)頁服務(wù)>網(wǎng)頁授權(quán)>修改。開發(fā)的項(xiàng)目需要放到已經(jīng)解析好服務(wù)器域名的服務(wù)器下，同時(shí)把Mp***.text文件放到服務(wù)器根目錄下，此時(shí)你的服務(wù)器必須能聯(lián)通外網(wǎng)也就是有公網(wǎng)IP,并且80端口是打開的，可以使用阿里云等服務(wù)器，默認(rèn)配置就可以了。

（二）根據(jù)開發(fā)需要，靜默授權(quán)還是非靜默授權(quán)

① 靜默授權(quán)：snsapi_base，沒有彈窗，只能獲取用戶的openId。

②非靜默授權(quán)：snsapi_userinfo，有彈框彈出需要用戶手動(dòng)點(diǎn)擊確認(rèn)授權(quán)?？梢垣@取openId，用戶的頭像、昵稱等

（三）前端代碼，配置的參數(shù)要一一對應(yīng)，獲取code，并調(diào)用后臺(tái)接口，把code傳給后臺(tái)

redirect_uri，這個(gè)的意思是：授權(quán)完成后再重新回到當(dāng)前頁面（又刷新了一次頁面）

getUrlParam的方法，可以百度下，就是獲取頁面路徑的某個(gè)字段所對應(yīng)的參數(shù)。

如果配置參數(shù)一一對應(yīng)，那么此時(shí)已經(jīng)通過回調(diào)地址刷新頁面后，你就會(huì)看到在地址欄中的code了。

(四)前端截取地址欄中的code后通過調(diào)接口把code傳給后臺(tái)，后臺(tái)通過code獲取openId和用戶頭像昵稱等信息并返回給前端

為什么，前端不能一起把獲取code和獲取openId的操作一并做了，還要請求后臺(tái)，讓后臺(tái)獲取openId？

（五）后臺(tái)通過 code、AppSecret（公眾號(hào)平臺(tái)后臺(tái)取得）請求微信鏈接獲取openId

前端具體代碼如下，可復(fù)制（記得把文中的 window.APPID改為自己公眾號(hào)的APPID）

<template>
 <div></div>
</template>
 
<script>
import GetUrlParam from '@/assets/js/util/getUrlParam.js'
export default {
 name: 'Index',
 data () {
  return {
  }
 },
 created () {
  this.getCode()
 },
 methods: {
  getCode () { // 非靜默授權(quán)，第一次有彈框
   const code = GetUrlParam('code') // 截取路徑中的code，如果沒有就去微信授權(quán)，如果已經(jīng)獲取到了就直接傳code給后臺(tái)獲取openId
   const local = window.location.href
   if (code == null || code === '') {
    window.location. + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
   } else {
    this.getOpenId(code) //把code傳給后臺(tái)獲取用戶信息
   }
  },
  getOpenId (code) { // 通過code獲取 openId等用戶信息，/api/user/wechat/login 為后臺(tái)接口
   let _this = this
   this.$http.post('/api/user/wechat/login', {code: code}).then((res) => {
    let datas = res.data
    if (datas.code === 0 ) {
     console.log('成功')
    }
   }).catch((error) => {
    console.log(error)
   })
  }
 }
}
</script>
 
<style lang="less" scoped>
 
</style>

（六）通過openId做用戶的數(shù)據(jù)綁定或查詢等操作

前后端都獲取了openId后，就能通過openId做用戶數(shù)據(jù)的綁定和查詢了。

（七）補(bǔ)充說明

使用上述方法進(jìn)行的微信授權(quán)，在手機(jī)端會(huì)有兩次空白頁跳轉(zhuǎn)，時(shí)間雖然很短暫，但有些產(chǎn)品經(jīng)理會(huì)覺得這種體驗(yàn)不好（實(shí)在很欠揍）。解決方法是：可以把跳轉(zhuǎn)到微信獲取code的這段鏈接拼接好直接復(fù)制到微信公眾平臺(tái) 后臺(tái)管理系統(tǒng)菜單列表里面。這樣點(diǎn)擊菜單，在回調(diào)頁通過截取url中的code，就能直接獲取到code了，就避免了多次跳轉(zhuǎn)的情況。