前端Token?組成及生成方法示例詳解
正文
平常前端項(xiàng)目中,我們通常使用 token 來進(jìn)行身份驗(yàn)證 —— 客戶登錄成功,接口就會(huì)返回一個(gè) token,之后前端每次發(fā)送請求就在請求頭中添加個(gè)值為 token 的 authorization 字段來表明身份。至于 token 是怎么生成的?那一長串的字母數(shù)字到底有什么含義?或許一些身為前端的小伙伴們長久以來并不甚了解。那么本文,就來對 token 的組成及生成方法做個(gè)基本的介紹吧。
生成 token
在使用 koa 搭建的后端項(xiàng)目中,可以安裝 jsonwebtoken 這個(gè)庫來生成 token:
npm i jsonwebtoken
之后引入 jwt
,通過 jwt.sign()
即可得到 token,傳入的第一個(gè)參數(shù)是 token 攜帶的信息,第二個(gè)參數(shù)是用于數(shù)字簽名的密鑰,第三個(gè)參數(shù)可以傳入一些配置,比如過期時(shí)間 expiresIn
,單位為秒:
// 代碼片段一,省略部分代碼 const jwt = require('jsonwebtoken') loginRouter.get('/login', (ctx, next) => { const token = jwt.sign({ name: 'Jay' }, 'aaabbbccc', { expiresIn: 60 * 60 }) ctx.body = { msg: '登錄成功', token } })
使用瀏覽器發(fā)送請求,可以看到生成的 token:
token 的組成
我們可以將生成的 token 復(fù)制粘貼到 jwt 官網(wǎng)的 debugger 工具里進(jìn)行解碼:
可以發(fā)現(xiàn) token 使用 .
分割成了 3 部分:
1. Header
即 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
這部分,為 Base64 編碼后的結(jié)果,其中有兩個(gè)屬性:
alg
,也就是 Algorithm(算法) 的縮寫,指定加密算法,默認(rèn)為 HS256(HMAC-SHA256),是一種單項(xiàng)散列函數(shù),加密解密采用同個(gè)密鑰;typ
,token 的類型(type),通??梢怨潭▽懗?JWT。
所以這部分結(jié)果,如果保持代碼片段一不變,瀏覽器每次重新請求得到的結(jié)果也都不會(huì)變化。
2. Payload
token 攜帶的數(shù)據(jù),除了我們在代碼片段一中傳入的 name
信息以及過期時(shí)間 exp
,還有默認(rèn)攜帶的 iat
(issued at),為 token 的簽發(fā)時(shí)間。Payload 部分的數(shù)據(jù)同樣是經(jīng)過 Base64 編碼的。
3. Signature
簽名部分,通過 HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload),secret)
得到,即將 Header 和 Payload 的 Base64 編碼結(jié)果與數(shù)字簽名的密鑰 secret
結(jié)合,通過 HS256 算法生成,這部份的結(jié)果,瀏覽器每次重新請求時(shí)都會(huì)重新生成。
驗(yàn)證 token
假定前端是通過 Bearer Token 類型向服務(wù)器傳遞的 token,實(shí)際上就是將 token 賦值給請求頭的 authorization
屬性。那么后端在驗(yàn)證時(shí),可以通過 ctx.headers.authorization
拿到帶有 Bearer
前綴(注意 Bearer 后有個(gè)空格)的 token 。之后再將獲取的 token 以及代碼片段一生成 token 時(shí)傳入的密鑰一起傳給 jwt.verify()
,如果驗(yàn)證成功,則 res
可以得到 Payload 數(shù)據(jù);如果驗(yàn)證失敗,則會(huì)報(bào)錯(cuò),可用 try catch
捕獲 :
// 代碼片段二 userRouter.get('/center', (ctx, next) => { const authorization = ctx.headers.authorization const token = authorization.replace('Bearer ', '') try { const res = jwt.verify(token, 'aaabbbccc') console.log('res', res) // res { name: 'Jay', iat: 1679814009, exp: 1679817609 } ctx.body = '驗(yàn)證成功' } catch (error) { ctx.body = '驗(yàn)證失敗' } })
采用非對稱加密算法
在代碼片段一中使用 jwt 生成 token 時(shí),默認(rèn)采用的加密算法是 HS256,安全性不高,所以一般公司里的項(xiàng)目采用的都是非對稱加密算法,比如 RSA 算法,使用私鑰來頒發(fā) token,使用公鑰來驗(yàn)證 token,關(guān)于加密算法這部分知識(shí),若想了解更多,可移步 《前端加密》。
生成公私密鑰
在 windows 系統(tǒng)下,公私密鑰的生成可以去下載安裝 OpenSSL, 然后通過系統(tǒng)自帶的命令行工具使用 openssl 生成。也可以直接通過 git 的 bash 工具(集成了 OpenSSL)來生成 。首先生成私鑰: 進(jìn)入到要保存密鑰的目錄下,輸入 openssl
按下回車:
接著就可以輸入 genrsa -out private.key 1024
來生成 rsa 算法的私鑰:
生成的私鑰如下:
有了私鑰,再使用 rsa -in private.key -pubout -out public.key
生成與之對應(yīng)的公鑰:
公鑰如下:
修改之前的代碼
有了一對公私密鑰后,生成 token 時(shí)我們就可以將代碼片段一稍加修改,將傳入的密鑰改為私鑰,并在配置對象中指定要使用的算法為 RS256
:
const token = jwt.sign({ name: 'Jay' }, privateKey, { expiresIn: 60 * 60, algorithm: 'RS256' })
驗(yàn)證 token 時(shí),也需將代碼片段二中用公鑰替換原本的密鑰,然后添加算法配置,只不過這里 algorithm
的值為數(shù)組,因?yàn)樵隍?yàn)證時(shí)是可以通過多種算法依次嘗試的:
const res = jwt.verify(token, publicKey, { algorithm: ['RS256'] })
privateKey
和 publicKey
可以通過 fs 模塊獲?。?/p>
const fs = require('fs') const privateKey = fs.readFileSync('./src/keys/private.key') const publicKey = fs.readFileSync('./src/keys/public.key')
以上就是前端Token 組成及生成方法示例詳解的詳細(xì)內(nèi)容,更多關(guān)于前端Token組成生成方法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng),每次滾動(dòng)一行停頓,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11JS獲取當(dāng)前日期時(shí)間并定時(shí)刷新示例
這篇文章主要介紹了JS如何獲取當(dāng)前日期時(shí)間并執(zhí)行定時(shí)刷新,示例代碼如下,需要的朋友不要錯(cuò)過2014-06-06JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)選中文字提示新浪微博分享效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法
這篇文章主要介紹了javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法,涉及javascript針對鼠標(biāo)事件及圖片透明度操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對頁面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01