koa2實現jwt登錄

来源:https://www.cnblogs.com/wangzirui98/archive/2020/05/03/12824702.html
-Advertisement-
Play Games

1.jwt介紹 介紹部分轉載自阮一峰《JSON Web Token 入門教程》 0.session 登錄 1、用戶向伺服器發送用戶名和密碼。 2、伺服器驗證通過後，在當前對話（session）裡面保存相關數據，比如用戶角色、登錄時間等等。 3、伺服器向用戶返回一個 session_id，寫入用戶的 ...


1.jwt介紹

介紹部分轉載自阮一峰《JSON Web Token 入門教程》

0.session 登錄

1、用戶向伺服器發送用戶名和密碼。

2、伺服器驗證通過後，在當前對話（session）裡面保存相關數據，比如用戶角色、登錄時間等等。

3、伺服器向用戶返回一個 session_id，寫入用戶的 Cookie。

4、用戶隨後的每一次請求，都會通過 Cookie，將 session_id 傳回伺服器。

5、伺服器收到 session_id，找到前期保存的數據，由此得知用戶的身份。

1.session登錄存在的問題

這種模式的問題在於，擴展性（scaling）不好。單機當然沒有問題，如果是伺服器集群，或者是跨域的服務導向架構，就要求 session 數據共用，每台伺服器都能夠讀取 session。

舉例來說，A 網站和 B 網站是同一家公司的關聯服務。現在要求，用戶只要在其中一個網站登錄，再訪問另一個網站就會自動登錄，請問怎麼實現？

一種解決方案是 session 數據持久化，寫入資料庫或別的持久層。各種服務收到請求後，都向持久層請求數據。這種方案的優點是架構清晰，缺點是工程量比較大。另外，持久層萬一掛了，就會單點失敗。

另一種方案是伺服器索性不保存 session 數據了，所有數據都保存在客戶端，每次請求都發回伺服器。JWT 就是這種方案的一個代表。

2.原理

JWT 的原理是，伺服器認證以後，生成一個 JSON 對象，發回給用戶，就像下麵這樣。

{
  "姓名": "張三",
  "角色": "管理員",
  "到期時間": "2018年7月1日0點0分"
}

以後，用戶與服務端通信的時候，都要發回這個 JSON 對象。伺服器完全只靠這個對象認定用戶身份。為了防止用戶篡改數據，伺服器在生成這個對象的時候，會加上簽名（詳見後文）。

伺服器就不保存任何 session 數據了，也就是說，伺服器變成無狀態了，從而比較容易實現擴展。

3.JWT 的數據結構

實際的 JWT 大概就像下麵這樣。

img

它是一個很長的字元串，中間用點（.）分隔成三個部分。註意，JWT 內部是沒有換行的，這裡只是為了便於展示，將它寫成了幾行。

JWT 的三個部分依次如下。

  • Header（頭部）
  • Payload（負載）
  • Signature（簽名）

寫成一行，就是下麵的樣子。

Header.Payload.Signature

img

下麵依次介紹這三個部分。

3.1 Header

Header 部分是一個 JSON 對象，描述 JWT 的元數據，通常是下麵的樣子。

{
  "alg": "HS256",
  "typ": "JWT"
}

上面代碼中，alg屬性表示簽名的演算法（algorithm），預設是 HMAC SHA256（寫成 HS256）；typ屬性表示這個令牌（token）的類型（type），JWT 令牌統一寫為JWT。

最後，將上面的 JSON 對象使用 Base64URL 演算法（詳見後文）轉成字元串。

3.2 Payload

Payload 部分也是一個 JSON 對象，用來存放實際需要傳遞的數據。JWT 規定了7個官方欄位，供選用。

  • iss (issuer)：簽發人
  • exp (expiration time)：過期時間
  • sub (subject)：主題
  • aud (audience)：受眾
  • nbf (Not Before)：生效時間
  • iat (Issued At)：簽發時間
  • jti (JWT ID)：編號

除了官方欄位，你還可以在這個部分定義私有欄位，下麵就是一個例子。

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

註意，JWT 預設是不加密的，任何人都可以讀到，所以不要把秘密信息放在這個部分。

這個 JSON 對象也要使用 Base64URL 演算法轉成字元串。

3.3 Signature

Signature 部分是對前兩部分的簽名，防止數據篡改。

首先，需要指定一個密鑰（secret）。這個密鑰只有伺服器才知道，不能泄露給用戶。然後，使用 Header 裡面指定的簽名演算法（預設是 HMAC SHA256），按照下麵的公式產生簽名。

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

算出簽名以後，把 Header、Payload、Signature 三個部分拼成一個字元串，每個部分之間用"點"（.）分隔，就可以返回給用戶。

3.4 Base64URL

前面提到，Header 和 Payload 串型化的演算法是 Base64URL。這個演算法跟 Base64 演算法基本類似，但有一些小的不同。

JWT 作為一個令牌（token），有些場合可能會放到 URL（比如 api.example.com/?token=xxx）。Base64 有三個字元+、/和=，在 URL 裡面有特殊含義，所以要被替換掉：=被省略、+替換成-，/替換成_ 。這就是 Base64URL 演算法。

4.JWT 的使用方式

客戶端收到伺服器返回的 JWT，可以儲存在 Cookie 裡面，也可以儲存在 localStorage。

此後，客戶端每次與伺服器通信，都要帶上這個 JWT。你可以把它放在 Cookie 裡面自動發送，但是這樣不能跨域，所以更好的做法是放在 HTTP 請求的頭信息Authorization欄位裡面。

Authorization: Bearer <token>

另一種做法是，跨域的時候，JWT 就放在 POST 請求的數據體裡面。

5.JWT 的幾個特點

（1）JWT 預設是不加密，但也是可以加密的。生成原始 Token 以後，可以用密鑰再加密一次。

（2）JWT 不加密的情況下，不能將秘密數據寫入 JWT。

（3）JWT 不僅可以用於認證，也可以用於交換信息。有效使用 JWT，可以降低伺服器查詢資料庫的次數。

（4）JWT 的最大缺點是，由於伺服器不保存 session 狀態，因此無法在使用過程中廢止某個 token，或者更改 token 的許可權。也就是說，一旦 JWT 簽發了，在到期之前就會始終有效，除非伺服器部署額外的邏輯。

（5）JWT 本身包含了認證信息，一旦泄露，任何人都可以獲得該令牌的所有許可權。為了減少盜用，JWT 的有效期應該設置得比較短。對於一些比較重要的許可權，使用時應該再次對用戶進行認證。

（6）為了減少盜用，JWT 不應該使用 HTTP 協議明碼傳輸，要使用 HTTPS 協議傳輸。

2.koa2中使用jwt

1.jsonwebtoken插件

這個插件提供了生成jwt，校驗jwt，解碼jwt的能力。在項目中，我們僅需要使用生成jwt，和解碼jwt的能力。就可以了。

生成token

const jsonwebtoken = require('jsonwebtoken');

const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}

const SECRET = 'laotie666'; //隨意輸入

const token = jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )

這樣就生成了一串字元串，token現在的值是：

"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemhhbmdzYW4iLCJpZCI6MTAwLCJpYXQiOjE1ODg1MTM2NTksImV4cCI6MTU4ODUxNzI1OX0.jFXifMFFizqRUK0V5clFql4VrtrQiTaD_wpsogNi6TY"

如果我想要獲取這上面的信息，不需要知道秘鑰，直接使用jsonwebtoken這個插件就可以了。

const jsonwebtoken = require('jsonwebtoken');

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemhhbmdzYW4iLCJpZCI6MTAwLCJpYXQiOjE1ODg1MTM2NTksImV4cCI6MTU4ODUxNzI1OX0.jFXifMFFizqRUK0V5clFql4VrtrQiTaD_wpsogNi6TY"

console.log(jsonwebtoken.decode(token)); // { name: 'zhangsan', id: 100, iat: 1588511684, exp: 1588515284 }

2.koa-jwt 中間件的使用

這個中間件提供了一個校驗方法，可以在項目中全局校驗，兩行代碼就搞定了。

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

我們發送請求的時候把剛纔生成的token放到請求頭Authorization上，如果這個token里的秘鑰，等於koajwt里第一個參數中的secret屬性，那麼就可以通過用戶驗證，否則返回401錯誤。

如果想自定義處理這個錯誤，可以在上方添加中間件用next().catch()對401錯誤進行捕獲

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      // 自定義返回結果
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

3.結合起來

分為如下幾個步驟

  • 引入相應的插件

    const koa = require('koa');
const koajwt = require('koa-jwt');
const jsonwebtoken = require('jsonwebtoken');
const koabody = require('koa-body');
const app = new koa();

  • 定一個秘鑰

    const SECRET = 'laotie666';

  • 做一個虛假的信息，不用連接資料庫了

    const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}

  • 首先我們先進行登錄操作，獲取到body里的用戶名密碼，和資料庫進行比對，如果無誤就用jwt插件生成token然後由瀏覽器locationstage保存起來.

    app.use(async (ctx, next) => {
  if (ctx.path === '/api/login' && ctx.method === 'POST') {
    // 登錄
    // 判斷用戶名密碼是否匹配
    let checkUser = ctx.request.body.username == USER.username && ctx.request.body.password == USER.password;
    if (checkUser) {
      ctx.body = {
        code: 200,
        msg: '登錄成功',
        token: jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )
      }
    } else {
      // 登錄失敗, 用戶名密碼不正確
      ctx.body = {
        code: 400,
        msg: '用戶名密碼不匹配'
      }
    }

  • 下次我們發送其他請求的時候，我們將token取出來，放到請求頭裡的Authorization里，然後給token前面加上Bearer 和一個空格 。

    UTOOLS1588516420068.png

  • 這樣koa-jwt插件就可以對token進行驗證，驗證就是檢查秘鑰是否相等，相等就可以接著進行請求。

    // 中間件對401錯誤進行
app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

  • 具體請求

    else if (ctx.path === '/api/user' && ctx.method === 'GET') {
    // 獲取用戶信息
    // 中間件統一驗證token
    let token = ctx.header.authorization;
    let payload = await util.promisify(jsonwebtoken.verify)(token.split(' ')[1], SECRET);
    console.log(payload);
    ctx.body = {
      code: 200,
      data: payload,
      msg: '請求成功'
    }
  }

  • 登錄請求

    UTOOLS1588519611855.png

  • 不攜帶token

    UTOOLS1588519641870.png

  • 攜帶token

    UTOOLS1588519702469.png

4.完整代碼

直接node 文件名.js執行即可啟動服務。

const koa = require('koa');
const koajwt = require('koa-jwt');
const jsonwebtoken = require('jsonwebtoken');
const util = require('util');
const koabody = require('koa-body');
const app = new koa();

const SECRET = 'laotie666'; // demo，可更換

app.use(koabody());

// 中間件對token進行驗證
app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (err.status === 401) {
      ctx.status = 401;
      ctx.body = {
        code: 401,
        msg: err.message
      }
    } else {
      throw err;
    }
  })
});

app.use(koajwt({ secret: SECRET }).unless({
  // 登錄介面不需要驗證
  path: [/^\/api\/login/]
}));

// 示例
const USER = {
  username: 'zhangsan',
  password: '123456',
  id: 100
}
// 登錄介面簽發token, 為了簡便不使用router
app.use(async (ctx, next) => {
  if (ctx.path === '/api/login' && ctx.method === 'POST') {
    // 登錄
    // 判斷用戶名密碼是否匹配
    let checkUser = ctx.request.body.username == USER.username && ctx.request.body.password == USER.password;
    if (checkUser) {
      ctx.body = {
        code: 200,
        msg: '登錄成功',
        token: jsonwebtoken.sign(
          { name: USER.username, id: USER.id },  // 加密userToken
          SECRET,
          { expiresIn: '1h' }
        )
      }
    } else {
      // 登錄失敗, 用戶名密碼不正確
      ctx.body = {
        code: 400,
        msg: '用戶名密碼不匹配'
      }
    }
  } else if (ctx.path === '/api/user' && ctx.method === 'GET') {
    // 獲取用戶信息
    // 中間件統一驗證token
    let token = ctx.header.authorization;
    let payload = await util.promisify(jsonwebtoken.verify)(token.split(' ')[1], SECRET);
    console.log(payload);
    ctx.body = {
      code: 200,
      data: payload,
      msg: '請求成功'
    }
  }
})
app.listen(3000, function () {
  console.log('listening 3000');
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql的存儲過程
    什麼是存儲過程 1. 一組可編程的函數，是為了完成特定功能的SQL語句集 經編譯創建並保存在資料庫中，用戶可通過指定存儲過程的名字並給定參數(需要時)來調用執行。 2. 存儲過程就是具有名字的一段代碼，用來完成一個特定的功能。 3. 創建的存儲過程保存在資料庫的數據字典中 為什麼要用存儲過程 1. ...
  • mysql的視圖
    什麼是視圖 1. 視圖是一個虛擬表，其內容由查詢定義。 2. 同真實的表一樣，視圖包含一系列帶有名稱的列和行數據。 3. 行和列數據來自定義視圖的查詢所引用的表，並且在引用視圖時動態生成。 4. 簡單的來說視圖是由select結果組成的表； 視圖的特性 1. 視圖是對若幹張基本表的引用，一張虛表，查 ...
  • mysql的索引
    什麼是索引 1. 幫助Mysql高效獲取數據的數據結構 2. 索引就是數據結構 3. 類似新華字典的索引目錄,可以通過索引目錄快速查到你想要的字 4. 排好序的快速查找數據 為什麼要建立索引 1. 提高查詢效率 沒有排序之前一個一個往後找 通過索引進行排序之後,可以直接定義到想要的位置 2. 排好序 ...
  • mysql許可權操作
    @ "TOC" 什麼是許可權 限制一個用戶能夠做什麼事情，在MySQL中，可以設置全局許可權，指定資料庫許可權，指定表許可權，指定欄位許可權 有哪些許可權 1. create：創建資料庫、表或索引許可權 2. DROP：除資料庫或表許可權 3. ALTER：ALTER更改表，比如添加欄位、索引等 4. DELETE ...
  • mysql事務操作
    什麼是事務 1. 不可分割的操作,假設該操作有ABCD四個步驟組成. 2. 若ABCD四個步驟都成功完成,則認為事務成功. 3. 若ABCD中任意一個步驟操作失敗,則認為事務失敗 4. 每條sql語句都是一個事務 5. 事務只對DML語句有效,對於DQL無效 事務的ACID 原子性（Atomicit ...
  • 字元串相似度處理函數
    oracle裡面查比如存儲過程裡面與表SALES有關jobs: SELECT * FROM (SELECT a.name,upper(b.what)AS what,SYS.UTL_MATCH.edit_distance_similarity (a.name,upper(b.what)) AS sim ...
  • 歷史上的今天mysql資料庫包含詳情分類以及圖片
    歷史上的今天mysql資料庫包含詳情分類以及圖片 "連接" ...
  • Promis.then()
    1 function cook() { 2 console.log('開始做飯。'); 3 var p = new Promise(function (resolve, reject) { 4 setTimeout(function () { 5 console.log('做飯完畢！'); 6 re ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類