统一认证登录平台的实现方案

yinmochunCoder
3,826 阅读4分钟

我们在做项目的时候，常常遇到这样的情况，当前的业务系统，需要使用某个统一认证平台进行登录，认证平台登录通过，能够直接跳转到业务系统工作台页面。

具体场景

  • 走统一登录平台，用户输入当前业务系统网址，如果当前用户没有登陆过，会直接跳转到统一登录页面，用户输入账号、密码，进行登录，登陆之后跳转到系统工作台首页。
  • 不走统一登录平台时，用户在浏览器中输入业务系统网址，直接跳转到当前业务系统登录页面，输入账号、密码，登录后进入到系统工作台首页。

梳理逻辑

  1. 入口在当前业务系统，如何跳转到统一认证平台？
  2. 统一认证平台登陆之后，如何跳转到当前业务系统？
  3. 跳转到当前业务系统，是进入到业务系统的入口页面，入口页面如何跳转到工作台首页？

场景和逻辑图

sequenceDiagram
业务系统网址->>统一认证平台登录页: window.location = 统一认证页面地址
统一认证平台登录页-->>业务系统网址: 重定向到业务系统入口页
业务系统网址-)业务系统工作台首页: 接口逻辑处理

处理

  1. 当前业务系统，如何跳转到认证平台？ 认证平台以url地址形式存在，后端可通过配置方式对该统一认证地址进行配置，同时以接口方式返回给前端，前端根据调用该地址接口，来获取地址，同时通过重定向方式，直接跳转到认证页面。
  2. 认证平台登陆之后，如何跳转到当前业务系统？ 认证平台完成认证逻辑后，会返回一个携带唯一身份码的code参数地址，重定向当前页面。这时，前端可以捕获到地址信息。
  3. 入口页面如何跳转到工作台首页？ 前端可将code传递给后端接口，后端根据当前接口去处理业务系统身份认证，处理之后，会返回不同接口数据，数据根据处理逻辑，返回不同的状态码，前端根据状态码，跳转到工作台首页。

特殊注意地方

  1. 当前业务系统退出之后，需要调用统一认证平台的退出页面，认证平台会自己处理退出逻辑，再次输入当前业务系统页面时，会提示重新登录，或直接跳转至统一登录页面。
  2. 在业务系统中，随便输入某个url时，如果当前用户已经在统一认证平台登陆过，则用户可直接访问url页面，这时需要注意判断是否登录逻辑需要在dom加载之前去处理，否则会出现dom渲染一闪而过的现象。

具体实现

系统入口页面，调用接口，重定向到认证平台。 统一认证平台处理之后，又会重新回到当前入口页，这时当前入口页，已经携带了唯一身份认证码code，需将code作为参数传递给接口。

// 调用具体接口
// api_param，需要根据是否携带code参数，具体处理。
let params = window.location.search,
    code,
    api_param = null;
// 获取code参数
if ( params.length > 0 ) {
   params_arrs = params.split("?");
   code = ( ( ( params_arrs[1].split("&") )[0] ).split("=") )[1];
}
//　接口参数约定    
( code && code.length > 0  )  ?  api_param = { code } : api_param
   
async function authority() {
    let res = await api(api_param);
    // 根据res返回，做不同处理，获取统一登录平台，前端跳转
    // 这里的跳转可根据具体业务去写，比如vue中按照router去跳，纯html按照location方式去跳，这里只是示例
    if (res.statusCode = '认证接口状态码') {
        window.location = res.redictUrl
    } else {
        window.location.href = "dashboard.html";
    }
}

退出操作，调用统一认证退出页面

function logout() {
 // api接口调用，返回，这里不再写具体接口
 // 重定向到统一登录退出平台，认证平台会自己做退出的处理，前端不需要特殊处理。只用清除当前业务系统的token信息即可
 window.location.replace = result.logOutRedictUrl;
}

任意操作页面，需要预判断是否登录

async function authority() {
    // 这里调用接口，直接传null参数即可，根据返回状态，会自动跳到认证页面，认证页面会重定向到入口页，入口页面去传递code
    let res = await api(null)
    if (res.statusCode = '认证接口状态码') {
        window.location = res.redictUrl
    } 
}

统一认证在项目中经常遇到，技术问题并不复杂，主要需要梳理好业务系统与认证平台间的跳转关系。希望这篇文章给大家带来一些有用的信息，共同学习。

avatar
文章
阅读
粉丝