單點擊登錄sso實現

一、單點登錄(SSO)是什么?

核心定義

單點登錄(Single Sign-On,SSO)是一種身份認證解決方案,允許用戶通過一次登錄訪問多個相互信任的應用系統。其核心邏輯是統一認證中心分布式會話管理,避免用戶重復輸入憑證,提升跨系統訪問效率。

技術原理
  1. 獨立認證中心(Passport)
    所有子系統的登錄請求均由認證中心處理,子系統本身不存儲用戶憑證。認證中心負責驗證用戶身份,并頒發全局唯一的令牌(Token)或會話標識(Session ID)
  2. 令牌傳遞與會話共享
    • 認證中心登錄成功后,生成令牌并通過安全方式(如 Cookie、Header)傳遞給子系統。
    • 子系統通過令牌向認證中心驗證用戶身份,驗證通過后建立局部會話(存儲用戶權限等信息),實現免密訪問。
  3. 跨系統會話一致性
    • 全局會話:用戶與認證中心的會話,標識用戶整體登錄狀態。
    • 局部會話:用戶與單個子系統的會話,依賴全局會話存在。
    • 約束關系:全局會話銷毀時,所有局部會話需同步銷毀;局部會話存在時,全局會話必然存在。
經典案例:電商平臺跨應用登錄

React 電商中臺系統 為例:

  • 主站(main.com)使用 React 開發,管理后臺(admin.com)使用 Vue3 開發,兩者域名不同。

  • 用戶在主站登錄后,認證中心(

    sso.com
    

    )生成 Token,并通過以下方式實現跨域共享:

    • 主站將 Token 存儲于 LocalStorage,并通過 postMessage 傳遞給管理后臺的 iframe 頁面,寫入其 LocalStorage。
    • 管理后臺前端每次請求時攜帶 Token,后端驗證通過后建立局部會話,用戶無需重復登錄。

二、如何實現單點登錄?

場景一:同域名下的單點登錄(子域共享 Cookie)

適用場景:同一主域名下的子系統(如 shop.xxx.comadmin.xxx.com)。
實現原理:利用 Cookie 的 domainpath 屬性跨子域共享會話標識。

步驟(以 Vue3 為例):

  1. 設置認證中心 Cookie
    在認證中心登錄成功后,將 Session ID 寫入 Cookie,配置:

    document.cookie = `sessionId=xxx; domain=.xxx.com; path=/; secure; HttpOnly`;
    
    • domain=.xxx.com:允許所有子域訪問該 Cookie。
    • path=/:根路徑下所有資源均可讀取。
  2. 子系統驗證會話
    子系統(如 Vue3 應用)在路由守衛中檢查 Cookie 中的 sessionId

    // Vue3 路由守衛
    router.beforeEach((to, from, next) => {const sessionId = document.cookie.match(/sessionId=([^;]+)/)?.[1];if (to.meta.requiresAuth && !sessionId) {next(`/sso/login?redirect=${encodeURIComponent(to.fullPath)}`); // 跳轉認證中心} else {next();}
    });
    

優勢:實現簡單,無需后端復雜邏輯;局限:僅適用于同主域名場景。

場景二:不同域名下的單點登錄(標準 SSO 方案)

適用場景:跨域名系統(如 react-app.comvue-app.com)。
核心方案:基于 認證中心 + 令牌校驗 的分布式架構。

方案一:后端主導的重定向認證(通用方案)

技術棧:認證中心(Node.js/Java) + 子系統(React/Vue3)。
流程步驟

  1. 用戶訪問子系統(React 應用)
    子系統檢測到未登錄,重定向至認證中心,并攜帶回調地址:

    // React 前端重定向
    window.location.href = `https://sso.com/login?redirect=https://react-app.com/dashboard`;
    
  2. 認證中心處理登錄

    • 用戶輸入憑證,認證中心驗證通過后生成 JWT 令牌,并存儲用戶會話(如 Redis)。

    • 重定向回子系統,附帶令牌參數:

      // 認證中心 Node.js 后端
      app.get('/login', (req, res) => {// 驗證用戶邏輯...const token = generateJWT(user.id);res.redirect(`${req.query.redirect}?token=${token}`);
      });
      
  3. 子系統校驗令牌
    子系統(Vue3 應用)后端接收令牌,調用認證中心接口驗證合法性:

    // Vue3 后端(Node.js)
    app.get('/dashboard', async (req, res) => {const token = req.query.token;const isValid = await fetch(`https://sso.com/verify-token?token=${token}`); // 校驗令牌if (isValid) {// 創建局部會話(如設置子系統 Cookie)res.cookie('localSession', 'valid', { domain: 'vue-app.com' });res.send('受保護資源');} else {res.redirect('/login');}
    });
    

優勢:安全性高,支持跨域;劣勢:需要后端深度參與,流程較復雜。

方案二:前端主導的 LocalStorage 共享(輕量級方案)

技術棧:純前端(React + Vue3) + 認證中心 API。
核心邏輯:通過 iframe + postMessage 跨域傳遞 Token 至各系統的 LocalStorage。

實現步驟(以 React 為例):

  1. 認證中心返回 Token 給主系統

    // React 主系統登錄回調
    const handleLogin = async () => {const response = await fetch('https://sso.com/login', { method: 'POST', body: formData });const { token } = await response.json();// 存儲主系統 TokenlocalStorage.setItem('mainToken', token);// 通過 iframe 向 Vue3 子系統傳遞 Tokenconst iframe = document.createElement('iframe');iframe.src = 'https://vue-app.com/sso-helper'; // Vue3 子系統的跨域接收頁面document.body.appendChild(iframe);setTimeout(() => {iframe.contentWindow.postMessage(token, 'https://vue-app.com'); // 安全限制目標域名}, 1000);
    };
    
  2. Vue3 子系統接收 Token
    創建 sso-helper.html 頁面(Vue3 項目靜態文件),監聽跨域消息并存儲 Token:

    <!-- Vue3 子系統 sso-helper.html -->
    <script>window.addEventListener('message', (event) => {if (event.origin === 'https://react-app.com') { // 驗證來源域名localStorage.setItem('vueToken', event.data);}});
    </script>
    
  3. 各系統請求攜帶 Token
    前端每次發請求時從 LocalStorage 讀取 Token 并添加到請求頭:

    // React 全局 Axios 攔截器
    axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('mainToken')}`;return config;
    });
    

優勢:后端無侵入,部署靈活;風險:依賴前端安全性,需嚴格校驗消息來源域名。

三、單點登錄核心流程與代碼示例

流程時序圖

在這里插入圖片描述

關鍵代碼片段(跨域場景)
  1. 認證中心生成 Token(Node.js)

    const jwt = require('jsonwebtoken');
    app.post('/login', (req, res) => {const { username, password } = req.body;// 驗證用戶邏輯...const token = jwt.sign({ userId: '123' }, 'sso-secret-key', { expiresIn: '1h' });res.json({ token }); // 返回給前端,由前端處理跨域傳遞
    });
    
  2. React 前端跨域傳遞 Token 至 Vue3

    // React 登錄成功后
    const sendTokenToVueApp = (token) => {const iframe = document.createElement('iframe');iframe.style.display = 'none';iframe.src = 'https://vue-app.com/sso-iframe'; // Vue3 接收頁面document.body.appendChild(iframe);iframe.onload = () => {iframe.contentWindow.postMessage({ type: 'SSO_TOKEN', token },'https://vue-app.com');};
    };
    
  3. Vue3 前端監聽跨域消息

    // Vue3 主文件 main.js
    mounted() {window.addEventListener('message', this.handleSSOMessage);
    },
    methods: {handleSSOMessage(event) {if (event.origin === 'https://react-app.com' && event.data.type === 'SSO_TOKEN') {localStorage.setItem('ssoToken', event.data.token);this.$router.push('/dashboard'); // 自動跳轉已登錄頁面}}
    }
    

    四、常見問題與解決方案

    1. 跨域 Cookie 共享限制
      • 同域名場景通過 domain 屬性解決,不同域名需依賴認證中心重定向或前端跨域通信(如 postMessage)。
    2. 令牌安全性
      • 使用 HTTPS 傳輸 Token,避免明文泄露;
      • 令牌設置短有效期(如 1 小時),搭配刷新令牌(Refresh Token)機制續期。
    3. 單點登出(SLO)
      • 全局登出時,認證中心需銷毀全局會話,并通知所有子系統銷毀局部會話(可通過廣播消息或子系統主動校驗令牌失效)。

五、技術選型總結

場景推薦方案技術棧示例優勢
同域名子系統Cookie 共享React + Express簡單高效,后端輕量級
跨域名企業系統認證中心 + 重定向校驗Vue3 + Spring Boot + Redis安全性高,符合企業級規范
純前端跨域應用LocalStorage + postMessageReact + Vue3 + Node.js前端主導,后端無侵入

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/82445.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/82445.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/82445.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JavaWebsocket-demo

Websocket客戶端 pom依賴 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.4.0</version></dependency>客戶端代碼片段 Component Slf4j public class PositionAlarmL…

Java Collection(集合) 接口

Date: 2025-05-21 20:21:32 author: lijianzhan Java 集合框架提供了一組接口和類&#xff0c;以實現各種數據結構和算法。 以下是關于 Java 集合的核心內容說明&#xff1a; /*** Java Collection Framework 說明&#xff1a;** 在 Java 中&#xff0c;集合&#xff08;Collec…

讓MySQL更快:EXPLAIN語句詳盡解析

前言 在數據庫性能調優中&#xff0c;SQL 查詢的執行效率是影響系統整體性能的關鍵因素之一。MySQL 提供了強大的工具——EXPLAIN 語句&#xff0c;幫助開發者和數據庫管理員深入分析查詢的執行計劃&#xff0c;從而發現潛在的性能瓶頸并進行針對性優化。 EXPLAIN 語句能夠模…

Java基礎 Day20

一、HashSet 集合類 1、簡介 HashSet 集合底層采取哈希表存儲數據 底層是HashMap 不能使存取有序 JDK8之前的哈希表是數組和鏈表&#xff0c;頭插法 JDK8之后的哈希表是數組、鏈表和紅黑樹&#xff0c;尾插法 2、存儲元素 &#xff08;1&#xff09;如果要保證元素的唯…

2505C++,32位轉64位

原文 假設有個想要將一個32位值傳遞給一個帶64位值的函數的函數.你不關心高32位的內容,因為該值是傳遞給回調函數的直通值,回調函數會把它截斷為32位值. 因此,你都擔心編譯器一般生成的將32位值擴展到64位值的那條指令的性能影響. 我懷疑這條指令不是程序中的性能瓶頸. 我想出…

光伏電站及時巡檢:守護清潔能源的“生命線”

在“雙碳”目標驅動下&#xff0c;光伏電站作為清潔能源的主力軍&#xff0c;正以年均20%以上的裝機增速重塑全球能源格局。然而&#xff0c;這些遍布荒漠、屋頂的“光伏矩陣”并非一勞永逸的能源提款機&#xff0c;其穩定運行高度依賴精細化的巡檢維護。山東棗莊觸電事故、衢州…

C++初階-list的使用2

目錄 1.std::list::splice的使用 2.std::list::remove和std::list::remove_if的使用 2.1remove_if函數的簡單介紹 基本用法 函數原型 使用函數對象作為謂詞 使用普通函數作為謂詞 注意事項 復雜對象示例 2.2remove與remove_if的簡單使用 3.std::list::unique的使用 …

OpenHarmony平臺驅動使用(一),ADC

OpenHarmony平臺驅動使用&#xff08;一&#xff09; ADC 概述 功能簡介 ADC&#xff08;Analog to Digital Converter&#xff09;&#xff0c;即模擬-數字轉換器&#xff0c;可將模擬信號轉換成對應的數字信號&#xff0c;便于存儲與計算等操作。除電源線和地線之外&#…

CSS【詳解】彈性布局 flex

適用場景 一維&#xff08;行或列&#xff09;布局 基本概念 包裹所有被布局元素的父元素為容器 所有被布局的元素為項目 項目的排列方向&#xff08;垂直/水平&#xff09;為主軸 與主軸垂直的方向交交叉軸 容器上啟用 flex 布局 將容器的 display 樣式設置為 flex 或 i…

基于MATLAB實現傳統譜減法以及兩種改進的譜減法(增益函數譜減法、多帶譜減法)的語音增強

基于MATLAB實現傳統譜減法以及兩種改進的譜減法&#xff08;增益函數譜減法、多帶譜減法&#xff09;的語音增強代碼示例&#xff1a; 傳統譜減法 function enhanced traditional_spectral_subtraction(noisy, fs, wlen, inc, NIS, a, b)% 參數說明&#xff1a;% noisy - 帶…

symbol【ES6】

你一閉眼世界就黑了&#xff0c;你不是主角是什么&#xff1f; 目錄 什么是Symbol&#xff1f;?Symbol特點?&#xff1a;創建方法&#xff1a;注意點&#xff1a;不能進行運算&#xff1a;顯示調用toString() --沒有意義隱式轉換boolean 如果屬性名沖突了怎么辦&#xff1f;o…

LeetCode 649. Dota2 參議院 java題解

https://leetcode.cn/problems/dota2-senate/description/ 貪心。不會寫。 class Solution {public String predictPartyVictory(String senate) {boolean rtrue,dtrue;int flag0;//flag>0,d前面有r;flag<0,r前面有dchar[] senatessenate.toCharArray();//每一輪while(r…

機器學習第二十二講:感知機 → 模仿大腦神經元的開關系統

機器學習第二十二講&#xff1a;感知機 → 模仿大腦神經元的開關系統 資料取自《零基礎學機器學習》。 查看總目錄&#xff1a;學習大綱 關于DeepSeek本地部署指南可以看下我之前寫的文章&#xff1a;DeepSeek R1本地與線上滿血版部署&#xff1a;超詳細手把手指南 感知機詳解…

maven快速上手

之前我們項目如果要用到其他額外的jar包&#xff0c;需要自己去官網下載并且導入。但是有maven后&#xff0c;直接在maven的pom.xml文件里用代碼配置即可&#xff0c;配置好后maven會自動幫我們聯網下載并且會自動導入該jar包 在右邊的maven中&#xff0c;我們可以看到下載安裝…

科學養生指南:解鎖健康生活密碼

健康是人生最寶貴的財富&#xff0c;在快節奏的現代生活中&#xff0c;科學養生成為保持良好狀態的關鍵。遵循現代醫學與營養學的研究成果&#xff0c;無需依賴傳統中醫理論&#xff0c;我們也能找到適合自己的養生之道。? 均衡飲食是健康的基石。現代營養學強調 “食物多樣&…

Qt狀態機QStateMachine

QStateMachine QState 提供了一種強大且靈活的方式來表示狀態機中的狀態&#xff0c;通過與狀態機類(QStateMachine)和轉換類(QSignalTransition&#xff0c; QEventTransition)結合&#xff0c;可以實現復雜的狀態邏輯和用戶交互。合理使用嵌套狀態機、信號轉換、動作與動畫、…

C++八股 —— 原子操作

文章目錄 1. 什么是原子操作2. 原子操作的特點3. 原子操作的底層原理4. 內存序內存屏障 5. 原子操作和互斥鎖的對比6. 常用的原子操作7. 相關問題討論 參考&#xff1a; C atomic 原子操作_c 原子操作-CSDN博客DeepSeek 1. 什么是原子操作 原子操作&#xff08;Atomic Opera…

雙紫擒龍紫紫紅指標源碼學習,2025升級版紫紫紅指標公式-重點技術

VAR1:MA((LOWHIGHCLOSE)/3,5); VAR2:CLOSEHHV(C,4) AND REF(C,1)LLV(C,4); 雙紫擒龍:REF(C,1)LLV(C,4) AND C>REF(C,2) OR REF(C,2)LLV(C,4) AND REF(C,1)<REF(C,3) AND REF(C,2)<REF(C,4) AND C>REF(C,1); VAR4:VAR1>REF(VAR1,1) AND REF(VAR1,1)<REF(VAR1,…

NeuralRecon技術詳解:從單目視頻中實現三維重建

引言 三維重建是計算機視覺領域中的一項關鍵技術&#xff0c;它能夠從二維圖像中恢復出三維形狀和結構。隨著深度學習的發展&#xff0c;基于學習的方法已經成為三維重建的主流。NeuralRecon是一種先進的三維重建方法&#xff0c;它能夠從單目視頻中實時生成高質量的三維模型。…

Ubuntu 上開啟 SSH 服務、禁用密碼登錄并僅允許密鑰認證

1. 安裝 OpenSSH 服務 如果尚未安裝 SSH 服務&#xff0c;運行以下命令&#xff1a; sudo apt update sudo apt install openssh-server2. 啟動 SSH 服務并設置開機自啟 sudo systemctl start ssh sudo systemctl enable ssh3. 生成 SSH 密鑰對&#xff08;本地機器&#xf…