繁體中文（台灣）
將你自己的登入 UI 帶到 Logto Cloud
本教程將引導你完成將自定義登入 UI 創建並部署到 Logto Cloud 的過程。
Charles
Developer
Developer
本教程將引導你完成將自定義登入 UI 創建並部署到 Logto Cloud 的過程。
Logto 提供了一個開箱即用的登入體驗 UI，涵蓋了所有 Logto 功能，包括登入、註冊、密碼恢復、單點登入 (SSO) 等。 用戶還可以使用我們的「自定義 CSS」功能來自定義登入體驗 UI 的外觀和感覺。
然而，一些用戶仍然希望深度自定義其登入體驗（包括 UI 和授權流程）以符合其品牌和特定業務需求。 我們收到了你的回饋！我們很高興地宣布，「Bring your own UI」功能現在已在 Logto Cloud 上可用。
在本教程中，我們將指導你完成創建並部署你自己的自定義登入 UI 到 Logto Cloud 的步驟。
開始之前，請確保你有以下資源：
為了簡化起見，接下來的步驟中，我們將使用經典的「用戶名和密碼」登入方式。記得在 Logto Console 中更改你的登入方式。
登錄 UI 的最低要求是擁有一個 index.html 文件，其中包含至少一個用戶名輸入、密碼輸入和提交按鈕的登錄表單。
我使用 ChatGPT 生成了一個示例 HTML，這是一個粉紅可愛的登錄頁面。
為簡潔起見，我省略了 CSS 樣式，這是 HTML 的簡單樣子：
你還可以從你喜愛的前端框架中使用模板開始，如 Create React App、Next.js 或 Vue CLI。
由於 Logto 是開源的，另一個推薦是克隆 Logto Experience 專案，並修改代碼以適應你的需求。這是一個使用 React 和 TypeScript 編寫的完整功能 Logto 內置登入體驗 UI。
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。
在這一步，我們將在你的自定義 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。
http://localhost:9000/ 的自訂登入頁面。一旦你完成了在本地開發和測試你的自定義登入 UI，就可以將其部署到 Logto Cloud。 只需將你的自定義 UI 文件夾創建一個 zip 文件，然後將其上傳到你的 Logto Console 的「自定義 UI」部分。
上傳後，保存更改，你的自訂登入 UI 就將在你的 Logto Cloud 租戶中上線，取代內建的 Logto 登入體驗。
最後，返回你的應用程式，將端點 URI 更改回 Logto 的雲端端點：https://foobar.logto.app/。
這次，你可以停止 Logto 隧道服務，你的應用程式現在應該可以直接與線上託管的自定義 UI 一起工作。
在本教程中，我們已帶你完成了實現和部署你自己的自定義登入 UI 到 Logto Cloud 的過程。
使用此功能，你現在可以深度自定義你的登入 UI 和授權流程，以符合你的品牌和特定業務需求。
祝編碼愉快！ 🚀