首頁手記 JWT單點登錄原理項目實戰入門教程

JWT單點登錄原理項目實戰入門教程

標簽：

安全運維 API

概述

本文详细介绍了JWT单点登录原理及其项目实战过程，从JWT的基本概念和组成结构入手，逐步讲解了JWT在单点登录中的应用和优势。接着，文章展示了如何在实际项目中实现JWT生成与验证，并提供了前后端的代码示例。JWT单点登录原理项目实战涵盖环境搭建、代码编写、调试与部署全流程，旨在帮助开发者快速实现高效安全的单点登录方案。

JWT简介与基本概念

什么是JWT

JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全地传输信息。该信息是作为URL安全的JSON对象进行编码的。JWT由三部分组成：头部（Header）、载荷（Payload）、签名（Signature）。这样的结构使得JWT可以在不依赖额外的服务器端会话的情况下，提供一种安全的、可验证的身份验证方法。

JWT的设计目标是提供一种安全、简单的方式来交换客户端和服务器之间的信息。它的主要优点包括轻量化、简洁和易于使用。JWT在分布式系统中具有广泛的应用场景，特别是在需要进行跨域通信的情况下，可以简化身份验证和授权流程，从而减少服务器负载并提高安全性。

JWT的组成与结构

头部

JWT的头部通常包含两个基本的声明：

typ：这是JWT的类型，其值为“JWT”。
alg：这是用于生成签名的算法，推荐使用HMAC SHA256或RSA。

头部通常会通过Base64编码后，形成字符串，示例如下：

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

Base64编码后的形式为：

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

载荷

载荷包含声明，这些声明是有关令牌所有者的声明。声明可以是自定义的，也可以是预定义的：

iss：发行者
sub：主题
aud：受众
exp：过期时间
nbf：生效时间
iat：签发时间
jti：JWT的唯一标识符
用户信息：如用户名、权限等

示例如下：

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Base64编码后的形式为：

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ

签名

签名是为了验证JWT的完整性和真实性，它通过对头部和载荷的Base64编码后的字符串进行编码来生成。使用了私钥进行签名，这样接收方可以使用公钥来验证签名。签名的过程通常如下：

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

签名是通过将头部和载荷字符串拼接，并使用共享密钥进行Hash计算得到的。最终的JWT由以下三部分组成：

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

代码示例

const jwt = require('jsonwebtoken');

const header = {
  "typ": "JWT",
  "alg": "HS256"
};

const payload = {
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
};

const secret = 'mySecretKey';

// 生成JWT
const token = jwt.sign(payload, secret, { algorithm: 'HS256' });

// 解码JWT
const decoded = jwt.decode(token);

console.log('Decoded token:', decoded);

JWT的优势与应用场景

JWT的优势包括：

无状态：服务器不需要存储状态信息，所有的信息都在JWT中，可以降低服务器的负担。
轻量化：相比传统的Cookie方式或Session方式，JWT在体积上更小，传输速度更快。
安全性：通过HMAC或RSA等加密算法，JWT可以保证数据的安全性。

应用场景包括：

跨域请求: 在前后端分离的应用中，通过JWT可以简化跨域请求的身份验证过程。
API验证: 可以用于验证API请求中的身份信息。
分布式系统: 在分布式系统中，JWT可以帮助进行身份验证和授权。
单点登录: 使用JWT可以实现单点登录，用户只需要登录一次，即可访问多个应用。

单点登录的基本原理

单点登录的概念与意义

单点登录（Single Sign-On，SSO）是一种身份验证方法，它允许用户使用一组用户名和密码登录多个相关但独立的软件系统。通过这种方式，用户不必为每个系统分别进行身份验证，从而提高了用户体验并简化了管理过程。

单点登录的优势

简化认证过程：用户只需登录一次，即可访问多个系统。
提高安全性：减少了密码传递和存储的复杂性，有助于防止密码泄露。
简化用户管理：管理员可以在一个地方管理用户的身份和权限。

工作流程示例

假设用户访问系统A，系统A验证用户身份后生成一个JWT令牌。该令牌被返回给前端，前端将令牌存储在Cookie中。当用户访问系统B时，前端通过HTTP请求携带JWT令牌发送到系统B。系统B验证令牌的有效性，如果有效，则允许用户访问。

代码示例

// 用户登录并获取JWT令牌
axios.post('http://systema.com/login', { username: 'user', password: 'pass' })
  .then(response => {
    const token = response.data.token;
    // 将JWT令牌存储到Cookie或本地存储
    localStorage.setItem('jwtToken', token);
  })
  .catch(error => {
    console.error('Login failed:', error.response.data);
  });

// 用户访问系统B时携带JWT令牌
axios.get('http://systemb.com/profile', {
  headers: {
    Authorization: `Bearer ${localStorage.getItem('jwtToken')}`
  }
})
  .then(response => {
    console.log('User profile:', response.data);
  })
  .catch(error => {
    console.error('Profile fetch failed:', error.response.data);
  });

单点登录与多系统集成

在多系统集成中，单点登录可以显著提高用户体验并简化管理。为了实现这一点，通常需要一个中心化的身份验证服务，该服务负责统一管理所有系统的登录状态。中心化服务生成一个有效的JWT令牌，该令牌可以在多个系统之间传递。

中心化身份验证服务

中心化身份验证服务负责以下任务：

用户身份验证：验证提供的用户名和密码是否有效。
生成JWT令牌：成功验证身份后，生成JWT令牌。
令牌验证：接收系统请求时验证JWT令牌是否有效。

跨域问题

在多系统集成中，跨域问题是一个常见的挑战。通常，可以使用CORS（跨域资源共享）来允许前端代码从一个域访问另一个域的资源。通过配置后端服务器的CORS策略，可以允许特定的域访问资源。

CORS配置示例

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  next();
});

JWT实现单点登录的原理

JWT在单点登录中的作用

JWT在单点登录中扮演着关键角色。它通过携带用户的身份信息，使得用户在访问不同系统时无需再次进行身份验证。此外，JWT的无状态特性使得单点登录可以在多个分布式系统中实现，减少了服务器的负担。

无状态特性

JWT的无状态特性意味着每个请求都可以独立处理，而不需要依赖于服务器中的会话信息。这样可以提高系统的可扩展性和安全性。

JWT生成与验证的流程

生成JWT令牌和验证令牌是单点登录的关键步骤。生成令牌时，需要包含用户的身份信息和相关声明。验证令牌时，则需要确保令牌的有效性和完整性。

生成JWT令牌

为了生成一个JWT令牌，需要使用JWT库将用户身份信息编码成JSON字符串，并使用签名算法生成签名。例如，使用Node.js中的jsonwebtoken库：

const jwt = require('jsonwebtoken');
const secret = 'mySecretKey';

function generateToken(user) {
  const payload = {
    sub: user.id,
    name: user.name,
    exp: Math.floor(Date.now() / 1000) + (30 * 60) // 30分钟有效期
  };
  return jwt.sign(payload, secret, { algorithm: 'HS256' });
}

验证JWT令牌

验证令牌同样需要使用JWT库，通过提供的密钥解码令牌并验证其有效性和完整性。例如，使用Node.js中的jsonwebtoken库：

function verifyToken(token) {
  return jwt.verify(token, secret, (err, decoded) => {
    if (err) {
      return null; // 验证失败
    }
    return decoded; // 验证成功
  });
}

刷新JWT令牌

在单点登录中，用户访问不同系统时会携带JWT令牌进行身份验证。为了确保令牌的有效性，通常需要实现令牌刷新机制。当令牌即将过期时，用户可以使用刷新令牌来获取新的JWT令牌。

刷新令牌

刷新令牌是一种特殊的令牌，用于在JWT令牌过期后获取新的令牌。刷新令牌通常具有更长的有效期，确保用户在一次登录后可以长时间保持登录状态。

function generateRefreshToken(user) {
  const payload = {
    sub: user.id,
    name: user.name,
    exp: Math.floor(Date.now() / 1000) + (7 * 24 * 60 * 60) // 7天有效期
  };
  return jwt.sign(payload, refreshSecret, { algorithm: 'HS256' });
}

刷新JWT令牌

当JWT令牌过期时，用户可以使用刷新令牌来获取新的JWT令牌。服务器验证刷新令牌的有效性后，生成新的JWT令牌并返回给用户。

function refreshToken(refreshToken) {
  const decoded = jwt.verify(refreshToken, refreshSecret);
  if (!decoded) {
    return null; // 验证失败
  }
  return generateToken(decoded);
}

项目实战准备

项目环境搭建

在开始项目开发之前，需要搭建好开发环境。这里我们使用Node.js和Express框架来构建后端服务，并使用Vue.js来构建前端应用。

安装Node.js和npm

首先确保安装了最新版本的Node.js和npm。

# 检查Node.js和npm版本
node -v
npm -v

如果未安装，可以从官网下载安装包进行安装。

创建项目

使用npm初始化一个新的Node.js项目：

npm init -y

安装依赖

安装Express和jsonwebtoken库：

npm install express jsonwebtoken

安装Vue.js和相关依赖：

npm install -g vue-cli
vue create frontend
cd frontend
npm install axios vue-router

数据库创建与用户表创建

这里假设使用SQLite作为数据库存储用户信息。

安装SQLite库：

npm install sqlite3

创建用户表：

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./db.sqlite');

db.serialize(() => {
  db.run('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, password TEXT NOT NULL)');
});

db.close();

开发工具与库的选择

后端开发工具

Node.js：JavaScript运行时环境。
Express：基于Node.js的Web应用框架。
jsonwebtoken：用于生成和验证JWT的库。

前端开发工具

Vue.js：前端JavaScript框架。
axios：用于HTTP请求。
vue-router：Vue.js的官方路由管理器。

项目需求与设计

项目需求

用户登录后，生成JWT令牌并返回给前端。
前端携带JWT令牌访问其他应用。
后端验证JWT令牌的有效性，并允许用户访问。

项目设计

项目分为前后端两部分：

后端：负责生成JWT令牌、验证令牌以及刷新令牌。
前端：负责用户登录、存储令牌、携带令牌进行请求。

数据库设计

假设使用SQLite作为数据库，存储用户信息。

安装SQLite库：

npm install sqlite3

创建用户表：

CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT NOT NULL,
    password TEXT NOT NULL
);

示例代码

以下是创建数据库和用户表的示例代码：

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./db.sqlite');

db.serialize(() => {
  db.run('CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, password TEXT NOT NULL)');
});

db.close();

JWT单点登录项目实战

编写JWT生成与验证代码

在后端服务中，需要编写代码来生成JWT令牌和验证令牌。

生成JWT令牌

为用户生成一个JWT令牌：

const jwt = require('jsonwebtoken');
const secret = 'mySecretKey';

function generateToken(user) {
  const payload = {
    sub: user.id,
    name: user.name,
    exp: Math.floor(Date.now() / 1000) + (30 * 60) // 30分钟有效期
  };
  return jwt.sign(payload, secret, { algorithm: 'HS256' });
}

验证JWT令牌

验证前端传递的JWT令牌：

function verifyToken(token) {
  return jwt.verify(token, secret, (err, decoded) => {
    if (err) {
      return null; // 验证失败
    }
    return decoded; // 验证成功
  });
}

实现用户登录与认证流程

用户登录

处理用户登录请求：

const express = require('express');
const bodyParser = require('body-parser');
const { generateToken } = require('./token');
const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./db.sqlite');

const app = express();
app.use(bodyParser.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  db.get('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, rows) => {
    if (err) {
      return res.status(500).send('Database error');
    }
    if (rows.length === 0) {
      return res.status(401).send('Invalid credentials');
    }
    const user = rows[0];
    const token = generateToken(user);
    res.send({ token });
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

用户认证

处理用户认证请求：

app.get('/profile', (req, res) => {
  const token = req.headers.authorization;
  if (!token) {
    return res.status(401).send('Unauthorized');
  }
  const decoded = verifyToken(token);
  if (!decoded) {
    return res.status(401).send('Unauthorized');
  }
  res.send({ user: decoded });
});

处理前端与后端的交互

前端登录逻辑

处理用户的登录请求：

import axios from 'axios';

const login = async (username, password) => {
  try {
    const response = await axios.post('http://localhost:3000/login', { username, password });
    localStorage.setItem('token', response.data.token);
    console.log('Login successful');
  } catch (error) {
    console.error('Login failed:', error.response.data);
  }
};

前端携带JWT令牌访问其他应用

处理携带JWT令牌的请求：

const fetchProfile = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('http://localhost:3000/profile', {
      headers: {
        authorization: token,
      },
    });
    console.log('Profile:', response.data);
  } catch (error) {
    console.error('Profile fetch failed:', error.response.data);
  }
};

示例代码

以下是完整的后端服务代码：

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const sqlite3 = require('sqlite3').verbose();
const { generateToken, verifyToken } = require('./token');

let db = new sqlite3.Database('./db.sqlite');

const app = express();
app.use(bodyParser.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  db.get('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, rows) => {
    if (err) {
      return res.status(500).send('Database error');
    }
    if (rows.length === 0) {
      return res.status(401).send('Invalid credentials');
    }
    const user = rows[0];
    const token = generateToken(user);
    res.send({ token });
  });
});

app.get('/profile', (req, res) => {
  const token = req.headers.authorization;
  if (!token) {
    return res.status(401).send('Unauthorized');
  }
  const decoded = verifyToken(token);
  if (!decoded) {
    return res.status(401).send('Unauthorized');
  }
  res.send({ user: decoded });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

以下是前端代码：

import axios from 'axios';

const login = async (username, password) => {
  try {
    const response = await axios.post('http://localhost:3000/login', { username, password });
    localStorage.setItem('token', response.data.token);
    console.log('Login successful');
  } catch (error) {
    console.error('Login failed:', error.response.data);
  }
};

const fetchProfile = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('http://localhost:3000/profile', {
      headers: {
        authorization: token,
      },
    });
    console.log('Profile:', response.data);
  } catch (error) {
    console.error('Profile fetch failed:', error.response.data);
  }
};

login('testuser', 'testpassword');
fetchProfile();

项目调试与部署

常见问题排查与解决

在开发过程中，可能会遇到各种问题。以下是一些常见的问题及其解决方法：

问题1：JWT验证失败

如果JWT验证失败，通常是因为令牌无效或签名错误。确保在生成和验证令牌时使用相同的密钥。

问题2：跨域请求失败

如果跨域请求失败，通常是因为CORS配置不正确。确保后端服务器正确设置了CORS响应头。

示例代码

服务器端配置CORS：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  next();
});

客户端请求时携带Authorization头：

import axios from 'axios';

const fetchProfile = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('http://localhost:3000/profile', {
      headers: {
        authorization: `Bearer ${token}`,
      },
    });
    console.log('Profile:', response.data);
  } catch (error) {
    console.error('Profile fetch failed:', error.response.data);
  }
};

项目测试与优化

测试项目

在开发完成后，需要进行充分的测试，确保项目符合预期功能。

单元测试

为关键功能编写单元测试，确保逻辑正确。例如，使用Jest和Supertest库测试后端服务：

npm install jest supertest

示例测试代码：

const request = require('supertest');
const app = require('./app');

describe('Authentication', () => {
  it('should return a token on successful login', async () => {
    const response = await request(app)
      .post('/login')
      .send({ username: 'testuser', password: 'testpassword' });
    expect(response.status).toBe(200);
    expect(response.body.token).toBeDefined();
  });

  it('should return an error on invalid login', async () => {
    const response = await request(app)
      .post('/login')
      .send({ username: 'testuser', password: 'wrongpassword' });
    expect(response.status).toBe(401);
  });

  it('should return user profile on valid token', async () => {
    const loginResponse = await request(app)
      .post('/login')
      .send({ username: 'testuser', password: 'testpassword' });
    const token = loginResponse.body.token;

    const response = await request(app)
      .get('/profile')
      .set('Authorization', `Bearer ${token}`);
    expect(response.status).toBe(200);
  });
});

性能测试

使用工具如LoadRunner或Apache JMeter进行性能测试，确保系统在高并发情况下的稳定性。

优化项目

根据测试结果，对项目进行适当优化。例如：

优化数据库查询：确保查询高效，减少响应时间。
优化代码逻辑：简化复杂的逻辑，提高代码可读性和可维护性。
缓存策略：合理使用缓存减少数据库压力。

项目部署与上线

在项目完成并通过测试后，可以将其部署到生产环境。

部署流程

构建项目：确保项目可以无错误地运行。
配置环境变量：设置生产环境变量。
部署到服务器：将项目部署到服务器，例如使用Docker容器化部署。

部署示例

使用Docker部署

创建Dockerfile：

FROM node:14

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["node", "server.js"]

构建并运行Docker容器：

docker build -t jwt-sso .
docker run -p 3000:3000 jwt-sso

部署注意事项

安全性：确保生产环境的安全配置，例如使用HTTPS。
监控：部署后持续监控项目性能和错误。
备份：定期备份数据以防止数据丢失。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

陪伴而非守候

手記
篇

粉絲

63

獲贊與收藏

285

關注作者，訂閱最新文章

閱讀免費教程

Java 并發原理入門教程

26個小節 40021 580

HTTP 入門教程

28個小節 38611 666

Hibernate 入門教程

29個小節 6443 97

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JWT單點登錄原理項目實戰入門教程

头部

载荷

签名

代码示例

单点登录的优势

工作流程示例

代码示例

中心化身份验证服务

跨域问题

CORS配置示例

无状态特性

生成JWT令牌

验证JWT令牌

刷新JWT令牌

刷新令牌

刷新JWT令牌

安装Node.js和npm

创建项目

安装依赖

数据库创建与用户表创建

后端开发工具

前端开发工具

项目需求

项目设计

数据库设计

示例代码

生成JWT令牌

验证JWT令牌

用户登录

用户认证

前端登录逻辑

前端携带JWT令牌访问其他应用

示例代码

问题1：JWT验证失败

问题2：跨域请求失败

示例代码

测试项目

单元测试

性能测试

优化项目

部署流程

部署示例

使用Docker部署

部署注意事项

閱讀免費教程