微信登錄過程、openId、token詳解(代碼實(shí)現(xiàn))
1 登錄
當(dāng)我們登錄的時(shí)候需要用到一個(gè)微信的APIwx.login 詳情點(diǎn)擊

調(diào)用這個(gè)接口可以獲取臨時(shí)登錄憑證code通過code我們可以得到戶的唯一標(biāo)識(shí)openid及本次登錄的會(huì)話密鑰session_key

2 微信登錄過程
圖示

關(guān)于微信登錄過程,官網(wǎng)上面也有一個(gè)圖示 詳情點(diǎn)擊,過程解釋如下
- 通過
wx.login獲取code - 將
code發(fā)送給我們自己的服務(wù)器 - 我們自己的服務(wù)器需要將
appid+appsecret+code,三者結(jié)合到一起發(fā)送給微信服務(wù)器(appsecret的獲取后面會(huì)說) - 當(dāng)微信服務(wù)器拿到
appid+appsecret+code,會(huì)返回給我們的服務(wù)器一些信息包括session_key和openid - 項(xiàng)目服務(wù)器將
session_key和openid保存下來生成token并返回給客戶端 - 客戶端調(diào)把
token保存下來,以后每一次發(fā)送請(qǐng)求必須攜帶token
3 AppID和appsecret獲取
首先注冊(cè) 詳情點(diǎn)擊,如果有賬號(hào)了選擇登陸登陸之后,點(diǎn)擊開發(fā)

3. 然后點(diǎn)擊開發(fā)設(shè)置

4. 點(diǎn)擊生成

5. 掃碼進(jìn)行身份的確認(rèn)

6. 復(fù)制appSecret,保存好
4 代碼實(shí)現(xiàn)
4.1 獲取code
因?yàn)橐院蟮拿恳淮伟l(fā)送請(qǐng)求我們都需要攜帶token,所以code越早獲取越好,我們可以選擇加載App或者首頁數(shù)據(jù)的時(shí)候進(jìn)行獲取code
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
// 1. 拿到code
console.log('code'+ res.code)
const code = res.code
// 2. 將code發(fā)送給服務(wù)器,這里就需要我們的接口了
}
})4.2 服務(wù)器端接口
項(xiàng)目服務(wù)器端需要整合appid+appsecret+code三個(gè)信息,去微信服務(wù)器端換取session_key和openid,所以說我們需要一個(gè)微信服務(wù)區(qū)的接口

接口
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Koa2寫服務(wù)器端接口
router.get('/getopenid',async (ctx,next)=>{
// 得到前臺(tái)出來的code
const code = ctx.query.code
//整合三者
const appId = ' wx43cf35f51c3f8fe9'
const appSecret = 'a9001166ca156245dbbbd3709a062a64'
const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=$[code]&grant_type=authorization_code`
let result = await fly.get(url)
const userinfo = result.data
// 生成token(自定義登錄狀態(tài)),返回給前端
const token = jwt.sign({user},'hahahae')
ctx.body = token
})- 這里用到一個(gè)
flyio的庫 - 用到了
jsonwebtoken的庫
前端請(qǐng)求
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
// 1. 拿到code
console.log('code'+ res.code)
const code = res.code
// 2. 將code發(fā)送給服務(wù)器,這里就需要我們的接口了
const token = wx.request({
url: '/getopenid',
data:code
})
// 3. 將token存入storge
wx.setStorageSync('token', token);
}
})4.3 token的攜帶
一般現(xiàn)在的token攜帶有三種方式
- cookie中(不推薦)
- 作為參數(shù)放在url中
- 放在請(qǐng)求頭中(推薦)
發(fā)送請(qǐng)求的方式
wx.request({
url: config.host + url,
data,
method,
header: {
authorization: token
},
success: (res) => {
resolve(res.data)
},
fail: (error) => {
reject(error)
}
})后端驗(yàn)證token
// 測(cè)試驗(yàn)證身份token的接口
router.get('/test', (ctx, next) => {
// 獲取token的值
let token = ctx.request.header.authorization;
let result;
try{
result = jwt.verify(token, 'atguigu')
console.log('驗(yàn)證結(jié)果', result);
ctx.body = '驗(yàn)證成功'
}catch (e) {
ctx.body = '驗(yàn)證失敗'
}
});result的數(shù)據(jù)形式為
{ session_key: 'bvVTSxZf3pzi5yKpCwQSxA==',
openid: 'olnQ_5croJ_Qty51qrKTC9-wZJyY',
iat: 1571228656 } - iat: 加密時(shí)的時(shí)間
- 返回的
token也是又三部分組成,有.隔開
到此這篇關(guān)于微信登錄過程、openId、token詳解(代碼實(shí)現(xiàn))的文章就介紹到這了,更多相關(guān)微信登錄 openId、token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能詳解
這篇文章主要介紹了JS+php后臺(tái)實(shí)現(xiàn)文件上傳功能,結(jié)合實(shí)例形式分析了javascript前臺(tái)表單數(shù)據(jù)提交與后臺(tái)php文件傳輸處理相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
ECMAScript6函數(shù)默認(rèn)參數(shù)
這篇文章主要介紹了ECMAScript6函數(shù)默認(rèn)參數(shù)的相關(guān)資料,需要的朋友可以參考下2015-06-06
微信JS-SDK自定義分享功能實(shí)例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結(jié)合實(shí)例形式分析了基于JS-SDK接口實(shí)現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
javascript 單例模式詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript 單例模式詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例
下面小編就為大家分享一篇原生js實(shí)現(xiàn)簡(jiǎn)單的焦點(diǎn)圖效果實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
通用javascript代碼判斷版本號(hào)是否在版本范圍之間
通用判斷版本號(hào)是否在兩者之間,也可以搭配判斷是否大于某版本號(hào),小于取反即可,本文給大家介紹通用javascript代碼判斷版本號(hào)是否在版本范圍之間,需要的朋友參考下2015-11-11
electron-builder打包與發(fā)布Electron應(yīng)用
使用electron-builder基于electron-vite-vue實(shí)現(xiàn)多平臺(tái)打包、自動(dòng)更新配置及構(gòu)建流程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-05-05

