前端单点登录SSO面试回答

JWT鉴权机制

1.JWT用于登录身份验证

2.用户登录成功后,后端通过JWT机制生成一个token,返回给客户端

3.客户端后续的每次请求都需要携带token,放在header的authorization中

4.后端从authorization中拿到token后,通过secretKey进行解密验证省份

JWT生成的Token由三部分组成:header.payload.signature

**header:**主要是声明采用的加密算法

​ alg:指定生成signature采用的加密算法,默认是HS256

​ typ:令牌类型,jwt

**payload:**载荷,消息体,这里存放实际的内容

​ exp:设置过期时间

​ uid:用户uid

除了设置过期时间和用户的uid,还可以添加自定义私有字段,使用base64url进行编码组成JWT的第二部分

signature:

js 复制代码
Signature = HMACSHA256(base64Url(header)+.+base64Url(payload),secretKey)

优点:

  • json具有通用性,所以可以跨语言
  • 组成简单,字节占用小,便于传输
  • 服务端无需保存会话信息,很容易进行水平扩展
  • 一处生成,多处使用,可以在分布式系统中,解决单点登录问题
  • 可防护CSRF攻击

缺点:

  • payload部分仅仅是进行简单编码,所以只能用于存储逻辑必需的非敏感信息
  • 需要保护好加密密钥,一旦泄露后果不堪设想
  • 为避免token被劫持,最好使用https协议

共享登录SSO

同域名下的单点登录

cookiedomain属性设置为当前域的父域,并且父域的cookie会被子域所共享。path属性默认为web应用的上下文路径

利用 Cookie 的这个特点,没错,我们只需要将Cookiedomain属性设置为父域的域名(主域名),同时将 Cookiepath属性设置为根路径,将 Session ID(或 Token)保存到父域中。这样所有的子域应用就都可以访问到这个Cookie

不过这要求应用系统的域名需建立在一个共同的主域名之下,如 tieba.baidu.commap.baidu.com,它们都建立在 baidu.com这个主域名之下,那么它们就可以通过这种方式来实现单点登录

不同域名下的单点登录使用PostMessage

单点登录完全用前端来实现,前端拿到Token之后,前端通过 iframe+postMessage() 方式,将同一份 Token 写入到了多个域下的 LocalStorage 中,前端每次在向后端发送请求之前,都会主动从 LocalStorage 中读取Token并在请求中携带,这样就实现了同一份Token 被多个域所共享;此种实现方式完全由前端控制,几乎不需要后端参与,同样支持跨域

js 复制代码
// 获取 token
var token = result.data.token;
 
// 动态创建一个不可见的iframe,在iframe中加载一个跨域HTML
var iframe = document.createElement("iframe");
iframe.src = "http://app1.com/localstorage.html";
document.body.append(iframe);
// 使用postMessage()方法将token传递给iframe
setTimeout(function () {
    iframe.contentWindow.postMessage(token, "http://app1.com");
}, 4000);
setTimeout(function () {
    iframe.remove();
}, 6000);
 
// 在这个iframe所加载的HTML中绑定一个事件监听器,当事件被触发时,把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
    localStorage.setItem('token', event.data)
}, false);

认证中心来实现单点登录

当用户首次访问时,需要在认证中心登录:

1.当用户访问网站a.com下面的pageA页面,

2.由于没有登录,则系统A会返回给浏览器302重定向,并带上回调地址 www.sso.com?return_uri=a.com/pageA,以便登录后直接进入对应页面。

3.重定向302之后,浏览器去访问重定向地址,认证中心验证未登录,则展示form,提示用户登录

4.用户在认证中心输入账号密码,提交登录

5.认证中心验证账号密码有效,然后重定向 a.com?ticket=123 带上授权码 ticket,并将认证中心 sso.com 的登录态写入 Cookie

6.在 a.com 服务器中,拿着 ticket 向认证中心确认,授权码 ticket 真实有效。

7.验证成功后,服务器将登录信息写入 Cookie(此时客户端有 2 个 Cookie 分别存有 a.comsso.com 的登录态)

前端常见登录实现方案 + 单点登录方案 - 掘金 (juejin.cn)

相关推荐
前端李易安35 分钟前
Web常见的攻击方式及防御方法
前端
PythonFun1 小时前
Python技巧:如何避免数据输入类型错误
前端·python
Neituijunsir1 小时前
2024.09.22 校招 实习 内推 面经
大数据·人工智能·算法·面试·自动驾驶·汽车·求职招聘
hakesashou1 小时前
python交互式命令时如何清除
java·前端·python
天涯学馆1 小时前
Next.js与NextAuth:身份验证实践
前端·javascript·next.js
HEX9CF1 小时前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
ConardLi1 小时前
Chrome:新的滚动捕捉事件助你实现更丝滑的动画效果!
前端·javascript·浏览器
ConardLi2 小时前
安全赋值运算符,新的 JavaScript 提案让你告别 trycatch !
前端·javascript
凌云行者2 小时前
使用rust写一个Web服务器——单线程版本
服务器·前端·rust
希望有朝一日能如愿以偿2 小时前
力扣题解(飞机座位分配概率)
算法·leetcode·职场和发展