天天看點

實戰模拟│JWT 登入認證

實戰模拟│JWT 登入認證

分布式跨域認證的解決新方案

目錄
  • 🎈 Token 認證流程
  • 🎈 Token 認證優點
  • 🎈 JWT 結構
  • 🎈 JWT 基本使用
  • 🎈 實戰:使用 JWT 登入認證

🎈 Token 認證流程

  • 作為目前最流行的跨域認證解決方案,

    JWT(JSON Web Token)

    深受開發者的喜愛,主要流程如下:
  • 用戶端發送賬号和密碼請求登入
  • 服務端收到請求,驗證賬号密碼是否通過
  • 驗證成功後,服務端會生成唯一的

    token

    ,并将其傳回給用戶端
  • 用戶端接受到

    token

    ,将其存儲在

    cookie

    或者

    localStroge

  • 之後每一次用戶端向服務端發送請求,都會通過

    cookie

    或者

    header

    攜帶該

    token

  • 服務端驗證

    token

    的有效性,通過才傳回響應的資料
實戰模拟│JWT 登入認證

基于 Token 認證流程

🎈 Token 認證優點

  • 支援跨域通路:

    Cookie

    是不允許跨域通路的,這一點對

    Token

    機制是不存在的,前提是傳輸的使用者認證資訊通過

    HTTP

    頭傳輸
  • 無狀态:

    Token

    機制在服務端不需要存儲

    session

    資訊,因為

    Token

    自身包含了所有登入使用者的資訊,隻需要在用戶端的

    cookie

    或本地媒體存儲狀态資訊
  • 适用性更廣: 隻要是支援

    http

    協定的用戶端,就可以使用

    token

    認證。
  • 無需考慮CSRF: 由于不再依賴

    cookie

    ,是以采用

    token

    認證方式不會發生

    CSRF

    ,是以也就無需考慮

    CSRF

    的防禦

🎈 JWT 結構

  • 一個

    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);
    }
}
           

繼續閱讀