繁體中文（香港）
  • auth
  • integration
  • logto
  • protected-app

最快速構建認證系統的方法

使用 Logto 將認證設置時間縮短至不到一小時！含無代碼集成、免費內置電子郵件服務、社交連接的逐步指南，以及一鍵認證流配置，Logto 讓認證變得輕而易舉。

Ran
Ran
Product & Design

Stop wasting weeks on user auth
Launch secure apps faster with Logto. Integrate user auth in minutes, and focus on your core product.
Get started
Product screenshot

為你的產品添加用戶認證系統應該是輕而易舉的，對吧？畢竟，這是一個如此標準的模塊。至少我是這麼想的，而 Logto 團隊致力於讓每個產品都擁有一個安全且適合業務的身份系統。

能夠多快完成？ 那麼，讓我們看看。這裡有一個超快速的低代碼解決方案，專為網頁應用程序設計，非常適合快速測試或直接部署到生產環境。包括平台註冊，整個過程可以在 僅需 1 小時或更快 的時間內完成。不相信嗎？去試試看。

作為一家 AI 工具公司，時間就是金錢，我需要快速啟動以佔領市場。以下是我需要的認證內容：

  • 註冊： 電郵 + 驗證電郵 + 設置密碼
  • 登入： 電郵 + 密碼
  • 忘記密碼： 驗證電郵 + 重置密碼
  • 社交登入： 我們選擇最流行的 Google 登入。

好了，我們開始吧。

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

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

創建帳戶和租戶

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

連接到我的第三方電子郵件提供商並製作電子郵件模板？哦，等等！Logto 有一個內置的電子郵件服務，不需要配置。

  1. 輸入基本信息：發件人名稱，公司的信息，並上傳電子郵件徽標（都是可選的）。
  2. 測試它：給自己發封電子郵件。華麗的驗證郵件到達了。

設置電子郵件連接

沒錯，整個設置和測試花費不到 5 分鐘！如果你不介意發件人是 “[email protected]”，你可以使用這個免費服務而不需要為不同的場景編寫電子郵件模板。否則，你可以選擇自定義電子郵件提供商。

步驟 3：設置社交連接

不同的產品需要不同的 Google 提供商客戶 ID，所以我需要自己鏈接 Google 連接程序。但是這並不難。

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

設置社交連接

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

設置谷歌 API 控制台

感謝 Logto 的逐步指南，我不到 10 分鐘就完成了設置。

步驟 4：設置登入體驗

配置好提供商資源後，是時候設置登錄和註冊體驗了。

  1. 導航到“登入體驗”部分：
    • 上傳你的應用程序徽標和圖標。
    • 替換品牌顏色。
    • 一鍵啟用黑暗模式並填寫相同的字段。
  2. 前往“註冊和登錄”選項卡更改認證方法：
    • 設置“電子郵件地址”為註冊標識符，並勾選“創建你的密碼”和“在註冊時驗證”。
    • 設置“電子郵件地址”和“密碼”為登入標識符和認證因素。
    • 添加“Google”作為社交登錄。

設置登入體驗

方便的是，默認設置正是我所需要的，因此這並不耗時。

步驟 5：無需 SDK 集成網頁應用

為何浪費時間集成服務？使用 Logto 的受保護應用程序來代理我的應用請求。

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

    創建受保護應用

  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 團隊交流。

集成愉快！