JWT登錄認證實戰(zhàn)模擬過程全紀錄

更新時間：2022年08月10日 12:11:10 作者：極客飛兔

jwt是由用戶以用戶名、密碼登錄,服務端驗證后,會生成一個token,返回給客戶端,客戶端在下次訪問的過程中攜帶這個token,服務端責每次驗證這個token,下面這篇文章主要給大家介紹了關于JWT登錄認證實戰(zhàn)模擬的相關資料,需要的朋友可以參考下

Token 認證流程

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

基于 Token 認證流程

Token 認證優(yōu)點

支持跨域訪問：Cookie 是不允許跨域訪問的，這一點對 Token 機制是不存在的，前提是傳輸?shù)挠脩粽J證信息通過 HTTP 頭傳輸
無狀態(tài)： Token 機制在服務端不需要存儲 session 信息，因為 Token 自身包含了所有登錄用戶的信息，只需要在客戶端的 cookie 或本地介質(zhì)存儲狀態(tài)信息
適用性更廣：只要是支持 http 協(xié)議的客戶端，就可以使用 token 認證。
無需考慮CSRF：由于不再依賴 cookie，所以采用 token 認證方式不會發(fā)生 CSRF，所以也就無需考慮 CSRF 的防御

JWT 結構

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

JWT 結構

?? 頭部 / header

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

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

?? 載荷 / Payload

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

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

iss：發(fā)行人
exp：到期時間
sub：主題
aud：用戶
nbf：在此之前不可用
iat：發(fā)布時間
jti：JWT ID用于標識該JWT

{
  "iss": "xxxxxxx",
  "sub": "xxxxxxx",
  "aud": "xxxxxxx",
  "user": [
  	  'username': '極客飛兔',
  	  'gender': 1,
  	  'nickname': '飛兔小哥' 
   ] 
}

?? 簽名 / Signature
簽名部分是對上面的頭部、載荷兩部分數(shù)據(jù)進行的數(shù)據(jù)簽名
為了保證數(shù)據(jù)不被篡改，則需要指定一個密鑰，而這個密鑰一般只有你知道，并且存放在服務端
生成簽名的代碼一般如下：

// 其中secret 是密鑰
String signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

JWT 基本使用

客戶端收到服務器返回的 JWT，可以儲存在 Cookie 里面，也可以儲存在 localStorage
然后客戶端每次與服務器通信，都要帶上這個 JWT
把 JWT 保存在 Cookie 里面發(fā)送請求，這樣不能跨域
更好的做法是放在 HTTP 請求的頭信息 Authorization 字段里面

fetch('license/login', {
	headers: {
		'Authorization': 'X-TOKEN' + token
	}
})

實戰(zhàn)：使用 JWT 登錄認證

這里使用 ThinkPHP6 整合 JWT 登錄認證進行實戰(zhàn)模擬

?? 安裝 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',        //簽發(fā)者 可以為空
            "aud" => 'autofelix',             //面象的用戶，可以為空
            "iat" => Helper::getTimestamp(),   //簽發(fā)時間
            "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);
    }
}