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

將你自己的登入界面帶到 Logto Cloud

本教程將指導你創建和部署自己的自定義登入界面到 Logto Cloud。

Charles
Charles
Developer

背景

Logto 提供一個現成的登入體驗界面，涵蓋所有 Logto 功能，包括登入、註冊、密碼恢復、單點登入 (SSO) 等。 用戶還可以使用我們的“自定義 CSS”功能來自定義登入體驗界面的外觀和感覺。

不過，仍有一些用戶希望深度自定義他們的登入體驗（包括界面和認證流程），以符合他們的品牌和特定業務需求。 我們聽到了！我們很高興地宣布“帶上你自己的 UI”功能已在 Logto Cloud 上提供。

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

先決條件

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

為了簡單起見，我們會在接下來的步驟中使用經典的“使用者名稱與密碼”登入方法。記得在 Logto Console 中更改你的登入方法。

使用者名稱密碼登入

創建你的自定義登入界面

登入界面的最低要求是擁有一個 index.html 文件，其中包含至少一個使用者名稱輸入、密碼輸入和提交按鈕的登入表單。 我使用 ChatGPT 生成了一個範例 HTML，以下是我設計出來的這個粉紅可愛的登入頁面。

自定義登入頁面

為了簡化起見，我省略了 CSS 樣式，以下是簡單的 HTML 看起來的樣子：

你也可以從你喜愛的前端框架的樣板開始，如 Create React App、Next.js 或 Vue CLI。

因為 Logto 是開源的，另一個建議是複製 Logto Experience 專案，然後修改代碼以符合你的需求。這是使用 React 和 TypeScript 編寫的全功能 Logto 內建登入體驗界面。

設置 Logto tunnel CLI

Logto tunnel CLI 是一個工具，不僅能在本地開發環境提供你的 HTML 頁面，還可以讓你從 HTML 頁面與 Logto 的 Experience API 互動。

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

或者，如果你使用的 UI 框架有內建開發服務器，並且頁面服務於 http://localhost:4000，可以這樣運行命令：

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

從你的應用程序觸發登入

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

以我們的 React 範例專案為例：

在你的應用中點擊“登入”按鈕。你應該會被重定向到你的自定義登入頁面，而不是看到內建的 Logto 登入界面。

與 Logto Experience API 互動

在此步驟中，我們將在你的自定義界面中與 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. 如果一切設定正確，你應該被重定向回你的應用程序，並顯示已通過身份驗證的用戶信息。

部署你的自定義登入界面到 Logto Cloud

一旦你在本地完成開發和測試自定義登入界面，你可以將其部署到 Logto Cloud。 只需創建一個自定義界面文件夾的 zip 文件，並將其上傳到你的 Logto Console 的“自定義 UI”部分。

上傳自定義 UI

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

自定義 UI 啟用

最後，回到你的應用程序，將端點 URI 改回你的 Logto Cloud 端點：https://foobar.logto.app/。 這次，你可以停止 Logto 隧道服務，現在你的應用程序應該可以直接使用線上托管的自定義 UI。

結論

在本教程中，我們走過了實施和部署你自己的自定義登入界面到 Logto Cloud 的過程。

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

祝你編程愉快！ 🚀

免費試用 Logto Cloud