快捷導航

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

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

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

一、openId是什么？

openId是用戶在當前公眾號下的唯一標識（‘身份證'），就是說通過這個openId，就能區(qū)分在這個公眾號下具體是哪個用戶。

二、openId有什么用？

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

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

三、怎么獲取openId？

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

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

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

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

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

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

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

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

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

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

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

（五）后臺通過 code、AppSecret（公眾號平臺后臺取得）請求微信鏈接獲取openId

前端具體代碼如下，可復制（記得把文中的 window.APPID改為自己公眾號的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給后臺獲取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傳給后臺獲取用戶信息
   }
  },
  getOpenId (code) { // 通過code獲取 openId等用戶信息，/api/user/wechat/login 為后臺接口
   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ù)的綁定和查詢了。

（七）補充說明

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