专栏首页前端词典单点登录该如何实现

单点登录该如何实现

文章来源:https://juejin.im/user/5727eaa0df0eea006211330e/posts

前言

有这么个场景,公司下有多个不同域名的站点,我们期望用户在任意一个站点下登录后,在打开另外几个站点时,也是已经登录的状态,这么一过程就是单点登录。

因为多个站点都是用的同一套用户体系,所以单点登录可以免去用户重复登录,让用户在站点切换的时候更加流畅,甚至是无感知。

单点登录所要实现的就是,某一站点登录后,将其登录态会同步到其他另外几个站点。

我们分两部分,先说单个站点的登录流程,在说同步登录态的流程。

登录相关架构

  • 服务端采用 nodejs ,缓存采用 redis
  • 用户登录凭证采用基于 sessioncookies 维系,采用 cookie 作为登录凭证是目前比较主流的方式。
  • session 信息用 redis 承载,从数据层面上看, redis 中存储 session 对象的 key 便是 cookie 中的 value
  • key是由 UUID 生成的唯一标识
  • 为了保证 sessioncookie 保持对应, session 对象创建与修改都会触发服务端往浏览器写入 cookie

登录流程

我们先看单个站点的登录流程

  1. 用户首次打开站点,服务端生成 session 对象,此时 session 中没有用户信息,同时服务端往浏览器写入 cookie
  2. 用户触发登录操作
  3. 服务端校验参数处理登录逻辑后,生成用户信息,将用户信息写入 session 对象,更新缓存 redis 我们来画个图,如下:

同步登录态

一个站点完成登录后,接下来就是如何让其他站点也拥有登录态。 既然登录态是由 cookiesession 决定的,而 cookie 又是由 session 写入的,那么也就是说,只要把 session 同步到其它站点,其它站点只要获取到 session 后,就可以在该域名创建或更新 cookie ,这样一来,两个不同域名下的站点就拥有相同的登录信息了。

因此,同步登录态其实就是,如何同步 session 的问题。

而我们的 session 是采用 redis 作为载体,那么其他站点只要能获取到 redis 中存储的用户信息,不就可以创建自己的 session 对象了么?

没错!如何同步 session 的问题,就变成了如何让其他站点从 redis 中获取用户信息,也就是如何让其他站点知道存储该用户信息的 redis key

到了这一步,我们需要解决的问题就很明显啦:如何在不同站点间传输用户凭证。

为便于描述,我们假设有两个站点,分别为A站点和B站点。因为A、B站点的域名不同,基于同源策略, cookie 是没法共享的,所以我们采取主动请求的方式,将用户唯一凭证通过接口传过去。大致流程如下:

  1. A站点完成登录逻辑后,将用户凭证返回到浏览器,为了安全性,在传输凭证前,对凭证进行加密,可采用 AES 或者 RSA
  2. A站点的客户端获取到凭证后,调用B站点提供的同步登录态接口,将凭证传过去
  3. B站点的服务端获取到凭证,解密,查询缓存中的用户信息,创建 session 对象,写入B站点域名下的 cookie 信息
  4. B站点的登录态同步完成

基于上图,我们完善同步的时序图

同步登录态的场景

上面描述的是当用户首次登录时的同步流程,还需要考虑其他场景,比如,B 站点获得的登录态失效了,这时候访问 B 站点页面,就需要在一次前往 A 站点同步登录态。 B 站点上的页面分为两种,一种是需要登录态才可以访问的,一种是不需要登录态就可以访问的。 第一种情况下,需要重定向到 A 站点,为啥要绕回去呢?因为此时我们也不确定A 站点的登录态是否也失效了,所以需要回到 A 站点判断 A 站点当前的登录态,若 A 站点登录态也失效了,那么就去登陆页进行重新登录,若 A 站点是有登陆态的,那么只要在做一次同步登录态的操作即可。 我们还是画图,清晰一些,如下:

若有其他场景,处理的逻辑与这个类似,本质无非就是在获取一次凭证,重新更新站点缓存。

跨域请求

因为要在 A 站点请求 B 域名下的接口,所以会有跨域问题,跨域问题常用的解决方式有如下几种:

  1. JSONP 很常见很通用的一种方式
  2. Image 利用 Imagesrc 可以绕过同源策略,所以通过构建一个 Image 发送给请求也是可行的,同时服务端也不需要做太多修改。
  3. CORS 老的浏览器就没法支持,需要在服务端设置 Access-Control-Allow-Origin,允许任何域或指定的域发起的请求都可以获取当前服务器的数据。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题,因此接下来我会输出 10 篇 Vue 相关的文章,希望对大家有一定的帮助。我会保持在 7 到 10 天更新一篇。

  1. Vuex 注入 Vue 生命周期的过程(完成)
  2. 学习 Vue 源码的必要知识储备(完成)
  3. 浅析 Vue 响应式原理(完成)
  4. 新老 VNode 进行 patch 的过程
  5. 如何开发功能组件并上传 npm
  6. 从这几个方面优化你的 Vue 项目
  7. 从 Vue-Router 设计讲前端路由发展
  8. 在项目中如何正确的使用 Webpack
  9. Vue 服务端渲染
  10. Axios 与 Fetch 该如何选

本文分享自微信公众号 - 小生方勤(XSFQ_HSD),作者:小黎也

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 中重要的层叠概念

    最近在项目中遇到了一个问题,menu-bar 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因。

    小生方勤
  • 【前端词典】必备知识-原型与原型链

    继承是我们前端必须熟悉的一个知识点。可依旧有很多前端对继承的实现和应用没有一个整体的把握。追其原因无非有二:

    小生方勤
  • chrome 开发者工具的 11 个骚技巧

    对于每个前端从业者来说,除了 F5 键之外,用的最多的另外一个键就是 F12 了。

    小生方勤
  • Linux 权限控制的基本原理

    以下是对用户和组信息的举例。 /etc/shadow 中的口令信息为加密存储,不举例。

    小小科
  • 使用卷积深度神经网络和PyTorch库对花卉图像进行分类

    语言图像数据是深度学习技术的一种非常流行的用法。在本文中将讨论使用深度卷积神经网络识别花卉图像。

    代码医生工作室
  • 码云推荐 | 基于 Bootstrap 实现通用后台管理系统 zhengAdmin

    基于 Bootstrap 实现的响应式 Material Design 风格的通用后台管理系统 https://gitee.com/shuzheng/zheng...

    码云Gitee
  • pipreqs:生成python项目的requirements

    项目开发的时候,总是要搭建和部署环境,这时,就需要一个python第三方包的list,一般叫做requirements.txt。如果项目使用virtualenv...

    Criss@陈磊
  • 深度分享:世界顶级计算语言学科学家Ken Church CCL 2018主旨报告(附PPT全文)

    报告人:Kenneth Ward Church (Baidu Research Fellow)

    数据派THU
  • MyBatis进阶 -【多表查询】的正确打开方式

    经过了 MyBatis 基本增删改查的学习,而在实际的项目中,我们往往会接触到多表的操作,什么是多表呢, 在实际生活中,每个实体之间往往是存在关系的,而我们的项...

    BWH_Steven
  • mybatis多表查询

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡

扫码关注云+社区

领取腾讯云代金券