繁體中文(香港)

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

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

    Charles
    Charles
    Developer

    背景

    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 的過程。

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

    祝編碼愉快! 🚀