标题：基于 JWT 的单点登录实现方式及跨域处理
本文详细介绍了如何使用 JSON Web Token（JWT）实现单点登录，并解决了跨域问题，通过 JWT 的加密和签名机制，确保了用户身份的安全性和有效性，采用 CORS（跨域资源共享）策略来处理不同域之间的资源访问，实现了单点登录的无缝体验。
一、引言
在当今的互联网应用中，单点登录（SSO）成为了一种常见的需求，它允许用户只需登录一次，就可以访问多个相关的应用系统，而无需在每个系统中重复登录，JWT 作为一种轻量级的身份验证技术，具有简洁、安全和易于实现等优点，被广泛应用于单点登录场景中。
二、JWT 简介
JWT 是一种基于 JSON 的开放标准（RFC 7519），用于在双方之间安全地传输信息，它由三部分组成：头部（Header）、载荷（Payload）和签名（Signature），头部包含了令牌的类型和加密算法等信息，载荷包含了用户的身份信息和其他自定义的声明，签名则是使用密钥对头部和载荷进行加密生成的，用于验证令牌的完整性和真实性。
三、JWT 单点登录实现步骤
1、用户登录：用户在登录页面输入用户名和密码，系统验证用户信息后，生成一个 JWT 令牌，并将其返回给客户端。
2、客户端存储令牌：客户端将接收到的 JWT 令牌存储在本地存储或会话存储中，以便在后续的请求中携带。
3、请求资源：客户端在访问需要授权的资源时，将 JWT 令牌添加到请求头中，发送给服务器。
4、服务器验证令牌：服务器接收到请求后，从请求头中提取 JWT 令牌，并使用密钥对其进行解密和验证，如果令牌有效，服务器将允许访问资源；否则，返回错误信息。
5、用户信息获取：如果令牌验证通过，服务器可以从令牌中获取用户的身份信息，并根据需要进行进一步的处理。
四、跨域处理
在实现 JWT 单点登录时，还需要解决跨域问题，由于浏览器的同源策略限制，不同域之间的资源访问是不被允许的，为了实现跨域访问，我们可以采用以下两种方法：
1、JSONP：JSONP 是一种通过在页面中添加 <script> 标签来实现跨域请求的方法，它的原理是利用 <script> 标签的 src 属性可以跨域请求的特点，将请求的参数作为回调函数的参数传递给服务器，服务器在响应中返回执行回调函数的代码，客户端接收到响应后，会执行回调函数，从而获取到服务器返回的数据。
2、CORS：CORS 是一种更现代的跨域解决方案，它通过在服务器端设置响应头来允许不同域的请求访问资源，CORS 支持两种请求方式：简单请求和预检请求，简单请求是指请求方法为 GET、HEAD 或 POST，并且请求头中不包含自定义的请求头，预检请求是指请求方法为 PUT、DELETE 或其他自定义的请求方法，或者请求头中包含自定义的请求头，对于预检请求，服务器会先发送一个 OPTIONS 请求来询问客户端的请求是否合法，客户端接收到 OPTIONS 请求后，会在响应中返回允许访问的请求头和方法，然后服务器再根据客户端的响应来处理实际的请求。
五、示例代码
以下是一个使用 Node.js 和 Express 框架实现 JWT 单点登录的示例代码：
const jwt = require('jsonwebtoken');
const express = require('express');
const app = express();
// 生成 JWT 令牌
function generateToken(payload) {
return jwt.sign(payload, 'your-secret-key', { expiresIn: '1h' });
}
// 验证 JWT 令牌
function verifyToken(token) {
return jwt.verify(token, 'your-secret-key');
}
// 登录路由
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 模拟用户验证
if (username === 'admin' && password === '123456') {
const payload = { username };
const token = generateToken(payload);
res.send({ token });
} else {
res.sendStatus(401);
}
});
// 受保护的资源路由
app.get('/protected', verifyToken, (req, res) => {
res.send(欢迎，${req.user.username});
});
// 启动服务器
app.listen(3000, () => {
console.log('服务器启动成功，监听 3000 端口');
});在上述代码中，我们首先定义了一个generateToken 函数用于生成 JWT 令牌，一个verifyToken 函数用于验证 JWT 令牌，我们定义了一个登录路由/login，用于接收用户的登录请求，并生成一个 JWT 令牌返回给客户端，我们定义了一个受保护的资源路由/protected，用于验证用户的令牌，并返回欢迎信息。
为了实现跨域访问，我们还需要在服务器端设置响应头，以下是一个设置 CORS 响应头的示例代码：
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
// 其他路由和中间件在上述代码中，我们使用express 框架的中间件来设置 CORS 响应头，我们允许所有域的请求访问资源，并允许 GET、POST、OPTIONS、PUT 和 DELETE 方法，以及Content-Type 和Authorization 头。
六、总结
本文介绍了如何使用 JWT 实现单点登录，并解决了跨域问题，通过 JWT 的加密和签名机制，确保了用户身份的安全性和有效性，采用 CORS 策略来处理不同域之间的资源访问，实现了单点登录的无缝体验，希望本文能够对你有所帮助。
评论列表