单点登录SSO全流程详解.pdf

单点登录SSO全流程详解

1.SSO架构概述

SSO系统通常包含三个主要组件：

o「SSO服务器」：中央认证服务，负责用户身份验证

「客户端应用」

o：需要用户登录的各个应用

「用户浏览器」

o：用户交互界面

2.基于Cookie的SSO实现

2.1登录流程代码实现

//前端应用入口组件

classAppextendsReact.Component{

constructor(props){

super(props);

this.state={

isAuthenticated:false,

user:null,

isLoading:true

};

}

componentDidMount(){

//检查用户是否已登录

this.checkLoginStatus();

}

checkLoginStatus=async()={

try{

//调用本地验证接口，检查是否有有效的会话

constresponse=awaitfetch(/api/auth/status,{

credentials:include//重要：包含跨域cookies

});

if(response.ok){

constdata=awaitresponse.json();

if(data.isAuthenticated){

this.setState({

isAuthenticated:true,

user:data.user,

isLoading:false

});

return;

}

}

//如果未登录，重定向到SSO登录页

this.redirectToSSOLogin();

}catch(error){

console.error(验证登录状态失败:,error);

this.setState({isLoading:false});

}

};

redirectToSSOLogin=()={

//当前应用URL，用于登录后重定向回来

constcurrentUrl=encodeURIComponent(window.location.href);

//重定向到SSO登录页面

window.location.href=`/login?redirect=${currentUrl}`;

};

render(){

const{isAuthenticated,user,isLoading}=this.state;

if(isLoading){

returndiv加载中.../div;

}

if(!isAuthenticated){

returndiv正在重定向到登录页面.../div;

}

return(

div

header

p欢迎,{}/p

buttononClick={this.handleLogout}退出登录/button

/header

main{/*应用内容*/}/main

/div

);

}

handleLogout=async()={

try{

awaitfet