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
紅.紫.藍

raw-image


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
留言分享你的想法!
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
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
Thumbnail
JWT(JSON Web Token)是基於 JSON 格式的開放標準,主要用於身份驗證與權限確認。本文介紹了JWT的基本結構,並闡述其特點,如降低資料庫壓力、靈活性及無狀態性。JWT 特別適用於分佈式系統。本篇將協助讀者深入理解 JWT 的重要性與實際應用。
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
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
最近因為想要花些時間做完一個完整的SideProject,以前總是懂得怎麼使用,拼拼湊湊完成一個塞趴卷就交卷了,但都沒時間去真正理解這些原理的應用,而Laravel 框架本身支持的登入登出的工具,就有好多種。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
哈囉!在今天的文章中,我們將深入探討如何在 Gin 應用中實現 JWT 驗證。這種技術允許我們安全地驗證和授權用戶,並確保我們的 API 或 Web 應用的資源僅被許可的用戶訪問。
Thumbnail
HTTPS全名是超文本傳輸安全協定,是瀏覽器與Web伺服器間的資料傳遞是以加密的方式進行通訊,而且資料隱私比http好。如果需要從外網連線到自己自己架設Nextcloud那就要改成https比較好,避免資料沒加密就傳送出去。 另外一點是如果iphone手機系統是IOS 15.6版的要連線到nextc
Thumbnail
HTTPS全名是超文本傳輸安全協定,是瀏覽器與Web伺服器間的資料傳遞是以加密的方式進行通訊,而且資料隱私比http好。如果需要從外網連線到自己自己架設Nextcloud那就要改成https比較好,避免資料沒加密就傳送出去。 另外一點是如果iphone手機系統是IOS 15.6版的要連線到nextc
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
JWT全名JSON Web Token,因符合RESTful API無狀態原則而誕生。 傳統我們通常會用cookie/session的方式來做身分認證,也就是user登入後,用session id當作一種token,來做身份認證。 然而用session這種方法server會有額外的儲存負擔...
Thumbnail
JWT全名JSON Web Token,因符合RESTful API無狀態原則而誕生。 傳統我們通常會用cookie/session的方式來做身分認證,也就是user登入後,用session id當作一種token,來做身份認證。 然而用session這種方法server會有額外的儲存負擔...
Thumbnail
概念: 有限時間內可使用通行證來要求對應的操作權限。 JWT 的組成內容有三個部分,由 . 做區隔,最後透過這三個部分,串成一個 Jwt 字串 [HEADER].[PAYLOAD].[SIGNATURE] 1. Header: 主要記載認證的方法 {     "typ": "JWT",     "
Thumbnail
概念: 有限時間內可使用通行證來要求對應的操作權限。 JWT 的組成內容有三個部分,由 . 做區隔,最後透過這三個部分,串成一個 Jwt 字串 [HEADER].[PAYLOAD].[SIGNATURE] 1. Header: 主要記載認證的方法 {     "typ": "JWT",     "
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News