微信公眾號h5使用者授權
https://www.cnblogs.com/ygunoil/p/12765585.html
微信h5靜默、非靜默授權獲取使用者openId的方法和步驟目錄
一、openId是什麼？
openId是使用者在當前公眾號下的唯一標識（‘身份證’），就是說通過這個openId，就能區分在這個公眾號下具體是哪個使用者。
二、openId有什麼用？
假如使用者A在當前公眾號下購買了一件商品，使用者的下單資訊肯定要儲存到後臺資料庫，那根據什麼進行儲存呢？openId是使用者在當前公眾號下的唯一標識，通過openId和使用者的下單購買資訊進行鍵值對的資料繫結。那麼我要查詢該使用者購買過什麼商品，就能夠通過openId去查詢，並且資料是唯一的，不會和另外的使用者資料有衝突。
拓展：UnionID：一個商家或公司可能會有多個公眾號，假如使用者A同時都關注了這個公司下面的三個公眾號，那麼這個使用者就會有三個openId(一個公眾號就對應一個openID)。如果作為開發者的我們，要對這個使用者在這三個公眾號下消費的資料進行彙總，我怎麼獲取到這三份資料（同一使用者的）？答案是 UnionId，微信開發者文件：如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取使用者基本資訊中的unionid來區分使用者的唯一性，因為同一使用者，對同一個微信開放平臺下的不同應用（移動應用、網站應用和公眾帳號），unionid是相同的。就是說如果要獲取使用者在同一公司不同公眾號下的資料，後臺表結構不但要關聯openId,還要關聯UnionId。
三、怎麼獲取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）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<template>
<div></div>
< /template>
< script >
importGetUrlParam from'@/assets/js/util/getUrlParam.js'
exportdefault{
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) => {
letdatas = 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/java/article/details/79299529