Web API 過去與未來(四)API 認證方式:Cookie、JWT、OAuth

更新 發佈閱讀 6 分鐘

軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!


在現代 Web 開發中,「安全的 API 認證機制」是架構設計不可忽視的一環。無論是登入機制、跨系統授權,或是前後端分離架構下的資料保護,了解各種 API 認證方式的特性,將大幅提升系統的安全性與可擴展性。

本篇文章將帶你深入認識三種主流的 API 認證方法:

  1. Cookie-based 認證
  2. JWT (JSON Web Token)
  3. OAuth 2.0(第三方授權標準)

🔐 Cookie 認證:傳統但仍實用的方式

HTTP 是一個無狀態協定(stateless),也就是每次請求都是獨立的、不會記得你是誰。因此,我們需要額外手段來「記住」使用者的登入狀態。

✅ Cookie-based 認證流程

以下是典型的 Cookie 登入流程:

  1. 使用者輸入帳號密碼,發送登入請求
  2. Server 驗證成功後,透過 Set-Cookie 指令,將一組 Session ID 寫入瀏覽器 Cookie
  3. 之後每次發送 API 請求,瀏覽器都會自動附帶該 Cookie
  4. Server 根據 Cookie 查找對應 Session 判斷是否為合法使用者
raw-image

🍪 Cookie 優點

  • 自動處理:瀏覽器會自動附帶 Cookie,不需額外程式處理
  • 適用於傳統 MVC 網站架構(如 Ruby on Rails、Django)

⚠️ Cookie 缺點

  • 容易受到 CSRF(跨站請求偽造) 攻擊
  • 搭配前後端分離架構較不直覺,需特別處理跨域與 Credential 權限

🔍 延伸閱讀:Session 與 Cookie 的差別


🔑 JWT 認證:Stateless 的現代解法

JWT(JSON Web Token)是目前 RESTful 架構中最常見的認證方式之一。它遵循無狀態設計原則,不需要 Server 保持任何 Session 狀態,認證資訊全都保存在 Token 本身

raw-image

🧩 JWT 的組成結構

JWT 是一段由三部分組成的字串,以 . 分隔:

xxxxx.yyyyy.zzzzz
  1. Header:指定加密演算法(如 HS256)
  2. Payload:實際的資料(如 userId、role)
  3. Signature:用 Secret Key 對前兩部分加密簽章,防止篡改

🧪 範例 Payload

json
複製編輯{
"sub": "1234567890",
"name": "Gary Huang",
"admin": true,
"exp": 1712345678
}

🔁 認證流程(Token-based Authentication)

  1. 使用者登入,Server 驗證後產生 JWT 並回傳
  2. 客戶端儲存 JWT(通常放在 localStorage 或 sessionStorage)
  3. 每次 API 請求,在 Authorization 標頭夾帶 Bearer <token>
  4. Server 驗證 Token 是否有效,並決定是否授權存取資源

✅ JWT 優點

  • 適用於 SPA 與前後端分離架構
  • 無需 Session 管理,減輕 Server 負擔
  • 可攜帶使用者資訊(claims)

⚠️ JWT 缺點

  • 無法主動註銷(除非實作黑名單機制)
  • Token 洩漏後,風險極高(尤其存在 localStorage)
  • 複雜的查詢會帶來效能壓力

🔍 延伸閱讀:JWT 官方網站


🌐 OAuth 2.0:第三方授權的業界標準

OAuth(Open Authorization)是當代「安全授權」的代表,讓使用者可以授權第三方服務存取部分資訊,而無需分享自己的帳號密碼。

這種認證方式你肯定用過:

🧑‍💼 使用 Google、Facebook、GitHub 一鍵登入網站!

🔐 OAuth 解決了什麼問題?

過去我們常將帳密直接給其他平台,這非常危險,OAuth 則改為發放一個「可控範圍與期限的 Access Token」,授權後端讀取部分資訊(如 Email、姓名),大幅降低風險。

🔄 授權流程(簡化版本)

  1. 第三方應用導向授權伺服器(如 Google 登入頁)
  2. 使用者登入並授權該應用
  3. 授權伺服器回傳一個臨時 Code
  4. 第三方應用使用該 Code 換取 Access Token
  5. 使用 Access Token 存取資源伺服器(Resource Server)

✅ OAuth 優點

  • 使用者資訊由授權伺服器(如 Google)管理,安全有保障
  • 可控制授權範圍(Scope)與有效期限
  • 支援多平台登入整合,提升 UX

⚠️ OAuth 缺點

  • 實作複雜,流程繁瑣(建議使用套件如 Passport.js)
  • 需信任第三方平台的安全性
  • 僅適合需要「第三方授權」的應用場景

🔍 延伸閱讀:OAuth 2.0 RFC 6750


🚀 小結:三種方式怎麼選?

raw-image

如果你在建構現代化 Web 系統,建議了解以上三種方式,根據需求選擇最適合的實作方式,或是結合使用(例如 OAuth + JWT),達到兼具使用者體驗與資安考量的理想平衡。

下一篇我們將探討 API 開發中重要的「Proxy 架構與 HTTP 快取策略」,記得訂閱或追蹤,不錯過實戰精華!


📩 喜歡這篇內容嗎?歡迎分享給你的工程師朋友,或在留言區說說你偏好的認證方式吧!

留言
avatar-img
留言分享你的想法!
avatar-img
跨越國界的程式人生
5會員
41內容數
自學程式,現為網頁開發工程師,同時擔任線上課程講師,專注於幫助自學程式的開發者找到理想工作。熱愛技術與分享,致力於將複雜的概念轉化為實用知識,讓更多人踏入軟體開發的世界。
2025/07/14
本篇文章深入探討 RESTful API 與 GraphQL 兩種主流 API 設計風格的優缺點、適用場景及實作方式,並提供選擇建議,協助開發者根據專案需求做出明智的選擇。文章也涵蓋了 API 快取機制、權限控制、以及常見挑戰等面向。
Thumbnail
2025/07/14
本篇文章深入探討 RESTful API 與 GraphQL 兩種主流 API 設計風格的優缺點、適用場景及實作方式,並提供選擇建議,協助開發者根據專案需求做出明智的選擇。文章也涵蓋了 API 快取機制、權限控制、以及常見挑戰等面向。
Thumbnail
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
看更多
你可能也想看
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
透過零售業的數位轉型,消費者期待獲得更多元的服務體驗。API 技術在電商、庫存管理和訂單處理等方面發揮關鍵作用,幫助企業提升效率並擴大營運範圍。API 管理平台為企業帶來高彈性、安全的 API 策略,加速數位轉型,提高企業韌性。昕力資訊的 API 管理平台為企業提供強力支持,助力產業進步。
Thumbnail
透過零售業的數位轉型,消費者期待獲得更多元的服務體驗。API 技術在電商、庫存管理和訂單處理等方面發揮關鍵作用,幫助企業提升效率並擴大營運範圍。API 管理平台為企業帶來高彈性、安全的 API 策略,加速數位轉型,提高企業韌性。昕力資訊的 API 管理平台為企業提供強力支持,助力產業進步。
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
金融業需遵守金檢規則,建立API分級協助和管理程序確保API合規,使用OAuth 2.0和API KEY授權功能降低風險,實行API認證和金鑰機制保障資料安全。監控API使用,建立控制機制,選擇優良的APIM,提供全面的API管理和安全。
Thumbnail
金融業需遵守金檢規則,建立API分級協助和管理程序確保API合規,使用OAuth 2.0和API KEY授權功能降低風險,實行API認證和金鑰機制保障資料安全。監控API使用,建立控制機制,選擇優良的APIM,提供全面的API管理和安全。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News