合肥网站优化搜索,网店推广方案范文,做海报的专业网站,福建做网站“前端单点登录#xff08;SSO, Single Sign-On#xff09;”是指在多个系统之间共享用户登录状态#xff0c;使用户只需登录一次#xff0c;就可以在多个子系统中使用同一身份访问资源#xff0c;无需重复登录。
以下是一个典型的前端单点登录方案的介绍和实现思路…“前端单点登录SSO, Single Sign-On”是指在多个系统之间共享用户登录状态使用户只需登录一次就可以在多个子系统中使用同一身份访问资源无需重复登录。
以下是一个典型的前端单点登录方案的介绍和实现思路 一、前端单点登录的核心流程
以一个公司内多个前端系统为例如系统 A、系统 B通过统一的登录中心进行身份认证。 基础参与者 登录认证中心SSO Server 子系统 A/B/CSSO Client 浏览器前端运行环境 登录流程简要图解
[用户访问子系统 A]↓
[未登录 → 重定向到 SSO 登录中心]↓
[SSO 登录成功 → 返回带 Token 的跳转链接给子系统 A]↓
[子系统 A 用 Token 向 SSO 验证身份]↓
[身份验证成功 → 创建子系统 A 的本地会话]↓
[访问子系统 B → 检查登录状态 → 同样走一遍验证流程 → 免登录]️ 二、前端常见实现方案
✅ 1. 基于 Cookie 的方式适合统一域名 同一主域如 a.example.com 和 b.example.com可共享顶级域名 Cookie。 设置 SSO Server 设置 Set-Cookie: tokenxxx; Domain.example.com; Path/ 子系统读取 Cookie 并根据 token 验证身份
优点实现简单不需要 Token 手动传输 缺点只能适用于同一主域存在跨域限制 ✅ 2. 基于 Token如 JWT的方式适合不同域名 SSO 登录后生成 access_tokenJWT 或 sessionId 重定向到客户端系统并携带 Token如https://system-a.com?tokenabc123 客户端拿 token 请求认证接口验证并存入 localStorage / sessionStorage 后续所有请求都带上这个 token通常放到 Authorization 头
示例前端逻辑
// 获取 URL 中的 token
const urlParams new URLSearchParams(window.location.search);
const token urlParams.get(token);if (token) {localStorage.setItem(access_token, token);// 可调用验证接口确认有效性
} else {// 没有 token跳转到 SSO 登录页window.location.href https://sso.example.com/login?redirect${encodeURIComponent(location.href)};
}三、SSO 实现注意点 登录中心要支持 登录接口支持用户输入账号密码 校验 Token 的接口给客户端调用验证用 Token 签发JWT 或 sessionId Token 刷新机制可选 安全注意 Token 要有时效过期时间 HTTPS 传输 Token 不应泄露在 URL 中太久可用 history.replaceState 清除 四、前端开发建议
项目建议登录状态缓存localStorage / Cookie / memoryToken 校验失败自动跳转到 SSO 登录页多系统切换使用 iframe 或 postMessage 通知同步登录登出同步通知所有系统清除登录状态可轮询或广播
