繁體中文（香港）

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

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

    Charles
    Charles
    Developer

    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 提供一個開箱即用的登入體驗介面，涵蓋了所有 Logto 功能，包括登入、註冊、密碼恢復、單一登入 (SSO) 等。 用戶還可以使用我們的 "自定義 CSS" 功能來自定義登入體驗介面的外觀。

    然而，一些用戶仍然希望能夠深度自定義他們的登入體驗（包括介面和認證流程）以符合他們的品牌和特定業務需求。 我們聽到了你的意見！我們很高興地宣布，"帶上你自己的介面" 功能現在已經在 Logto Cloud 推出。

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

    先決條件

    在開始之前，請確保你擁有以下條件：

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

    用戶名和密碼登入

    創建你自定義的登入介面

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

    自定義登入頁面

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

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

    由於 Logto 是開源的，另一個建議是克隆 Logto Experience project，並修改代碼以滿足你的需求。這是用 React 和 TypeScript 編寫的完整功能 Logto 內建登入體驗介面。

    設置 Logto tunnel CLI

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

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

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

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

    從你的應用程序觸發登入

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

    讓我們以 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 的 "自定義介面" 部分。

    上傳自定義介面

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

    自定義介面已啟用

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

    總結

    在本教程中，我們已經引導你完成實現並部署你自己的自定義登入介面到 Logto Cloud 的過程。

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

    祝編碼愉快！ 🚀

    免費試用 Logto Cloud