繁體中文（台灣）
  • auth
  • integration
  • logto
  • protected-app

打造身份驗證系統的最快方式

將身份驗證設置時間縮短到不到一小時，使用 Logto！透過無編碼整合、免費內建電子郵件服務、社交連接的分步指南，以及一鍵設定身份驗證流程，Logto 讓身份驗證變得輕而易舉。

Ran
Ran
Product & Design

為你的產品新增使用者身份驗證系統應該是輕鬆的，對嗎？畢竟，這是一個如此標準化的模組。至少，我是這麼想的，而 Logto 團隊致力於讓每個產品都能擁有安全且適合商業的身份系統。

能有多快？ 那麼，讓我們看看。有一個非常快速的低代碼解決方案適用於網絡應用程式，完美適合快速測試或直接佈署到生產環境。包括平台註冊，這一切可以在 僅僅 1 小時甚至更快 完成。不相信嗎？那就試試看吧。

作為一家 AI 工具公司，時間就是金錢，我需要快速推出以捕捉市場。這是我對身份驗證的需求：

  • 註冊： 電子郵件 + 驗證電子郵件 + 設置密碼
  • 登入： 電子郵件 + 密碼
  • 忘記密碼： 驗證電子郵件 + 重設密碼
  • 社交登入： 我們選擇最受歡迎的，Google 登入。

好了，讓我們開始。

步驟 1：創建 Logto 帳戶和租戶

  1. 訪問 cloud.logto.io，註冊一個 Logto 帳戶。
  2. 直接創建生產租戶。免費計畫（50,000 MAU）足夠滿足我們的初創需求。

創建帳戶和租戶

步驟 2：設置電子郵件連接

連接第三方電子郵件供應商和編寫電子郵件範本？哦，等等！Logto 擁有內建的電子郵件服務，無需配置。

  1. 輸入基本信息：發件人名稱、公司信息和上傳電子郵件 logo（均為可選）。
  2. 測試：給自己發一封電子郵件。驗證的華美電子郵件抵達。

設置電子郵件連接

沒錯，整個設置和測試花費不到 5 分鐘！如果你不介意發件人顯示為“[email protected]”，你可以使用這個免費服務並省去撰寫不同情境的電子郵件範本。否則，你可以選擇自定義電子郵件供應商。

步驟 3：設置社交連接

不同產品需要不同的 Google 提供者客戶 ID，所以我需要自己連接 Google 連接器。但這並不難。

  1. 在 Logto 中填入 Client ID 和 Client secret，然後啟用 Google One Tap。

設置社交連接

  1. 輸入 Callback URL。在 Google API 控制台中選擇 ../auth/userinfo.email、../auth/userinfo.profile 和 openid。

設置 Google API 控制台

多虧 Logto 的分步指南，我在不到 10 分鐘內完成了設置。

步驟 4：設置登入體驗

配置了提供者資源後，是時候設定登入和註冊體驗。

  1. 導航到“登入體驗”部分：
    • 上傳應用程式 logo 和圖標。
    • 更改品牌顏色。
    • 一鍵啟用暗模式並填入相同的字段。
  2. 進入“註冊和登入”標籤以更改身份驗證方法：
    • 設置“電子郵件地址”為註冊標識符，並選中“創建密碼”和“註冊時驗證”。
    • 設置“電子郵件地址”和“密碼”為登入標識符和身份驗證因素。
    • 添加“Google”作為社交登入。

設置登入體驗

方便的是，默認設置正是我所需要的，所以這並沒有花太多時間。

步驟 5：在沒有 SDK 的情況下整合 Web 應用程式

為什麼浪費時間在整合服務上？使用 Logto 的保護應用程式來代理我的應用程式請求。

  1. 創建一個保護應用程式： 輸入我的應用程式的 original URL（沒有身份驗證保護的那個，任何人都可以訪問）。 為測試設置 app domain ，使用 “.protected.app” 後綴（這個網站地址提供給用戶訪問你的網站，但它已經配置有身份驗證流程，因此名為“保護應用程式”）。

    創建保護應用程式

  2. 應用程式創建後，訪問這個測試地址 acme.protected.app（👈 你也可以試試！）。訪問此網站需要進行身份驗證。測試成功。

    登入體驗

  3. 為生產環境配置此網站的實際域名，而不是默認的 .protected.app。

  4. 可選：如果你只想在特定路徑上使用身份驗證，可以添加“自定義身份驗證規則”。默認情況下，整個網站受保護。

  5. 身份驗證路徑 /register、/sign-in、/sign-in-callback 和 /sign-out 可以直接添加到按鈕如開始使用、登入和登出。

  6. 最後但同樣重要的是，使用 HTTP 基本身份驗證來保護你的原始伺服器，以完成此代理集成。每個來自保護應用程式的請求包含以下標頭：Authorization: Basic base64(appId:appSecret)。

就這樣！在短短一小時內，我的網站就受到了身份驗證的保護。

結論

你可以自信地使用這個超快速的解決方案來保護你的網站。隨著你的產品增長，強大而全面的 Logto 系統讓你可以無縫升級到多應用支援、MFA、SSO、第三方應用授權、RBAC 和多租戶組織等功能，並整合各類框架以提升資源保護和使用者管理。

我邀請你親自體驗，快速為你的网站裝備身份驗證保護。

免費試用 Logto Cloud

想了解更多關於快速身份驗證整合的信息，請在我們的 Roadmap 上提供反饋或直接聯繫我們。別忘了加入我們的 Discord 社群與 Logto 團隊聊天。

祝整合愉快！