微信登錄過程、openId、token詳解(代碼實現(xiàn))
1 登錄
當我們登錄的時候需要用到一個微信的APIwx.login
詳情點擊
調(diào)用這個接口可以獲取臨時登錄憑證code
通過code
我們可以得到戶的唯一標識openid
及本次登錄的會話密鑰session_key
2 微信登錄過程
圖示
關于微信登錄過程,官網(wǎng)上面也有一個圖示 詳情點擊,過程解釋如下
- 通過
wx.login
獲取code
- 將
code
發(fā)送給我們自己的服務器 - 我們自己的服務器需要將
appid
+appsecret
+code
,三者結(jié)合到一起發(fā)送給微信服務器(appsecret的獲取后面會說) - 當微信服務器拿到
appid
+appsecret
+code
,會返回給我們的服務器一些信息包括session_key
和openid
- 項目服務器將
session_key
和openid
保存下來生成token
并返回給客戶端 - 客戶端調(diào)把
token
保存下來,以后每一次發(fā)送請求必須攜帶token
3 AppID和appsecret獲取
首先注冊 詳情點擊,如果有賬號了選擇登陸登陸之后,點擊開發(fā)
3. 然后點擊開發(fā)設置
4. 點擊生成
5. 掃碼進行身份的確認
6. 復制appSecret,保存好
4 代碼實現(xiàn)
4.1 獲取code
因為以后的每一次發(fā)送請求我們都需要攜帶token
,所以code
越早獲取越好,我們可以選擇加載App或者首頁數(shù)據(jù)的時候進行獲取code
// 登錄 wx.login({ success: res => { // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId // 1. 拿到code console.log('code'+ res.code) const code = res.code // 2. 將code發(fā)送給服務器,這里就需要我們的接口了 } })
4.2 服務器端接口
項目服務器端需要整合appid
+appsecret
+code
三個信息,去微信服務器端換取session_key
和openid
,所以說我們需要一個微信服務區(qū)的接口
接口
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
Koa2寫服務器端接口
router.get('/getopenid',async (ctx,next)=>{ // 得到前臺出來的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 })
- 這里用到一個
flyio
的庫 - 用到了
jsonwebtoken
的庫
前端請求
wx.login({ success: res => { // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId // 1. 拿到code console.log('code'+ res.code) const code = res.code // 2. 將code發(fā)送給服務器,這里就需要我們的接口了 const token = wx.request({ url: '/getopenid', data:code }) // 3. 將token存入storge wx.setStorageSync('token', token); } })
4.3 token的攜帶
一般現(xiàn)在的token攜帶有三種方式
- cookie中(不推薦)
- 作為參數(shù)放在url中
- 放在請求頭中(推薦)
發(fā)送請求的方式
wx.request({ url: config.host + url, data, method, header: { authorization: token }, success: (res) => { resolve(res.data) }, fail: (error) => { reject(error) } })
后端驗證token
// 測試驗證身份token的接口 router.get('/test', (ctx, next) => { // 獲取token的值 let token = ctx.request.header.authorization; let result; try{ result = jwt.verify(token, 'atguigu') console.log('驗證結(jié)果', result); ctx.body = '驗證成功' }catch (e) { ctx.body = '驗證失敗' } });
result的數(shù)據(jù)形式為
{ session_key: 'bvVTSxZf3pzi5yKpCwQSxA==', openid: 'olnQ_5croJ_Qty51qrKTC9-wZJyY', iat: 1571228656 }
- iat: 加密時的時間
- 返回的
token
也是又三部分組成,有.
隔開
到此這篇關于微信登錄過程、openId、token詳解(代碼實現(xiàn))的文章就介紹到這了,更多相關微信登錄 openId、token內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下2015-07-07JavaScript股票的動態(tài)買賣規(guī)劃實例分析下篇
這篇文章主要介紹了JavaScript對于動態(tài)規(guī)劃解決股票問題的真題例舉講解。文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08JS中split()用法(將字符串按指定符號分割成數(shù)組)
這篇文章主要介紹了JS中split()用法(將字符串按指定符號分割成數(shù)組)的相關資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-10-10