JWT单点登录原理学习：从入门到实践教程

本文主要是介绍JWT单点登录原理学习：从入门到实践教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

本文详细介绍了JWT单点登录的原理和实现方法，帮助读者理解JWT的工作机制和组成部分。通过具体步骤和代码示例，展示了如何使用JWT实现单点登录，并讨论了JWT单点登录的优势和未来的安全发展趋势。JWT单点登录原理学习涵盖了从理论到实战的全过程。

JWT基础概念介绍

什么是JWT

JWT (JSON Web Token) 是一种开放标准 (RFC 7519)，用于在网络间安全地传输信息。JWT由三部分组成的字符串，它们之间由点（.）分隔。JWT由三部分组成：头部（Header）、负载（Payload）、签名（Signature）。它是一个紧凑的、自包含的标准，广泛用于身份验证和信息交换领域。

JWT的组成部分

头部（Header）：包含令牌的类型（"JWT"）以及所使用的签名算法，例如：HMAC SHA256 或 RSA。
```
{
 "alg": "HS256",
 "typ": "JWT"
}
```
负载（Payload）：包含声明（claims），声明是关于实体（例如，用户、组织、资源）或其他任何信息的声明。标准的声明如：iss (颁发者)，iat (发行时间)，exp (过期时间)，nbf (生效时间)，aud (受众)，sub (主题)，jti (JWT ID)。
```
{
 "sub": "1234567890",
 "name": "John Doe",
 "iat": 1516239022
}
```
签名（Signature）：签名是基于Header和Payload，然后使用一个密钥以及Header中指定的算法生成的。签名确保了JWT在传输过程中的完整性和未被篡改。

JWT的工作方式

生成JWT：服务器（通常是认证服务器）生成一个JWT，该JWT包含用户身份信息（如用户名或ID）以及其他元数据。
传输JWT：客户端（例如浏览器或移动应用）将JWT发送给服务器，通常在每次HTTP请求的Authorization头中。
验证JWT：服务器收到JWT之后，会验证令牌的签名，并进行其他必要的验证（如过期时间、受众等）。
响应请求：如果JWT有效并经过验证，服务器将返回用户的请求信息；否则，返回错误信息。

单点登录基本原理

单点登录的意义

单点登录 (Single Sign-On, SSO) 是一种身份验证模式。在该模式下，用户只需一次登录，就可以访问多个相关系统或服务，而无需重复进行身份验证。这可以提高用户体验，减少因多次输入凭据而产生的错误，同时简化管理员的维护工作。

单点登录的实现方式

基于Cookie的SSO：用户在第一个系统中登录后，服务器将生成一个唯一的会话ID，并将其存储在用户的浏览器中（通过设置Cookie）。当用户访问其他系统时，这些系统会读取该Cookie并验证会话ID，从而让用户保持登录状态。
基于Token的SSO：通过生成一个一次性或长期有效的访问令牌（如JWT），用户可以使用该令牌访问多个系统，而无需再次验证身份。每个系统都可以通过验证令牌来确认用户身份。
基于OAuth的SSO：OAuth是一种开放的授权协议，可以实现SSO功能，允许第三方应用程序在用户许可的情况下访问其资源，而无需共享密码。

如何使用JWT实现单点登录

JWT在单点登录中的作用

在基于JWT的SSO实现中，JWT被用作访问令牌。当用户首次登录时，服务器会生成一个JWT并返回给客户端。客户端可以在后续的请求中使用这个JWT来访问其他受保护的资源和服务，从而实现单点登录。

使用JWT实现单点登录的步骤

客户端向身份验证服务器请求登录：用户尝试访问一个需要认证的资源，客户端将请求发送到身份验证服务器。
身份验证服务器验证用户身份：身份验证服务器会要求用户提供凭据（如用户名和密码），并验证其有效性。
身份验证服务器生成JWT：如果身份验证成功，服务器将生成一个JWT，其中包含用户的身份信息和其他必要的元数据。
身份验证服务器返回JWT给客户端：服务器将生成的JWT返回给客户端，客户端可以将其存储在本地（如存储在浏览器的本地存储或Cookie中）。
客户端在后续请求中包含JWT：当客户端向其他受保护的资源和服务发送请求时，它会在请求头中包含JWT（通常是在Authorization头中）。
资源服务器验证JWT：接收到请求的资源服务器会验证JWT的签名，并检查其有效性（如是否已过期、是否被篡改等）。
资源服务器响应请求：如果JWT有效，资源服务器将根据用户的权限返回请求的资源；否则，会返回一个错误。

JWT单点登录的实战演练

准备开发环境

为了实现JWT单点登录，我们需要准备以下环境：

服务器：运行Node.js和Express.js的服务器，用于处理身份验证和资源请求。
客户端：HTML页面和JavaScript代码，用于模拟用户界面和请求。
数据库：用于存储用户信息等数据。

安装相关依赖：

npm install express body-parser jsonwebtoken bcryptjs express-session

编写代码示例

服务器端代码

身份验证接口：处理用户登录请求，生成并返回JWT。

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const session = require('express-session');
const app = express();
const secret = 'yourSecretKey'; // 用于签名的密钥

app.use(bodyParser.json());
app.use(session({
 secret: 'secret',
 resave: false,
 saveUninitialized: false
}));

// 模拟用户数据
const users = {
 'john': 'password123'
};

// 登录接口
app.post('/login', (req, res) => {
 const { username, password } = req.body;
 if (users[username] && bcrypt.compareSync(password, users[username])) {
   const token = jwt.sign({ username: username }, secret, { expiresIn: '1h' });
   res.json({ token: token });
 } else {
   res.status = 401;
   res.json({ message: 'Invalid credentials' });
 }
});

// 保护接口
app.get('/protected', (req, res) => {
 if (req.isAuthenticated()) {
   res.json({ message: 'You can access protected resources!' });
 } else {
   res.status = 403;
   res.json({ message: 'Unauthorized' });
 }
});

// 检查JWT的有效性
const authenticateJWT = (req, res, next) => {
 const token = req.headers.authorization;
 if (!token) {
   return res.status(401).json({ message: 'No token provided.' });
 }

 jwt.verify(token, secret, (err, user) => {
   if (err) {
     return res.status(403).json({ message: 'Failed to authenticate token.' });
   }
   req.user = user;
   next();
 });
};

// 设置中间件
app.use(authenticateJWT, (req, res, next) => {
 next();
});

// 启动服务器
app.listen(3000, () => {
 console.log('Server running on port 3000');
});

客户端代码：模拟用户登录和访问受保护资源的请求。

<!DOCTYPE html>
<html>
<head>
 <title>JWT SSO Example</title>
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 <h1>Login</h1>
 <form id="loginForm">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
   <label for="password">Password:</label>
   <input type="password" id="password" name="password">
   <button type="submit">Login</button>
 </form>
 <div id="response"></div>
 <button id="getResource">Get Protected Resource</button>
 <div id="protectedResource"></div>
 <script>
   $(document).ready(function() {
     $('#loginForm').submit(function(event) {
       event.preventDefault();
       const username = $('#username').val();
       const password = $('#password').val();
       $.ajax({
         url: 'http://localhost:3000/login',
         method: 'POST',
         data: { username: username, password: password },
         success: function(response) {
           localStorage.setItem('token', response.token);
           $('#response').text('Login successful');
         },
         error: function(response) {
           $('#response').text('Login failed');
         }
       });
     });

     $('#getResource').click(function() {
       const token = localStorage.getItem('token');
       $.ajax({
         url: 'http://localhost:3000/protected',
         method: 'GET',
         headers: { 'Authorization': 'Bearer ' + token },
         success: function(response) {
           $('#protectedResource').text(response.message);
         },
         error: function(response) {
           $('#protectedResource').text('Resource access denied');
         }
       });
     });
   });
 </script>
</body>
</html>

测试单点登录功能

启动服务器：运行服务器端代码，启动服务器。
打开客户端页面：在浏览器中打开客户端页面，填写用户名和密码进行登录。
访问受保护资源：登录成功后，点击按钮访问受保护资源。
验证结果：确保能够成功访问受保护资源，而不需要再次登录。

常见问题及解决方案

JWT过期处理

JWT默认包含一个过期时间字段（exp），用于表示JWT的有效期。当JWT过期时，客户端需要重新登录或请求新的JWT。

客户端处理：在接收到过期JWT的响应时，客户端可以提示用户重新登录或刷新JWT。

if (response.status === 401 || response.status === 403) {
 if (response.responseJSON.message === 'No token provided.' || response.responseJSON.message === 'Failed to authenticate token.') {
   if (new Date().getTime() >= exp) {
     alert("Your token has expired. Please log in again.");
     // 清除存储的token
     localStorage.removeItem('token');
   }
 }
}

服务器端处理：服务器端可以检测JWT的过期时间，并在JWT过期时拒绝访问。

const authenticateJWT = (req, res, next) => {
 const token = req.headers.authorization;
 if (!token) {
   return res.status(401).json({ message: 'No token provided.' });
 }

 jwt.verify(token, secret, (err, user) => {
   if (err) {
     return res.status(403).json({ message: 'Failed to authenticate token.' });
   }
   if (Date.now() > user.exp) {
     return res.status(403).json({ message: 'Token has expired.' });
   }
   req.user = user;
   next();
 });
};

重放攻击的防范

重放攻击是一种攻击方式，攻击者截取并重新发送合法用户的JWT，以获得未经授权的访问。为了防范重放攻击，可以使用时间戳和nonce等机制。

时间戳：添加一个时间戳字段到JWT中，服务器端检查JWT的时间戳是否在有效范围内。

{
 "timestamp": 1600000000,
 "exp": 1600000001
}

const authenticateJWT = (req, res, next) => {
 const token = req.headers.authorization;
 if (!token) {
   return res.status(401).json({ message: 'No token provided.' });
 }

 jwt.verify(token, secret, (err, user) => {
   if (err) {
     return res.status(403).json({ message: 'Failed to authenticate token.' });
   }
   const now = Math.floor(Date.now() / 1000);
   if (now > user.exp || now < user.timestamp) {
     return res.status(403).json({ message: 'Token has expired or is not valid.' });
   }
   req.user = user;
   next();
 });
};

nonce：为每个请求生成一个随机的nonce，并将其包含在JWT中，服务器端检查nonce是否匹配。

{
 "nonce": "randomNonceValue"
}

const authenticateJWT = (req, res, next) => {
 const token = req.headers.authorization;
 if (!token) {
   return res.status(401).json({ message: 'No token provided.' });
 }

 jwt.verify(token, secret, (err, user) => {
   if (err) {
     return res.status(403).json({ message: 'Failed to authenticate token.' });
   }
   if (req.body.nonce !== user.nonce) {
     return res.status(403).json({ message: 'Nonce does not match.' });
   }
   req.user = user;
   next();
 });
};

跨域问题解决

跨域问题通常发生在不同域之间发送HTTP请求时。为了处理跨域问题，可以在服务器端设置适当的CORS（跨域资源共享）头。

安装cors中间件：
```
npm install cors
```

配置CORS设置：

const cors = require('cors');

app.use(cors({
 origin: 'http://localhost:3000', // 允许的源
 credentials: true // 允许发送cookies等凭据
}));

总结与展望

JWT单点登录的优势

安全性：JWT使用加密签名，确保了数据的完整性和未被篡改。
方便性：用户只需登录一次，就可以访问多个系统，提高了用户体验。
灵活性：JWT是一个独立的令牌，不依赖于任何特定的服务器端会话机制，易于扩展和集成。
可移植性：JWT可以存储在本地存储或Cookie中，适用于多种前端技术栈。

未来的发展方向

更高级的安全机制：随着安全威胁的不断演变，未来可能会出现更高级的安全机制来保护JWT，如使用更强大的加密算法、多因子认证等。
更广泛的集成：JWT可能会被应用于更多的场景，如移动应用、物联网设备等，实现更广泛的系统集成。
更优化的性能：为了提高性能，可能会出现更高效的方式来生成和验证JWT，如使用硬件加速和并行处理等技术。

通过本教程的学习，读者应该能够掌握JWT的原理以及如何使用JWT实现单点登录。实践部分提供了详细的代码示例，帮助读者更好地理解和应用这些概念。

这篇关于JWT单点登录原理学习：从入门到实践教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程