JWT登錄認證實戰模擬過程全紀錄

Posted on by

Token 認證流程

  • 作為目前最流行的跨域認證解決方案，JWT（JSON Web Token） 深受開發者的喜愛，主要流程如下：
  • 客戶端發送賬號和密碼請求登錄
  • 服務端收到請求，驗證賬號密碼是否通過
  • 驗證成功後，服務端會生成唯一的 token，並將其返回給客戶端
  • 客戶端接受到 token，將其存儲在 cookie 或者 localStroge 中
  • 之後每一次客戶端向服務端發送請求，都會通過 cookie 或者header 攜帶該 token
  • 服務端驗證 token 的有效性，通過才返回響應的數據

基於 Token 認證流程

Token 認證優點

  • 支持跨域訪問：Cookie 是不允許跨域訪問的，這一點對 Token 機制是不存在的，前提是傳輸的用戶認證信息通過 HTTP 頭傳輸
  • 無狀態： Token 機制在服務端不需要存儲 session 信息，因為 Token 自身包含瞭所有登錄用戶的信息，隻需要在客戶端的 cookie 或本地介質存儲狀態信息
  • 適用性更廣： 隻要是支持 http 協議的客戶端，就可以使用 token 認證。
  • 無需考慮CSRF： 由於不再依賴 cookie，所以采用 token 認證方式不會發生 CSRF，所以也就無需考慮 CSRF 的防禦

JWT 結構

  • 一個 JWT 實際上就是一個字符串，它由三部分組成：頭部、載荷與簽名。中間用點 . 分隔成三個部分。註意 JWT 內部是沒有換行的。

JWT 結構

🎨 頭部 / header

header 由兩部分組成： token 的類型 JWT 和算法名稱：HMAC、SHA256、RSA

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

🎨 載荷 / Payload

Payload 部分也是一個 JSON 對象，用來存放實際需要傳遞的數據。JWT 指定七個默認字段供選擇。

除瞭默認字段之外，你完全可以添加自己想要的任何字段，一般用戶登錄成功後，就將用戶信息存放在這裡

iss：發行人
exp：到期時間
sub：主題
aud：用戶
nbf：在此之前不可用
iat：發佈時間
jti：JWT ID用於標識該JWT

{
  "iss": "xxxxxxx",
  "sub": "xxxxxxx",
  "aud": "xxxxxxx",
  "user": [
  	  'username': '極客飛兔',
  	  'gender': 1,
  	  'nickname': '飛兔小哥' 
   ] 
}
  • 🎨 簽名 / Signature
  • 簽名部分是對上面的 頭部、載荷 兩部分數據進行的數據簽名
  • 為瞭保證數據不被篡改，則需要指定一個密鑰，而這個密鑰一般隻有你知道，並且存放在服務端
  • 生成簽名的代碼一般如下：
// 其中secret 是密鑰
String signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

JWT 基本使用

  • 客戶端收到服務器返回的 JWT，可以儲存在 Cookie 裡面， 也可以儲存在 localStorage
  • 然後 客戶端每次與服務器通信，都要帶上這個 JWT
  • 把 JWT 保存在 Cookie 裡面發送請求，這樣不能跨域
  • 更好的做法是放在 HTTP 請求的頭信息 Authorization 字段裡面
fetch('license/login', {
	headers: {
		'Authorization': 'X-TOKEN' + token
	}
})

實戰：使用 JWT 登錄認證

這裡使用 ThinkPHP6 整合 JWT 登錄認證進行實戰模擬

🎨 安裝 JWT 擴展

composer require firebase/php-jwt

🎨 封裝生成 JWT 和解密方法

<?php
/**
 * Desc: JWT認證
 * Author: autofelix
 * Time: 2022/07/04
 */

namespace app\services;

use app\Helper;
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

class JwtService
{
    protected $salt;

    public function __construct()
    {
        //從配置信息這種或取唯一字符串，你可以隨便寫比如md5('token')
        $this->salt = config('jwt.salt') || "autofelix";
    }

    // jwt生成
    public function generateToken($user)
    {
        $data = array(
            "iss" => 'autofelix',        //簽發者 可以為空
            "aud" => 'autofelix',             //面象的用戶，可以為空
            "iat" => Helper::getTimestamp(),   //簽發時間
            "nbf" => Helper::getTimestamp(),   //立馬生效
            "exp" => Helper::getTimestamp() + 7200, //token 過期時間 兩小時
            "user" => [ // 記錄用戶信息
                'id' => $user->id,
                'username' => $user->username,
                'truename' => $user->truename,
                'phone' => $user->phone,
                'email' => $user->email,
                'role_id' => $user->role_id
            ]
        );
        $jwt = JWT::encode($data, md5($this->salt), 'HS256');
        return $jwt;
    }

    // jwt解密
    public function chekToken($token)
    {
        JWT::$leeway = 60; //當前時間減去60，把時間留點餘地
        $decoded = JWT::decode($token, new Key(md5($this->salt), 'HS256'));
        return $decoded;
    }
}

🎨 用戶登錄後，生成 JWT 標識

<?php
declare (strict_types=1);

namespace app\controller;

use think\Request;
use app\ResponseCode;
use app\Helper;
use app\model\User as UserModel;
use app\services\JwtService;

class License
{
    public function login(Request $request)
    {
        $data = $request->only(['username', 'password', 'code']);

        // ....進行驗證的相關邏輯...
        $user = UserModel::where('username', $data['username'])->find();
		
		// 驗證通過生成 JWT, 返回給前端保存
        $token = (new JwtService())->generateToken($user);

        return json([
            'code' => ResponseCode::SUCCESS,
            'message' => '登錄成功',
            'data' => [
                'token' => $token
            ]
        ]);
    }
}

🎨 中間件驗證用戶是否登錄

在 middleware.php 註冊中間件

<?php
// 全局中間件定義文件
return [
	// ...其他中間件
    // JWT驗證
    \app\middleware\Auth::class
];

註冊中間件後，在權限驗證中間件中完善驗證邏輯

<?php
declare (strict_types=1);

namespace app\middleware;

use app\ResponseCode;
use app\services\JwtService;

class Auth
{
    private $router_white_list = ['login'];

    public function handle($request, \Closure $next)
    {
        if (!in_array($request->pathinfo(), $this->router_white_list)) {
            $token = $request->header('token');

            try {
            	// jwt 驗證
                $jwt = (new JwtService())->chekToken($token);
            } catch (\Throwable $e) {
                return json([
                    'code' => ResponseCode::ERROR,
                    'msg' => 'Token驗證失敗'
                ]);
            }

            $request->user = $jwt->user;
        }

        return $next($request);
    }
}

附：為什麼使用jwt而不使用session

  • session是將客戶端數據儲存在服務器的內存，當客服端的數據過多，服務器的內存開銷大；
  • session的數據儲存在某臺服務器，在分佈式的項目中無法做到共享；
  • jwt的安全性更好。

總而言之，如果使用瞭分佈式，切隻能在session和jwt裡面選的時候，就一定要選jwt。

總結

到此這篇關於JWT登錄認證實戰模擬的文章就介紹到這瞭,更多相關JWT登錄認證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：