创业做网站需要哪些,长春网络优化最好的公司,苏州网站建设运营推广,龙岩网约车考试哪里报名单点登录#xff08;SSO#xff09;前端怎么做
本文介绍单点登录#xff08;SSO#xff09;是什么#xff0c;还有就是前端怎么做。
单点登录#xff08;SSO#xff09;是什么 单点登录#xff08;SSO#xff0c;Single Sign On#xff09;#xff0c;是在企业内部…单点登录SSO前端怎么做
本文介绍单点登录SSO是什么还有就是前端怎么做。
单点登录SSO是什么 单点登录SSOSingle Sign On是在企业内部多个应用系统如考勤系统、财务系统、人事系统等场景下用户只需要登录一次就可以访问多个应用系统。
同理用户只需注销一次就可以从多个应用系统退出登录。
简单来说就是一次登录全部登录一次注销全部注销
方法1父域Cookie
子级域名能共享主域名的Cookie所以可以利用这个特性在父级域名上设置Cookie就行了。
比如 tieba.baidu.com 和 map.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 是一个简易的单点登录系统由大众点评工程师许雪里个人开发代码比较简单没有做安全控制因而不推荐直接应用在项目中这里列出来仅供参考。
方法3iframe
利用iframe跨域登录成功后给所有站点同步Token退出时清除所有站点的Token。
在每个应用系统服务下放一个写入Token、移除Token的html文件
token.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 //headbodyscriptwindow.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的写入和移除。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyscriptconst 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的queryfunction 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 styleheight: 0px; overflow: hidden; border: none; src${configItem?.[site]}/token.html${location.search} /iframe ;})?.join()};}window.onload function () {init();};/script/body
/html优点
支持跨主域名
缺点
需要引入第三方html文件写入需要时间如果应用系统很多需要引入很多html文件会导致加载时间过长
