标题：基于 JWT 的 SSO 单点登录实现与跨域解决方案
一、引言
在当今的互联网应用中，用户常常需要在多个不同的系统或网站上进行登录操作，单点登录（SSO）技术的出现，使得用户只需在一个地方进行登录，就可以访问多个相关的系统或网站，而无需在每个系统中再次输入用户名和密码，JSON Web Token（JWT）是一种常用的 SSO 技术，它可以在不依赖于会话的情况下，实现安全的身份验证和授权，本文将介绍如何使用 JWT 实现 SSO 单点登录，并解决跨域问题。
二、JWT 简介
JWT 是一种基于 JSON 的轻量级开源令牌（token）标准，它可以在各方之间安全地传输信息，JWT 由三部分组成，分别是头部（Header）、负载（Payload）和签名（Signature），头部包含令牌的类型和加密算法等信息，负载包含用户的身份信息和其他自定义信息，签名用于验证令牌的完整性和真实性。
三、JWT 单点登录实现
1、用户登录：用户在登录页面输入用户名和密码，系统将用户名和密码发送到后端服务器进行验证，如果验证成功，后端服务器将生成一个 JWT 令牌，并将其返回给前端页面。
2、前端存储令牌：前端页面将接收到的 JWT 令牌存储在本地存储或会话存储中。
3、请求拦截：在前端页面发送请求时，使用拦截器将 JWT 令牌添加到请求头中。
4、后端验证令牌：后端服务器在接收到请求时，从请求头中获取 JWT 令牌，并使用私钥对其进行解密和验证，如果验证成功，说明用户身份合法，否则返回错误信息。
四、跨域问题解决方案
1、同源策略：浏览器出于安全考虑，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这被称为同源策略，如果前端页面和后端服务器不在同一个域中，就会出现跨域问题。
2、CORS：CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器在跨源请求时，向服务器发送额外的 HTTP 头，以告知服务器允许跨源访问，后端服务器需要设置响应头，允许前端页面进行跨域访问。
3、JSONP：JSONP（JSON with Padding）是一种通过 <script> 标签来加载跨域资源的技术，后端服务器将返回一个包含回调函数的 JavaScript 脚本，前端页面通过调用回调函数来处理返回的数据。
五、示例代码
以下是一个使用 JWT 实现 SSO 单点登录的示例代码，包括后端服务器和前端页面的代码。
后端服务器代码（使用 Node.js 和 Express 框架）：
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.json({ token });
} else {
res.status(401).json({ message: 'Invalid username or password' });
}
});
// 需要验证令牌的接口
app.get('/protected', verifyToken, (req, res) => {
res.json({ message: 'Protected resource' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});前端页面代码（使用 HTML、JavaScript 和 Axios 库）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSO 单点登录示例</title>
</head>
<body>
<button id="loginButton">登录</button>
<button id="protectedButton">访问受保护资源</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 登录函数
document.getElementById('loginButton').addEventListener('click', () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
axios.post('/login', { username, password })
.then(response => {
const token = response.data.token;
localStorage.setItem('token', token);
console.log('登录成功');
})
.catch(error => {
console.error('登录失败:', error);
});
});
// 访问受保护资源函数
document.getElementById('protectedButton').addEventListener('click', () => {
const token = localStorage.getItem('token');
axios.get('/protected', {
headers: {
Authorization:Bearer ${token}
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('访问受保护资源失败:', error);
});
});
</script>
</body>
</html>六、结论
本文介绍了如何使用 JWT 实现 SSO 单点登录，并解决了跨域问题，JWT 是一种简单而有效的身份验证和授权技术，它可以在不依赖于会话的情况下，实现安全的身份验证和授权，通过使用 JWT，我们可以提高系统的安全性和性能，同时减少开发和维护的成本。
评论列表