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

单点登录SSO全流程详解

1.SSO架构概述

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

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

「客户端应用」：需要用户登录的各个应用

「用户浏览器」：用户交互界面

2.基于Cookie的SSO实现

2.1登录流程代码实现

//前端应用入口组件

class?App?extends?React.Component?{

constructor(props){

???super(props);

???this.state={

????isAuthenticated:?false,

????user:?null,

????isLoading:?true

??};

?}

?componentDidMount(){

???//检查用户是否已登录

???this.checkLoginStatus();

?}

?checkLoginStatus=?async?()={

???try?{

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

????const?response=?await?fetch(/api/auth/status,{

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

???});

????

????if?(response.ok){

?????const?data=?await?response.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，用于登录后重定向回来

???const?currentUrl=?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

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

?????/header

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

????/div

??);

?}

?handleLogout=?async?()={

???try?{

????await?fetch(/logout,{

?????method:?POST,

?????credentials:?include

???});

????

????//登出后重定向到登录页

????window.location.href=?/login;

??}?catch?(error){

????console.error(登出失败:,error);

??}

?};

}

2.2SSO登录页面实现

//SSO服务器上的登录页面组件

class?SSOLoginPage?extends?React.Component?{

constructor(props){