公眾號獲取code換取openid（網頁授權，前端發起授權頁）
一、openId是什么？
openId是用戶在當前公眾號下的唯一標識（‘身份證’），就是說通過這個openId，就能區分在這個公眾號下具體是哪個用戶。
二、openId有什么用？
假如用戶A在當前公眾號下購買了一件商品，用戶的下單信息肯定要存儲到后台數據庫，那根據什么進行存儲呢？openId是用戶在當前公眾號下的唯一標識，通過openId和用戶的下單購買信息進行鍵值對的數據綁定。那么我要查詢該用戶購買過什么商品，就能夠通過openId去查詢，並且數據是唯一的，不會和另外的用戶數據有沖突。
拓展：UnionID：一個商家或公司可能會有多個公眾號，假如用戶A同時都關注了這個公司下面的三個公眾號，那么這個用戶就會有三個openId(一個公眾號就對應一個openID)。如果作為開發者的我們，要對這個用戶在這三個公眾號下消費的數據進行匯總，我怎么獲取到這三份數據（同一用戶的）？答案是 UnionId，微信開發者文檔：如果開發者擁有多個移動應用、網站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區分用戶的唯一性，因為同一用戶，對同一個微信開放平台下的不同應用（移動應用、網站應用和公眾帳號），unionid是相同的。就是說如果要獲取用戶在同一公司不同公眾號下的數據，后台表結構不但要關聯openId,還要關聯UnionId。
三、怎么獲取openId？
（一）登錄微信公眾平台后台獲取公眾號的AppId，設置回調地址。
（二）根據開發需要，靜默授權還是非靜默授權
① 靜默授權：snsapi_base，沒有彈窗，只能獲取用戶的openId。
②非靜默授權：snsapi_userinfo，有彈框彈出需要用戶手動點擊確認授權。可以獲取openId，用戶的頭像、昵稱等
（三）前端代碼，配置的參數要一一對應，獲取code，並調用后台接口，把code傳給后台
redirect_uri，這個的意思是：授權完成后再重新回到當前頁面（又刷新了一次頁面）
getUrlParam的方法，可以百度下，就是獲取頁面路徑的某個字段所對應的參數。
如果配置參數一一對應，那么此時已經通過回調地址刷新頁面后，你就會看到在地址欄中的code了。
(四)前端截取地址欄中的code后通過調接口把code傳給后台，后台通過code獲取openId和用戶頭像昵稱等信息並返回給前端
為什么，前端不能一起把獲取code和獲取openId的操作一並做了，還要請求后台，讓后台獲取openId？
（五）后台通過 code、AppSecret（公眾號平台后台取得）請求微信鏈接獲取openId
|
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
|
<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>
|
（六）通過openId做用戶的數據綁定或查詢等操作
前后端都獲取了openId后，就能通過openId做用戶數據的綁定和查詢了。