首页 > 文章 > 前端

单点登录 (SSO) 变得简单

时间：2025-01-21 15:39:59 331浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《单点登录 (SSO) 变得简单》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

单点登录 (SSO) 变得简单

单点登录（SSO）详解

前端单点登录（SSO）技术允许用户使用同一套凭证访问多个应用或网站，无需重复登录或注册，从而提升用户体验、降低维护成本并增强安全性。

前端SSO解决方案及其实现

主要的SSO实现方法包括：

基于Cookie的单点登录

这是最常见的SSO实现方式，利用浏览器Cookie机制实现。用户首次登录应用A时，认证中心验证身份后，返回包含用户信息及有效期的加密Cookie。Cookie的域设置为顶级域名（例如example.com），允许在同一顶级域名下的所有应用之间共享（例如a.example.com和b.example.com）。后续访问其他应用时，系统检查Cookie，存在有效Cookie则直接登录，否则重定向到认证中心登录。这种方法简单易行，但局限于同一顶级域名下的应用，存在跨域问题，且受Cookie大小和数量限制。

在应用A登录成功后设置Cookie：

// 生成加密的Cookie值
const encryptedValue = encrypt(userinfo);

// 设置Cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

在应用B检查Cookie：

// 获取Cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// 解密Cookie
const userinfo = decrypt(cookieValue);

// 直接登录
login(userinfo);

基于Token的单点登录

这是一种无状态的SSO实现。用户首次登录时，认证中心验证身份后返回包含用户信息及有效期的加密Token，该Token存储在浏览器本地存储（例如localStorage或sessionStorage）中。访问其他应用时，系统检查有效Token，存在则直接登录，否则重定向到认证中心登录。此方法支持跨域，不受Cookie限制，但需要额外的存储空间和网络开销，且存在安全风险，Token被盗可能导致身份滥用。

在应用A登录成功后将Token存储在localStorage中：

// 生成Token
const token = generateToken(userinfo);

// 存储Token
localStorage.setItem('sso_token', token);

在其他应用检查Token：

// 获取Token
const token = localStorage.getItem('sso_token');

// 验证Token
const userinfo = verifyToken(token);

// 直接登录
login(userinfo);

基于OAuth 2.0的SSO

此方法采用OAuth 2.0授权码流程。用户首次登录应用时，向认证中心发送请求，认证中心验证身份后返回授权码并重定向到应用的回调URL。应用将授权码发送到认证中心，交换为包含用户信息及有效期的访问令牌和刷新令牌，这些令牌存储在浏览器本地存储中。访问其他应用时，系统检查有效的访问令牌，存在则直接登录，否则重定向到认证中心登录。此方法遵循OAuth 2.0标准，支持多种客户端类型（例如Web、移动、桌面），但更为复杂，需要多个请求和重定向。

在应用A发送授权请求：

const authorizeUrl = `https://auth.example.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&response_type=code`;

// 重定向到认证中心登录页
window.location.href = authorizeUrl;

登录成功后，使用授权码重定向回应用A的回调URL：

const redirectUri = 'https://app.example.com/callback';

// 生成授权码
const code = generateAuthorizationCode(userinfo);

// 重定向回应用的回调URL
window.location.href = `${redirectUri}?code=${code}`;

在应用A使用授权码交换访问令牌：

const code = getQueryString('code');

// 向认证中心发送请求获取访问令牌
const tokenUrl = `https://auth.example.com/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}&grant_type=authorization_code`;

fetch(tokenUrl)
  .then((response) => response.json())
  .then((data) => {
    // 存储访问令牌和刷新令牌
    localStorage.setItem('access_token', data.access_token);
    localStorage.setItem('refresh_token', data.refresh_token);

    // 直接登录
    login(data.userinfo);
  });