初學者指南：理解 Token 認證及其運作方式

By徐培鈞
LinkedIn

更新日期： 2025 年 1 月 29 日

本文為 Django 登入註冊功能（後端）系列文，第 4 篇

  1. 新手指南｜使用 Django 實現後端會員登入、註冊功能
  2. Django Rest Framework (DRF) 新手指南：為什麼選擇 DRF 建構 API？
  3. Django Rest Framework (DRF) 新手指南：用 ViewSets 快速構建 CRUD API
  4. 初學者指南：理解 Token 認證及其運作方式　👈所在位置
  5. Django REST Framework (DRF) 認證方式、預設權限規則｜新手指南
  6. Django Rest Framework 入門指南：如何正確處理 HTTP 狀態碼
  7. 初學者指南：深入了解 Django 的 create_user 方法
  8. 新手指南：深入了解 Django 的 authenticate 方法
  9. Django REST Framework｜@permission_classes指導手冊
  10. 使用 Postman 測試 Django 後端的註冊、登入與登出功能

隨著現代前後端分離架構的普及，Token 認證已成為最常見的身份驗證方式之一。

無論是建構單頁應用程式（SPA）、行動應用程式，還是其他前後端互通的應用，Token 認證都能讓開發者以更安全、簡單且高效的方式處理使用者登入與驗證。

本文將以簡單易懂的方式，帶你了解什麼是 Token、它在前後端如何傳遞與保存，以及實際開發中應如何正確實現 Token 認證。

Token 是什麼？為什麼需要它？

什麼是 Token？

  • Token 是後端生成的一個唯一字符串，通常以隨機生成的方式代表特定使用者的身份。
  • 它類似於傳統的 Cookie/Session，是後端用來辨識請求是否來自已驗證使用者的憑證。

為什麼需要 Token？

  • 無狀態特性：Token 適合用於前後端分離架構，因為它是無狀態的（Stateless）。後端無需保存使用者的登入狀態，只需檢查每次請求中的 Token 是否有效。
  • 靈活性：Token 可以儲存在前端的 Local Storage、Session Storage 或 Cookie 中，讓前端擁有更多控制權。
  • 跨應用的通用性：Token 可以攜帶使用者的身份資訊，且易於用於多種應用間的共享，例如移動端與網頁應用共用。

後端生成的 Token 如何傳遞到前端？

當使用者登入後，後端會通過 API 將生成的 Token 傳遞給前端，通常是透過 HTTP 響應中的 JSON 資料返回。

以下是完整流程：

登入 API 流程

  1. 使用者提交登入資料
    • 前端將使用者的帳號與密碼，透過 API 請求傳送給後端：
POST /api/accounts/login/
Body: { "username": "user1", "password": "mypassword" }
  1. 後端驗證並生成 Token
    • 後端驗證帳號和密碼是否正確。如果驗證成功，生成一個 Token 並回傳： 
{
  "token": "abcd1234efgh5678ijkl9012mnop3456",
  "message": "登入成功！"
}
  1. 前端接收並保存 Token
    • 前端接收 Token 後，將其保存到適當的位置（例如 Local Storage、Session Storage 或 Cookie）。

Token 應該存在哪裡？

Token 的存儲位置會影響應用的安全性與使用體驗，以下是常見的選擇：

Local Storage

  • 特點：
    • 資料會持久保存，直到使用者手動刪除或清除瀏覽器資料。
    • 適合需要長期保持登入狀態的應用。
  • 缺點：
    • 如果網站遭受 XSS 攻擊，Token 可能被竊取。
  • 使用方式：
// 儲存 Token
localStorage.setItem('authToken', 'abcd1234efgh5678ijkl9012mnop3456');

// 讀取 Token
const token = localStorage.getItem('authToken');

Session Storage

  • 特點：
    • Token 只會在當前瀏覽器標籤頁存活，關閉標籤頁後即自動刪除。
    • 適合短期的登入需求。
  • 缺點：
    • 無法跨標籤頁使用。
  • 使用方式： 
// 儲存 Token
sessionStorage.setItem('authToken', 'abcd1234efgh5678ijkl9012mnop3456');

// 讀取 Token
const token = sessionStorage.getItem('authToken');

Cookie

  • 特點：
    • 可設定 HttpOnly 和 Secure 屬性來加強安全性。
    • 適合需要與瀏覽器默認行為集成（如跨域請求）的情境。
  • 缺點：
    • 實現較為複雜，需後端支援。
  • 範例設定：
document.cookie = "authToken=abcd1234efgh5678ijkl9012mnop3456; Secure; HttpOnly";

每次發送 API 請求時，如何攜帶 Token？

在完成登入並保存 Token 後，前端需要在後續的 API 請求中攜帶 Token，通常是放在 HTTP 請求的 Authorization 標頭中。

自動攜帶 Token

使用前端框架常用的 HTTP 請求工具（如 Axios 或 Fetch），可以配置 Token 自動附加到請求中：

import axios from 'axios';

// 獲取 Token
const token = localStorage.getItem('authToken');

// 配置 Axios，攜帶 Token
const api = axios.create({
  baseURL: 'http://127.0.0.1:8000/api/',
  headers: {
    Authorization: `Token ${token}`,
  },
});

// 發送 API 請求
api.get('/accounts/profile/')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('API 請求失敗：', error);
  });

手動攜帶 Token

在單一 API 請求中，也可以手動將 Token 附加至標頭：

fetch('http://127.0.0.1:8000/api/accounts/profile/', {
  method: 'GET',
  headers: {
    Authorization: 'Token abcd1234efgh5678ijkl9012mnop3456',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('API 請求失敗：', error));

Token 使用流程總結

以下是 Token 認證的典型運作流程：

  1. 登入階段：
    • 使用者輸入帳號與密碼，前端向後端發送登入請求。
    • 後端生成 Token 並回傳給前端。
    • 前端將 Token 儲存在安全的位置（如 Local Storage）。
  2. 後續請求階段：
    • 每次 API 請求，前端從存儲位置取出 Token，並將其附加到請求標頭中。
    • 後端驗證 Token 是否有效，並返回對應的資料。
  3. 登出階段：
    • 前端刪除 Token，並通知後端執行相關操作（如記錄登出事件）。

結論

  • Token 是現代應用中前後端溝通的關鍵憑證，具有無狀態、靈活且適合多端應用的優點。
  • 安全地存儲和攜帶 Token 是開發過程中不可忽略的重要部分。
  • 運用適當的工具和方法，可以有效實現自動化的 Token 認證流程，提升使用者體驗和系統安全性。

希望這篇文章能幫助你輕鬆理解 Token 認證的原理與實作方式！

Similar Posts