微信h5靜默、非靜默受權獲取用戶openId的方法和步驟

https://blog.csdn.net/qq_35430000/article/details/79299529

微信h5靜默、非靜默受權獲取用戶openId的方法和步驟:
1、openId是什麼？
openId是用戶在當前公衆號下的惟一標識（‘身份證’），就是說經過這個openId，就能區分在這個公衆號下具體是哪一個用戶。

2、openId有什麼用？

假如用戶A在當前公衆號下購買了一件商品，用戶的下單信息確定要存儲到後臺數據庫，那根據什麼進行存儲呢？openId是用戶在當前公衆號下的惟一標識，經過openId和用戶的下單購買信息進行鍵值對的數據綁定。那麼我要查詢該用戶購買過什麼商品，就可以經過openId去查詢，而且數據是惟一的，不會和另外的用戶數據有衝突。

拓展：UnionID：一個商家或公司可能會有多個公衆號，假如用戶A同時都關注了這個公司下面的三個公衆號，那麼這個用戶就會有三個openId(一個公衆號就對應一個openID)。若是做爲開發者的咱們，要對這個用戶在這三個公衆號下消費的數據進行彙總，我怎麼獲取到這三份數據（同一用戶的）？答案是 UnionId，微信開發者文檔：若是開發者擁有多個移動應用、網站應用和公衆賬號，可經過獲取用戶基本信息中的unionid來區分用戶的惟一性，由於同一用戶，對同一個微信開放平臺下的不一樣應用（移動應用、網站應用和公衆賬號），unionid是相同的。就是說若是要獲取用戶在同一公司不一樣公衆號下的數據，後臺表結構不但要關聯openId,還要關聯UnionId。

3、怎麼獲取openId？

（一）登陸微信公衆平臺後臺獲取公衆號的AppId，設置回調地址。

 

回調地址設置頁面嚮導：開發>接口權限>網頁服務>網頁受權>修改。開發的項目須要放到已經解析好服務器域名的服務器下，同時把Mp***.text文件放到服務器根目錄下，此時你的服務器必須能聯通外網也就是有公網IP,而且80端口是打開的，可使用阿里雲等服務器，默認配置就能夠了。

 

（二）根據開發須要，靜默受權仍是非靜默受權

   ① 靜默受權：snsapi_base，沒有彈窗，只能獲取用戶的openId。

   ②非靜默受權：snsapi_userinfo，有彈框彈出須要用戶手動點擊確認受權。能夠獲取openId，用戶的頭像、暱稱等

 

（三）前端代碼，配置的參數要一一對應，獲取code，並調用後臺接口，把code傳給後臺

 

redirect_uri，這個的意思是：受權完成後再從新回到當前頁面（又刷新了一次頁面）

getUrlParam的方法，能夠百度下，就是獲取頁面路徑的某個字段所對應的參數。

 

 

若是配置參數一一對應，那麼此時已經經過回調地址刷新頁面後，你就會看到在地址欄中的code了。

 

(四)前端截取地址欄中的code後經過調接口把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 () { // 非靜默受權，第一次有彈框
const code = GetUrlParam('code') // 截取路徑中的code，若是沒有就去微信受權，若是已經獲取到了就直接傳code給後臺獲取openId
const local = window.location.href
if (code == null || code === '') {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + 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作用戶的數據綁定或查詢等操做

    先後端都獲取了openId後，就能經過openId作用戶數據的綁定和查詢了。

（七）補充說明

   使用上述方法進行的微信受權，在手機端會有兩次空白頁跳轉，時間雖然很短暫，但有些產品經理會以爲這種體驗很差（實在很欠揍）。解決方法是：能夠把跳轉到微信獲取code的這段連接拼接好直接複製到  微信公衆平臺 後臺管理系統菜單列表裏面。這樣點擊菜單，在回調頁經過截取url中的code，就能直接獲取到code了，就避免了屢次跳轉的狀況。

 

 

（八）解決微信受權成功進入項目後，點擊手機物理返回鍵或返回會出現空白頁或者報錯的狀況，空白頁是由於受權頁就是空白頁。能夠參考個人另外一篇文章：

解決微信受權成功後點擊按返回鍵出現空白頁和報錯的問題https://blog.csdn.net/qq_35430000/article/details/81505497 ———————————————— 版權聲明：本文爲CSDN博主「飛歌Fly」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/qq_35430000/article/details/79299529