繁體中文（台灣）
  • custom-ui
  • bring-your-own-ui
  • custom-sign-in
  • custom-auth-flow

將你的自定義登入 UI 帶入 Logto Cloud

本教程將指導你完成創建和部署你自己的自定義登入 UI 至 Logto Cloud 的過程。

Charles
Charles
Developer

背景

Logto 提供現成的登入體驗 UI，涵蓋所有 Logto 功能，包括登入、註冊、密碼恢復、單一登錄 (SSO) 等。 用戶還可以使用我們的 "自定義 CSS" 功能來自定義登入體驗 UI 的外觀和風格。

然而，一些用戶仍想深入自定義他們的登入體驗（包括 UI 和認證流程），以符合他們的品牌和特定業務需求。 我們聽到了你的聲音！我們很高興地宣布，"將你的自定義 UI 帶入" 功能現在在 Logto Cloud 中可用。

在本教程中，我們將指導你創建和部署你自己的自定義登入 UI 至 Logto Cloud 的步驟。

先決條件

在你開始之前，請確認你擁有以下內容：

為了簡單起見，我們將在以下步驟中使用經典的 "用戶名和密碼" 登入方法。記得在 Logto 控制台中更改你的登入方法。

用戶名密碼登入

創建你的自定義登入 UI

對於登入 UI 的最低要求是擁有一個 index.html 文件，其中包含至少用戶名輸入、密碼輸入和提交按鈕的登入表單。 我使用 ChatGPT 生成了一個範例 HTML，然後我得到了這個粉紅可愛的登入頁面。

自定義登入頁面

我為簡單起見省略了 CSS 樣式，這是 HTML 看起來如此簡單的樣子：

你也可以從你最喜歡的前端框架，如 Create React App、Next.js 或 Vue CLI 開始使用模板。

由於 Logto 是開源的，另一個建議是克隆 Logto Experience 專案，並修改代碼以滿足你的需求。這是完整版 Logto 構建的登入體驗 UI，以 React 和 TypeScript 編寫。

設置 Logto tunnel CLI

Logto tunnel CLI 是一個工具，不僅可以管理你的 HTML 頁面，還可以允許你在本地開發環境中從 HTML 頁面與 Logto 的 Experience API 進行交互。

假設你的 index.html 頁面位於 /path/to/your/custom-ui，你的 Logto 租戶 ID 是 foobar，你可以這樣運行命令：

或者，如果你正在使用內置開發服務器的 UI 框架，且你的頁面在 http://localhost:4000 提供服務，你可以像這樣運行命令：

運行命令後，通道服務將在你的本地機器 http://localhost:9000/ 上啟動。

從你的應用程序觸發登入

前往你先前創建的應用程序，將 Logto 端點從 https://foobar.logto.app/ 更改為 http://localhost:9000/ 在你的 Logto SDK 設定中。

讓我們以我們的 React 範例項目為例：

點擊你應用程序中的 "登入" 按鈕。你應會被重定向到你的自定義登入頁面，而不是內置的 Logto 登入 UI。

與 Logto Experience API 交互

在此步驟中，我們將在你的自定義 UI 中與 Logto Experience API 進行交互。首先，創建一個 script.js 文件，並在你的 index.html 中添加引用。

將以下代碼放入你的 script.js 文件中。

此腳本將在這些 API 的幫助下完成用戶名和密碼登入流程：

  • PUT /api/experience - 開始登入交互
  • POST /api/experience/verification/password - 驗證用戶名和密碼
  • POST /api/experience/identification - 為當前交互識別用戶
  • POST /api/experience/submit - 提交登入交互

參考 Logto Experience API 文檔 以獲取更多詳細資訊。

測試你的自定義登入頁面

  1. 前往你的應用程序並點擊 "登入" 按鈕。
  2. 你應被重定向至位於 http://localhost:9000/ 的自定義登入頁面。
  3. 輸入用戶名和密碼，並點擊 "提交" 按鈕。
  4. 如果一切設置正確，你應被重定向回你的應用程序，並獲得已驗證的用戶資訊。

部署你的自定義登入 UI 至 Logto Cloud

當你在本地開發並測試完你的自定義登入 UI 後，可以將其部署至 Logto Cloud。 只需創建你的自定義 UI 資料夾的壓縮文件，並將其上傳至 Logto 控制台的 "自定義 UI" 部分。

上傳自定義 UI

上傳後，保存更改，你的自定義登入 UI 將在你的 Logto Cloud 租戶中上線，取代內置的 Logto 登入體驗。

自定義 UI 啟用

最後，返回你的應用程序，將端點 URI 更改回你的 Logto cloud 環境：https://foobar.logto.app/。 這一次，你可以停止 Logto 隧道服務，並且你的應用程序應該可以直接使用在線託管的自定義 UI。

結論

在本教程中，我們帶你完成了實現並部署你自己的自定義登入 UI 至 Logto Cloud 的過程。

通過這個功能，你現在可以深入自定義你的登入 UI 和認證流程，以符合你的品牌和特定業務需求。

編碼愉快！ 🚀

免費試用 Logto Cloud