单点登录(SSO)前端怎么做

单点登录(SSO)前端怎么做

本文介绍单点登录(SSO)是什么,还有就是前端怎么做。

单点登录(SSO)是什么

单点登录(SSO,Single Sign On),是在企业内部多个应用系统(如考勤系统、财务系统、人事系统等)场景下,用户只需要登录一次,就可以访问多个应用系统。

同理用户只需注销一次,就可以从多个应用系统退出登录。

简单来说就是,一次登录,全部登录!一次注销,全部注销!!

方法1:父域Cookie

子级域名能共享主域名的Cookie,所以可以利用这个特性,在父级域名上设置Cookie就行了。

比如 tieba.baidu.commap.baidu.com,它们都建立在 baidu.com 这个主域名之下,那么它们就可以通过这种方式来实现单点登录。

  • 优点

此种实现方式比较简单

  • 缺点

不支持跨主域名

方法2:认证中心

认证中心独立一个项目,登录后将Token存在本地存储中

应用系统检测Token,无Token就跳转到认证中心。认证中心先检测自己本地存储中的Token有效性,有效则跳转到应用系统并在url带上Token,否则跳转到认证中心登录页面,登录成功后跳转到应用系统并在url带上Token

应用系统拿到 Token 之后,写入到自己的本地存储中,在header上带上Token,服务端会校验Token的合法性

  • 优点

支持跨主域名

扩展性好

  • 缺点

会让系统多次重定向跳转,如果认证中心是spa应用,加载耗时也大

Token带在url存在泄露风险

  • 介绍两款认证中心的开源实现

Apereo CAS 是一个企业级单点登录系统,其中 CAS 的意思是"Central Authentication Service"。它最初是耶鲁大学实验室的项目,后来转让给了 JASIG 组织,项目更名为 JASIG CAS,后来该组织并入了Apereo 基金会,项目也随之更名为 Apereo CAS。

XXL-SSO 是一个简易的单点登录系统,由大众点评工程师许雪里个人开发,代码比较简单,没有做安全控制,因而不推荐直接应用在项目中,这里列出来仅供参考。

方法3:iframe

利用iframe跨域,登录成功后给所有站点同步Token,退出时清除所有站点的Token。

在每个应用系统服务下放一个写入Token、移除Token的html文件

  • token.html
html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script>
      window.onload = function () {
        /** 从url上获取Token写入本地存储 */
        const Token = location.search.split('?')[1].split('=')[1];
        /** 从url上获取tokenMode */
        if(tokenMode === 'remove') {
          localStorage.removeItem('Token');
        }
        if (tokenMode === 'set') {
          localStorage.setItem('Token', Token);
        }
      };
    </script>
  </body>
</html>

然后利用一个html管理所有应用系统,在html中引入所有应用系统的iframe,在iframe中引入上述html,通过iframe的src属性来控制Token的写入和移除。

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const configList = [
        {
          /** 开发环境 */
          "process.env.REACT_APP_BUILD_ENV": "development",
        },
        {
          /** 测试环境 */
          "process.env.REACT_APP_BUILD_ENV": "stage",
        },
        {
          /** Beta环境 */
          "process.env.REACT_APP_BUILD_ENV": "release",
        },
        {
          /** 正式环境 */
          "process.env.REACT_APP_BUILD_ENV": "production",
        },
      ];
      /** 站点列表 */
      const siteList = [
        /**  */
      ];

      // 获取location的query
      function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]);
        return null;
      }

      /** 获取环境变量 */
      function getEnvVersion() {
        return getQueryString("env") || "development";
      }

      function init() {
        document.body.innerHTML = `
          ${siteList
            ?.map((site) => {
              const env = getEnvVersion();
              const configItem = configList.find(
                (configItem) =>
                  configItem?.["process.env.REACT_APP_BUILD_ENV"] === env
              );
              return ` <iframe style="height: 0px; overflow: hidden; border: none;" src="${configItem?.[site]}/token.html${location.search}" ></iframe> `;
            })
            ?.join("")}
        `;
      }

      window.onload = function () {
        init();
      };
    </script>
  </body>
</html>
  • 优点

支持跨主域名

  • 缺点

需要引入第三方html文件,写入需要时间,如果应用系统很多,需要引入很多html文件,会导致加载时间过长

相关推荐
中微子6 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina10 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD2 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding2 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8162 小时前
scroll-marker轮播组件不再难
前端·css