iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Modern Web

從 0 到 1:30 篇文章帶你玩轉 Electron 與 React系列 第 26

實作單點登入 (SSO) 登入功能 (上)

  • 分享至 

  • xImage
  •  

單點登入 (SSO - Single Sign On) 是現代應用中常見的一項身份驗證技術,它允許使用者只需要一次登入,即可訪問多個相關聯的系統或應用,而不需要為每個系統重新登入。這對於提升使用者體驗以及減少密碼管理負擔非常有幫助。

在這篇文章中,我們將介紹如何在 Electron 應用中實作 SSO 功能,並通過外部認證服務提供安全的身份驗證。

單點登入 (single sign on) 的工作原理

SSO 的基本流程是,當使用者嘗試登入某一應用時,應用會將使用者重定向到一個 身份驗證提供者(如 OAuth、OpenID Connect 等)來進行認證。身份驗證提供者會處理登入過程,然後將認證結果返回給應用。這樣,使用者就能通過同一個認證來訪問其他整合了相同 SSO 的應用。

常見的 SSO 協議:

  • OAuth 2.0:一種流行的身份驗證協議,支持第三方應用通過授權碼獲取使用者資料。
  • OpenID Connect (OIDC):基於 OAuth 2.0 的身份驗證協議,允許應用驗證使用者的身份,並從身份提供者處獲取使用者資訊。
  • SAML 2.0:基於 XML 的協議,通常應用於企業內部或 B2B 的單點登入。

SSO 的流程

Electron 視窗程式要跑 SSO 流程有兩種方法:

  1. 開啟 Webview 並導向 OAuth Provider 網址
  2. 開啟系統瀏覽器並導向 OAuth Provider 網址

不管是使用哪一種方法,最終都會取得身份驗證資訊在應用程式中做使用

參考主流應用流程

我們可以參考目前的主流應用程式的 SSO 流程,比如 Postman,此應用程式的流程如下:

  1. 按下 singn in 按鈕後開啟系統瀏覽器並導向 Postman Identity Service 進行登入
    https://ithelp.ithome.com.tw/upload/images/20241010/20149301J5Yr5HOIXL.pnghttps://ithelp.ithome.com.tw/upload/images/20241010/20149301Xlf84xVhhn.png

  2. 成功登入後會跳出視窗並使用 自定義協定 回到 Postman 桌面主程式
    https://ithelp.ithome.com.tw/upload/images/20241010/20149301PbjHIFJ6P8.png

自定義協定

這是一種允許外部應用(如瀏覽器)啟動 Electron 應用並傳遞資料的方式。它的運作方式是,Electron 應用會註冊一個自定義的 URL 協定(如 myapp://),當瀏覽器遇到這樣的協定時,就會嘗試打開對應的 Electron 應用並將 URL 中的參數傳遞給應用。

使用自定義協定進行深層連結的流程

註冊自定義協定:在 Electron 應用中註冊協定,例如 myapp://callback?code=AUTH_CODE。
使用協定從瀏覽器回到應用:當使用者在瀏覽器中進行操作(例如 SSO 登入)後,SSO 提供者會將使用者重定向到 myapp://callback 協定,該協定會觸發 Electron 應用啟動並處理返回的資料。

實作流程

我們的實作流程會參考 Postman 的流程,按下主頁登入按鈕後開啟系統瀏覽器,此處會使用 Google Auth 還做示範

  1. 實作一個視窗並有一個 React 元件
  2. 元件內實作一個按鈕會開啟系統瀏覽器並導向 Google Auth 網址
  3. 登入 Google
  4. 使用 自定義協定 傳遞 token 回到應用程式
  5. Electron 程式收到 token 後使用 Electron Sotre 儲存 token

請參考:本地存儲數據:使用 Electron Store

總結

透過 SSO,使用者只需一次登入即可訪問多個應用,極大地提升了使用者體驗。在 Electron 應用中,實作 SSO 涉及到將使用者重定向到外部認證系統,並安全地處理返回的 Token。結合 OAuth 或 OpenID Connect 這樣的身份驗證標準,你可以為應用帶來更好的安全性與便利性。

無論是透過 Google OAuth、Auth0、Okta 還是其他身份驗證服務提供者,實作 SSO 的基本流程都相似。隨著應用安全需求的增加,單點登入已成為大多數現代應用的重要功能。

此篇文章說明了 SSO 流程以及如何在 Electron 進行 SSO 流程,下一篇會進行實作,呈現一個 Google SSO 登入的簡單範例給讀者參考~


上一篇
建立通知與系統 Tray 應用
系列文
從 0 到 1:30 篇文章帶你玩轉 Electron 與 React26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言