繁體中文（台灣）

    將你自己的登入 UI 帶到 Logto Cloud

    本教程將引導你完成將自定義登入 UI 創建並部署到 Logto Cloud 的過程。

    Charles
    Charles
    Developer

    背景

    Logto 提供了一個開箱即用的登入體驗 UI，涵蓋了所有 Logto 功能，包括登入、註冊、密碼恢復、單點登入 (SSO) 等。 用戶還可以使用我們的「自定義 CSS」功能來自定義登入體驗 UI 的外觀和感覺。

    然而，一些用戶仍然希望深度自定義其登入體驗（包括 UI 和授權流程）以符合其品牌和特定業務需求。 我們收到了你的回饋！我們很高興地宣布，「Bring your own UI」功能現在已在 Logto Cloud 上可用。

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

    先決條件

    開始之前，請確保你有以下資源：

    為了簡化起見，接下來的步驟中，我們將使用經典的「用戶名和密碼」登入方式。記得在 Logto Console 中更改你的登入方式。

    用戶名密碼登入

    創建你的自定義登入 UI

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

    自定義登錄頁面

    為簡潔起見，我省略了 CSS 樣式，這是 HTML 的簡單樣子：

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

    由於 Logto 是開源的，另一個推薦是克隆 Logto Experience 專案，並修改代碼以適應你的需求。這是一個使用 React 和 TypeScript 編寫的完整功能 Logto 內置登入體驗 UI。

    設置 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 docs。

    測試你的自定義登錄頁面

    1. 前往你的應用程式，點擊「登入」按鈕。
    2. 你應該會被重定向到 http://localhost:9000/ 的自訂登入頁面。
    3. 輸入用戶名和密碼，然後點擊「提交」按鈕。
    4. 如果一切設置正確，系統會重定向回你的應用程式，並顯示已驗證的用戶信息。

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

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

    上傳自定義 UI

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

    自定義 UI 啟用

    最後，返回你的應用程式，將端點 URI 更改回 Logto 的雲端端點：https://foobar.logto.app/。 這次，你可以停止 Logto 隧道服務，你的應用程式現在應該可以直接與線上託管的自定義 UI 一起工作。

    結論

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

    使用此功能，你現在可以深度自定義你的登入 UI 和授權流程，以符合你的品牌和特定業務需求。

    祝編碼愉快！ 🚀

    免費試用 Logto Cloud