iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 27

27 Token

前言

我們已經知道要怎麼跟後端拿到資料,現在還需要知道怎麼在要資料的時候,讓對方知道我們的身分,進而在驗證權限後把資料給我們。前面我們使用的 API 大多是佛心開放大眾使用,實務面來說不可能所有 API 都是如此。

如果你搜尋一下 token 的中文,會發現他是代幣的意思。

是的,想像一下你在湯X熊丟入一枚代幣,機台的系統就知道可以讓你開始遊戲。或是在進入門禁管制的地方,刷一下你的嗶嗶卡,門就應聲開啟... Token 就是這樣的東西。

JSON Web Token(JWT)

認證的部分以前會用 Session 和 Cookie 來處理,在客戶登入後即在伺服器端建立 Session ,提供 Session ID ,之後再以 Session 認證用戶。也就是說必須有大量的資料庫儲存資料,衍伸大量成本及效能。此外更有安全上的疑慮。

但運用 JWT 則可以讓:

  1. 每一次從客戶端向伺服器端發出請求,都是獨立的
  2. 驗證後在伺服器端不會將驗證狀態透過 Session 儲存
  3. 直接讓發出的請求帶有 JWT 字串,表明身份

用 JWT 來產生 Token 成了常見的方式之一。而流程也從建立並提供 Session ID 變成:

  1. 伺服器端收到登入請求後,驗證使用者
  2. 伺服器端產生和回傳一組帶有資訊、且僅能在伺服器端被驗證的 Token
  3. Token 被回傳後,存取在「客戶端」(大多存在瀏覽器的 Storage 當中)
  4. 往後客戶端向伺服器端發送請求時,皆附帶此 Token 讓伺服器端驗證
  5. 若伺服器端在請求中沒有找到 Token,回傳錯誤;若有找到 Token 則驗證

透過使用者主動提供 Token ,可以讓沒有 Token 的惡意使用者無法傷害你,避免跨網域請求偽造攻擊。

那伺服器方要怎樣產生 Token 給別人使用呢? Token 必須是安全不容易破解,且又能被認證的。不然如果有人製造出假的代幣,那可就損失慘重了。

JWT 組成

如果你今天要負責製造 Token ,那麼 JWT 是如何組成的也就變得很重要了! JWT 主要由下面三個部分組成:

base64(Header) + base64(Payload) + base64(Signature)
  • Header:

是一個 JSON ,可以在此設定 Token 種類為 JWT ,產生 Signature 要使用的雜湊演算法(alg)為 Base64 編碼。

  • Payload(= claims):

是一個 JSON ,使用者和相關的資訊都可以放置其中。通常會使用 exp 設定 Token 到期的時間、iat 設定 Token 簽發時間。

但請注意!重要的資訊如用戶密碼請不要放在這裡面。因為這裡的編碼能夠輕易被轉回來原始資訊,容易洩漏個資。

  • Signature:

這是透過在 Header 設定的雜湊演算法方式所產生的秘鑰。伺服器端在拿到 Token 後,透過解碼確認資料內容正確且未被變更,驗證對方身份。

需要創建 JWT Token 的人可以安裝並使用 jsonwebtoken 套件,那如果我是取得 Token 的一方,又要如何使用他表明身分呢?

使用 Token

在開始前要先提醒大家注意!

如果你今天是使用者,並從伺服器方取得了 Token ,請別讓其他人取得你的 Token ,因為這代表別人可以假裝成你,並使用你的 Token 為所欲為。

要在 axios 使用 Token 可以這樣打:

axios.defaults.headers.common[
  "Authorization"
] = `Bearer 取得的Token`

假設取得的 Token 是 abcdeuhifhieufh,那就是這樣:

axios.defaults.headers.common[
  "Authorization"
] = `Bearer abcdeuhifhieufh`

希望你喜歡今天的教學!晚安,我們明天見。

學習與參考資料

JS 學徒特訓班教學影片及練習題 49-50 關
透過 JWT 實作驗證機制: 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
淺談 Authentication 中集:Token-based authentication: https://medium.com/@vicxu/%E6%B7%BA%E8%AB%87-authentication-%E4%B8%AD%E9%9B%86-token-based-authentication-90139fbcb897
以 JSON Web Token 替代傳統 Token: https://yami.io/jwt/


上一篇
26 正則表達式
下一篇
28 製作訂房網站(上):頁面傳遞
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言