JWT Authentication

更新 發佈閱讀 6 分鐘

JWT全名JSON Web Token,因符合RESTful API無狀態原則而誕生。

傳統我們通常會用cookie/session的方式來做身分認證,也就是user登入後,用session id當作一種token,來做身份認證。

然而用session這種方法server會有額外的儲存負擔,查詢也會需要時間,加上一般production server不會只有一台,如果用session的話會有server之間如何共享session的問題。(當然如果您的SLB是by ip分流那就另當別論了)

另外,使用JWT不會有像cookie一樣可能有無法跨域傳送的問題,也不會有CSRF攻擊的問題,因為我們不會把JWT儲存在cookie,不會讓瀏覽器自動送出,通常是駭客會透過攔截封包來擷取JWT,只不過還是建議使用HTTPS傳輸比較安全。

JWT字串由header, payload, signature三個部分組成,各自編碼後,用.串接起來即成為JWT字串。
JWT => Header.Payload.Signature

Header:

組成如下,alg是token被加密的演算法,typ是指token的type。
{
"alg": "HS256",
"typ": "JWT"
}

把這個json做base64 encode即為Header。


Payload:

這邊是放聲明訊息的地方,有以下幾種定義:

1. 標準聲明(Registered claims)

JWT規定的標準聲明,只是建議可以放,沒有強制一定要放。

2. 私有聲明(Private claims)

可自行定義的聲明,通常會放user的不敏感資料。

3. 公有聲明(Public claims)

實務上不太會需要用到,有時間再來研究。

Payload組成範例:
{
"iss": "http://www.example.com",
"exp": 1525318201,
"data": {
"user_id": 1,
"user_name": "Vic"
}
}

其中iss = JWT簽發者, exp = JWT的過期時間,這兩個都是標準聲明。標準聲明還有很多定義,可自行查詢。
data的部分就是自定義的user資料。

把這個json做base64 encode即為Payload。


Signature:

Signature是這樣組成的:

HMAC-SHA256(
base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret
)

其中secret=金鑰,只有伺服器知道這組金鑰。
HS256 = HMAC-SHA256

將header和payload json data做base64UrlEncode編碼後,用.來串接成data string,再使用header中指定的hash演算法HS256來對data string使用金鑰進行加密,產生簽名(signature)。


根據本文提到的範例,最終產生的JWT token如下圖:
Header.Payload.Signature
紅.紫.藍

vocus|新世代的創作平台


JWT驗證流程如下:
1. 在前端打後端登入api,且user確認登入成功後,server會回傳這組JWT Token給前端。
2. 前端收到JWT Token後,一般會將其儲存在local storage中。
3. 之後前端要存取後端API的時候,需在header帶上這組token:
Authorization: Bearer ${JWT token}
假設JWT token是abc即為: Authorization: Bearer abc
4. 後端收到token後會驗證token有效性,決定是否可以存取此api。


本筆記參考:
1. https://ithelp.ithome.com.tw/m/articles/10196759?fbclid=IwAR2xU_FU1ma4DZMeqd2SJzHvoGAfb7jMLwjjkVtqIYHoVy81SBdRn-81_Nk
2. https://kknews.cc/zh-tw/code/ry55lxx.html
3. https://medium.com/%E4%BC%81%E9%B5%9D%E4%B9%9F%E6%87%82%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/jwt-json-web-token-%E5%8E%9F%E7%90%86%E4%BB%8B%E7%B4%B9-74abfafad7ba
4. https://www.mdeditor.tw/pl/2dmW/zh-tw
5. https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-jwt-%E5%AF%A6%E4%BD%9C%E9%A9%97%E8%AD%89%E6%A9%9F%E5%88%B6-2e64d72594f8
6. https://yami.io/jwt/

留言
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
session & token 驗證機制早期是用 session,server 這裡會發一個 session 給 client,並在資料庫記錄這個 session 屬於誰,而且每個裝置都會記一組 session,這會造成 server 這邊需要記錄大量的資料。 後來發展出 token,client
Thumbnail
session & token 驗證機制早期是用 session,server 這裡會發一個 session 給 client,並在資料庫記錄這個 session 屬於誰,而且每個裝置都會記一組 session,這會造成 server 這邊需要記錄大量的資料。 後來發展出 token,client
Thumbnail
本筆記遵循官方文件教學,經過一些小修改,經測試可以跑在Laravel Framework version: 8.13.0,將筆記記錄下來。 ......
Thumbnail
本筆記遵循官方文件教學,經過一些小修改,經測試可以跑在Laravel Framework version: 8.13.0,將筆記記錄下來。 ......
Thumbnail
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
Thumbnail
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
Thumbnail
角色基於的訪問控制(RBAC)是管理用戶訪問資源的一種策略,根據不同的角色賦予用戶不同的權限。在本篇文章中,我們將探討如何使用Gin和JSON Web Tokens (JWT)來實現RBAC。
Thumbnail
角色基於的訪問控制(RBAC)是管理用戶訪問資源的一種策略,根據不同的角色賦予用戶不同的權限。在本篇文章中,我們將探討如何使用Gin和JSON Web Tokens (JWT)來實現RBAC。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
Thumbnail
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
HTTPS全名是超文本傳輸安全協定,是瀏覽器與Web伺服器間的資料傳遞是以加密的方式進行通訊,而且資料隱私比http好。如果需要從外網連線到自己自己架設Nextcloud那就要改成https比較好,避免資料沒加密就傳送出去。 另外一點是如果iphone手機系統是IOS 15.6版的要連線到nextc
Thumbnail
HTTPS全名是超文本傳輸安全協定,是瀏覽器與Web伺服器間的資料傳遞是以加密的方式進行通訊,而且資料隱私比http好。如果需要從外網連線到自己自己架設Nextcloud那就要改成https比較好,避免資料沒加密就傳送出去。 另外一點是如果iphone手機系統是IOS 15.6版的要連線到nextc
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News