當前位置:首頁 » 網頁前端 » 前端單點登錄
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端單點登錄

發布時間: 2023-06-15 19:40:16

前端單點登錄如何實現

單點登錄的思路是這樣的,假定有個兩個系統,A系統登錄一次後,再訪問B系統時是不需要登錄的,當訪問B系統時,就去登錄系統判斷是否有效,如果登錄系統放行了,說明是已經登錄過的。所以,需要建一個登錄系統,從登錄系統引出是否登錄的判斷,那麼不管是哪個系統在訪問需要驗證是否登錄的時候都去驗證登錄系統。

㈡ 不懂前後端分離這篇就夠

前後端分離前我們的開發協作模式一般是這樣的:

前端寫好靜態的HTML頁面賀扮交付給後端開發。靜態頁面可以本地開發,也無需考慮業務邏輯只需要實現View即可。

後端使用模板引擎去套模板,同時內嵌一些後端提供的模板變數和一些邏輯操作。

然後前後端集成對接,遇到問題,前台返工,後台返工。

然後在集成,直至集成成功。

這種模式的問題

在前端調試的時候要安裝完整的一套後端開發工具,要把後端程序完全啟動起來。遇到問題需要後端開發來幫忙調試。我們發現前後端嚴重耦合,還要要求後端人員會一些HTML,JS等前端語言。前端頁面里還嵌入了很多後端的代碼。一旦後端換了一種語言開發,簡直就要重做。

像這種增加了大量的溝通成本,調試成本等,而且前後端的開發進度相互影響,從而大大降低了開發效率。

前後端分離並不只是開發模式,而是web應用的一種架構模式。在開發階段,前後端工程師約定好數據交互介面,實現並行開發和測試;在運行階段前後端分離模式需要對web應用進行分離部署,前後端之前使用HTTP或者其他協議進行交互請求。

1. 客戶端和服務端採用RESTFul API的交互方式進行交互

2. 前後端代碼庫分離

在傳統架構模式中,前後端代碼存放於同一個代碼庫中,甚至是同一工程目錄下。頁面中還夾雜著後端代碼。前後端工程師進行開發時,都必須把整個項目導入到開發工具中。

前後端代碼庫分離,前端代碼中有可以消蘆進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽後端,能支持前端的獨立開發和測試。而後端代碼中除了功能實現外,還有著詳細的測試用例,以保證API的可用性,降低集成風險。

3. 並行開發

在開發期間前後端共同商定好數據介面的交互形式和數據格式。然後實現前後端的並行開發,其中前端工程師在開發完成之後可以獨自進行mock測試,而後端也可以使用Postman等介面測試軟體進行介面自測,然後前後端一起進行功能聯調並校驗格式,最終進行自動化測試。

分離後,開發模式是這樣的

為優質產品打造精益團隊

通過將開發團隊前後端分離化,讓前後端工程師只需要專注於前端或後端的開發工作,是的前後端工程師實現自治,培養其獨特的技術特性,然後構建出一個全棧式的精益開發團隊。

提升開發效率

前後端分離以後,可以實現前後端代碼的解耦,只要前後端溝通約定好應用所需介面以及介面參數,便可以開始並行開發,無需等待對方的開發工作結束。與此同時,即使需求發生變更,只要介面與數據格式不變,後端開發人員就不需要修改代碼,只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。

完美應對復雜多變的前端需求

如果開發團隊能完成前後端分離的轉型,打造優秀的前後端團隊,開發獨立化,讓開發人員做到專注專精,開發能力必然會有所提升,能夠完美應對各種復雜多變的前端需求。

增強代碼可維護性

前後端分離後,應用的代碼不再是前後端混合,只有在運行期才會有調用依賴關系。應用代碼將會變得整潔清晰,不論是代碼閱讀還是代碼維護都會比以前輕松。

使用了前後端分離架構後,除了開發模式的變更,我們在開發的過程中還會遇到哪些問題呢?我們接著往下看。

我們先來看看傳統開發,我們是如何進行用戶認證的

前端登錄,後端根據用戶信息生成一個jsessionid,並保存這個 jsessionid 和對應的用戶id到Session中,接著把 jsessionid 傳給用戶,存入瀏覽器 cookie,之後瀏覽器請求帶上這個cookie,後端根據這個cookie值來查詢用戶,驗證是否過期。

HTTP有一個特性:無狀態的,就是前後兩個HTTP事務它們並不知道對方的信息。而為了維護會話信息或用戶信息,一般可用Cookie和Session技術緩存信息。

- Cookie是存儲在客戶端的

- Session是存儲在服務端的

但這樣做問題就很多,拿拍帶如果我們的頁面出現了 XSS 漏洞,由於 cookie 可以被 JavaScript 讀取,XSS 漏洞會導致用戶 token 泄露,而作為後端識別用戶的標識,cookie 的泄露意味著用戶信息不再安全。盡管我們通過轉義輸出內容,使用 CDN 等可以盡量避免 XSS 注入,但誰也不能保證在大型的項目中不會出現這個問題。

在設置 cookie 的時候,其實你還可以設置 httpOnly 以及 secure 項。設置 httpOnly 後 cookie 將不能被 JS 讀取,瀏覽器會自動的把它加在請求的 header 當中,設置 secure 的話,cookie 就只允許通過 HTTPS 傳輸。secure 選項可以過濾掉一些使用 HTTP 協議的 XSS 注入,但並不能完全阻止。

httpOnly 選項使得 JS 不能讀取到 cookie,那麼 XSS 注入的問題也基本不用擔心了。但設置 httpOnly 就帶來了另一個問題,就是很容易的被 XSRF,即跨站請求偽造。當你瀏覽器開著這個頁面的時候,另一個頁面可以很容易的跨站請求這個頁面的內容。因為 cookie 默認被發了出去。

解決方案

JWT(Json Web Token)

JWT 是一個開放標准(RFC 7519),它定義了一種用於簡潔,自包含的用於通信雙方之間以 JSON 對象的形式安全傳遞信息的方法。該信息可以被驗證和信任,因為它是數字簽名的。JWTS可以使用秘密(使用HMAC演算法)或公鑰/私鑰對使用RSA或ECDSA來簽名。

- 簡潔(Compact):可以通過URL, POST 參數或者在 HTTP header 發送,因為數據量小,傳輸速度快。

- 自包含(Self-contained):負載中包含了所有用戶所需要的信息,避免了多次查詢資料庫

JWT 組成

JWT由3個子字元串組成,分別為Header,Payload以及Signature,結合JWT的格式即:Header.Payload.Signature。(Claim是描述Json的信息的一個Json,將Claim轉碼之後生成Payload)。

Header

Header是由下面這個格式的Json通過Base64編碼(編碼不是加密,是可以通過反編碼的方式獲取到這個原來的Json,所以JWT中存放的一般是不敏感的信息)生成的字元串,Header中存放的內容是說明編碼對象是一個JWT以及使用「SHA-256」的演算法進行加密(加密用於生成Signature)

- 頭部包含了兩部分,token 類型和採用的加密演算法

- Base64是一種編碼,也就是說,它是可以被翻譯回原來的樣子來的。它並不是一種加密過程。

Payload

Payload是通過Claim進行Base64轉碼之後生成的一串字元串,Claim是一個Json,Claim中存放的內容是JWT自身的標准屬性,所有的標准屬性都是可選的,可以自行添加,比如:JWT的簽發者、JWT的接收者、JWT的持續時間等;同時Claim中也可以存放一些自定義的屬性,這個自定義的屬性就是在用戶認證中用於標明用戶身份的一個屬性,比如用戶存放在資料庫中的id,為了安全起見,一般不會將用戶名及密碼這類敏感的信息存放在Claim中。將Claim通過Base64轉碼之後生成的一串字元串稱作 Payload

Signature

Signature是由Header和Payload組合而成,將Header和Claim這兩個Json分別使用Base64方式進行編碼,生成字元串Header和Payload,然後將Header和Payload以Header.Payload的格式組合在一起形成一個字元串,然後使用上面定義好的加密演算法和一個密匙(這個密匙存放在伺服器上,用於進行驗證)對這個字元串進行加密,形成一個新的字元串,這個字元串就是 Signature

簽名的目的: 最後一步簽名的過程,實際上是對頭部以及負載內容進行簽名,防止內容被竄改。如果有人對頭部以及負載的內容解碼之後進行修改,再進行編碼,最後加上之前的簽名組合形成新的JWT的話,那麼伺服器端會判斷出新的頭部和負載形成的簽名和JWT附帶上的簽名是不一樣的。如果要對新的頭部和負載進行簽名,在不知道伺服器加密時用的密鑰的話,得出來的簽名也是不一樣的。

三個部分通過.連接在一起就是我們的 JWT 了:

JWT認證

伺服器在生成一個JWT之後會將這個token發送到客戶端機器,在客戶端再次訪問受到JWT保護的資源URL鏈接的時候,伺服器會獲取到這個token信息,首先將Header進行反編碼獲取到加密的演算法,在通過存放在伺服器上的密匙對Header.Payload 這個字元串進行加密,比對token中的Signature和實際加密出來的結果是否一致,如果一致那麼說明該token是合法有效的,認證成功,否則認證失敗。

JWT使用總結

1. 首先,前端通過Web表單將自己的用戶名和密碼發送到後端的介面。這一過程一般是一個HTTP POST請求。建議的方式是通過SSL加密的傳輸(https協議),從而避免敏感信息被嗅探。

2. 後端核對用戶名和密碼成功後,將用戶的id等其他信息作為JWT Payload(負載),將其與頭部分別進行Base64編碼拼接後簽名,形成一個JWT。形成的JWT就是一個形同lll.zzz.xxx的字元串。

3. 後端將JWT字元串作為登錄成功的返回結果返回給前端。前端可以將返回的結果保存在Cookie或localStorage或sessionStorage上,退出登錄時前端刪除保存的JWT即可。

4. 前端在每次請求時將JWT放入HTTP Header中的Authorization位。(解決XSS和XSRF問題)

5. 後端檢查是否存在,如存在驗證JWT的有效性。例如,檢查簽名是否正確;檢查Token是否過期;檢查Token的接收方是否是自己(可選)。

6. 驗證通過後後端使用JWT中包含的用戶信息進行其他邏輯操作,返回相應結果。

JWT和Session方式存儲id的差異

Session方式存儲用戶id的最大弊病在於Session是存儲在伺服器端的,所以需要佔用大量伺服器內存,對於較大型應用而言可能還要保存許多的狀態。一般而言,大型應用還需要藉助一些KV資料庫和一系列緩存機制來實現Session的存儲。

而JWT方式將用戶狀態分散到了客戶端中,可以明顯減輕服務端的內存壓力。除了用戶id之外,還可以存儲其他的和用戶相關的信息,例如該用戶是否是管理員、用戶所在的分組等。雖說JWT方式讓伺服器有一些計算壓力(例如加密、編碼和解碼),但是這些壓力相比磁碟存儲而言可能就不算什麼了。

單點登錄

Session方式來存儲用戶id,一開始用戶的Session只會存儲在一台伺服器上。對於有多個子域名的站點,每個子域名至少會對應一台不同的伺服器,例如:

www.taobao.com,nv.taobao.com,nz.taobao.com,login.taobao.com。所以如果要實現在login.taobao.com登錄後,在其他的子域名下依然可以取到Session,這要求我們在多台伺服器上同步Session。使用JWT的方式則沒有這個問題的存在,因為用戶的狀態已經被傳送到了客戶端。

當客戶端和服務端分開部署到不同伺服器的時候,就會遇到跨域訪問的問題,是由瀏覽器同源策略限制的一類請求場景。

跨域解決方案有很多種,下面使用Nginx反向代理的方案

反向代理

代理訪問其實在實際應用中有很多場景,在跨域中應用的原理做法為:通過反向代理伺服器監聽同埠,同域名的訪問,不同路徑映射到不同的地址,比如,在nginx伺服器中,監聽同一個域名和埠,不同路徑轉發到客戶端和伺服器,把不同埠和域名的限制通過反向代理,來解決跨域的問題:

㈢ 一個app項目單點登錄,前端要做什麼,後端要做什麼。

前端需要做你那個用戶姓名,密碼一些驗證什麼的,然後有前端打包數據到後再去處理,進行邏輯判斷就可以了。

㈣ 單點登錄的幾種實現方案

用戶已經登錄企業門戶的前提下,單點登錄到門戶中的應用。門戶與應用的域名有一定關系,門戶的域名是父級域,比如xxx.com,應用的域名為二級域,比如a.xxx.com、b.xxx.com、c.xxx.com

登錄掘敬門戶後埋扒,頒發一個token用於介面認判液慎證,創建一個key為_a,domain為.xxx.com,path為/,value為token的cookie並set-cookie到前端,訪問其他應用時,由於_a的domain為其他應用域名的父級域,會自動帶上_a到後端,後端根據_a做介面校驗,獲取用戶信息等資源,實現單點登錄。

用戶已經登錄企業門戶的前提下,單點登錄到門戶中的應用。門戶與應用的域名沒有關系。

依舊使用上面的方案一,但是token使用header傳輸,不存在跨域問題

以上方案二,有一些細節需要注意

沒有門戶,或者用戶不提前登錄門戶的前提下,不同應用實現單點登錄。

CAS,網上教程眾多,比如 CAS簡介和整體流程 。
方案二實際上也是利用了CAS思想實現的,ticket和token,可以類比CAS的ST(Service Ticket)和TGC(Ticket Granted Cookie)。

㈤ 請問js如何設置單點登錄

你可以將原系統的賬號密碼做成一個配置的json文件,

然後前端去訪問這個文件,賬號密碼一一對應就可以了。

從第三方系統單點登錄到目標系統,

第三方系統會發送token進行驗證,通過解析token,

獲取相應的用戶信息的json串,將其set到自己系統的session中。

㈥ 「浙里辦「項目單點登錄、埋點、二次回退的問題

大家可以看一看語雀 《「浙里辦」h5微應用接入流程》森野 這篇文檔。

接下來我將針對大多數人以及我個人遇到的一些問題做本篇文章的核心講解:

1.單點登錄,首先分為個人用戶的單點登錄和法人用戶的單點登錄:
個人單點登錄分為app登錄和支付寶小程序登錄:
首先我們要判斷當前環境是app環境還是支付寶小程序環境,然後跳轉到不同的路徑,個人用戶登錄我們採用的是直接跳轉到前端頁面,登錄成功後會攜帶ticket等參數跳轉到我們提供的路徑,

法人的單點登錄(app和小程序是一樣的):
由於法人登錄跳轉到頁面時,用的是post請求訪問,但是web頁面只能通過get訪問,所以法人登錄我們採用的方法是將提供的跳轉路徑為後台服務地址,後台服務將登錄成功後通過get方式重定向到前端頁面並攜帶前端需要的參數,

2.二次回退的問題:
我發現大多數人都遇到了二次回退的問題,有很多人解決了二次回退的問題後又出現了其它各種奇奇怪怪的問題,以下是我們解決這個問題的辦法:
window.performance.navigation.type 包含三個值:
0 : TYPE_NAVIGATE (用戶通過常規導航方式訪問頁面,比如點一個鏈接,或者一般的get方式)
1 : TYPE_RELOAD (用戶通過刷新,包括JS調用刷新介面等方式訪問頁面)
2 : TYPE_BACK_FORWARD (用戶通過後退按鈕訪問本頁面)
首先還是判斷是浙里辦app還是支付寶小程物春早序,根據不同的環境處理二次回退

解決app的二次回退問題,這個地方的邏輯是監聽頁面的跳轉,判斷當前頁面是通過刷新或直接訪問進入,還是通過返回進入。從而來判斷是否是直接跳回app

解決支付寶小程序的二次回退問題,這個地方的邏輯是監聽頁面的跳轉,判斷當前頁面是通過刷新或直接訪問進入,還是通過返回進入。從而來判斷是否是直罩雀接跳回浙里辦小程序頁面。

3.埋點,由於有些埋點是通過JSBridge API 獲取的,而JSBridge API 的方法都是非同步的,所以可能會存在埋點不成功的問題。:
埋點主要是採集應用app的信息,日誌,用戶信息和地理位置等信息
web 端通用採集 SDK: https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085
使用vue開發的,這一段要寫在埋點頁面的script裡面,盡量不要放在vue實例中,也不要放在index.html中,否則可能會存在埋點不成功的問題

㈦ java web應用如何實現單點登錄

單點登錄(Single Sign On),簡稱為 SSO,是目前比較流行的企業業務整合的解決方案之一。SSO的定義是在多個應用系統中,用戶只需要登錄一次就可以訪問所有相互信任的應用系統。實現單點登錄需要兩個部分的合作:統一的身份認證服務和修改Web應用,使得每個應用都通過這個統一的認證服務來進行身份效驗。

㈧ 前端登陸實現

四種方式

Cookie 出現的原因: HTTP 協議是無狀態的,每次請求都會建立一個新的鏈接,請求結束就會斷開鏈接,優點就是可以節省鏈接資源,缺點就是無法保存用戶狀態。Cookie 的出現就是為了解決這個問題。

Cookie 是存儲在瀏覽器中的,可以通過 Js 和 set-cookie 這個響應欄位來進行設置。

cookie 的限制:

有了 cookie 之後,服務端就可以從客戶端獲取到信息,如果需要對信息進行驗證,那麼還需要 session

服務端在收到客戶端的請求之後,會在伺服器中開辟一片內存空間來存放 session

第一次登陸之後,下次再訪問的時候就會攜帶這個 cookie,服務端就可以根據 sessionId 進行驗證用戶是否登陸(判斷這個 sessionId 和服務端保存的 sessionId 是否一致,是否有這個 sessionId 的記錄或者記錄是否有效)

客戶端瀏覽器訪問伺服器的時候,伺服器把客戶端信息以某種形式記錄在伺服器上。這就是 Session。客戶端瀏覽器再次訪問時只需要從該 Session 中查找該客戶的狀態就可以了。

Token 是 伺服器 生成的一個字元串,作為客戶端請求的一個令牌。第一次登陸之後,伺服器會生成一個 Token 返回給客戶端,客戶端後續訪問的時候,只需帶上這個 Token 進行身份認證

缺點

JWT(Json Web Token)

服務端不需要存儲 Token 那麼服務端是怎麼驗證客戶端傳遞過來的 Token 是否有效的呢?

答案:

Token 並不是雜亂無章的字元串,而是通過多種演算法拼接而成的字元串

header 部分指定了這個 Token 所使用的簽名演算法

payload 部分表明了這個 JWT 的意圖

signature 部分為 JWT 的簽名,主要是為了讓 JWT 不被隨意的篡改

簽名的部分有兩個步驟

一:

二:

最後的 Token 計算如下:

單點登陸指的是公司會搭建一個公共的認證中心,公司里的所有產品的認證都可以在這個認證中心中完成,一個產品在認證中心認證之後,再去訪問其他產品時就不需要再次認證

這個時候,由於 a.com 存在已登錄的 Cookie 信息,所以伺服器端直接認證成功。

這個時候由於認證中心存在之前登陸過的 cookie,所以不需要再輸入賬號密碼,直接從第四步開始執行

目前我們已經完成了單點登錄,在同一套認證中心的管理下,多個產品可以共享登錄態。現在我們需要考慮退出了,即:在一個產品中退出了登錄,怎麼讓其他的產品也都退出登錄?

原理也不難,其實就是在攜帶 ticket 去請求認證中心的時候,再去請求一下認證中心的退出登陸的 api 即可

當某個產品 c.com 退出登陸時

sso 就是一個集中地驗證系統。你項目內請求時,向 sso 發一個請求,他給你個 token 你扔到游覽器緩存里,請求的時候放在請求頭里帶著。和其他驗證介面一樣。 他好就好在,一個賬號在不同系統里都可以登錄,因為不同項目可以共用這個 token。並且通過 sso 集中管理一些用戶信息,你可以方便的拿用戶信息。

以微信為例子

㈨ 一個app項目單點登錄,前端要做什麼,後端要做什麼。

前端需要做你那個用戶姓名,密碼一些驗證什麼的,然逗橡野後有山喊前如春端打包數據到後再去處理,進行
邏輯判斷
就可以了。