將你自己的登入介面帶到 Logto Cloud
本教程將指導你創建和部署你自己的自定義登入介面到 Logto Cloud。
背景
Logto 提供一個開箱即用的登入體驗介面,涵蓋了所有 Logto 功能,包括登入、註冊、密碼恢復、單一登入 (SSO) 等。 用戶還可以使用我們的 "自定義 CSS" 功能來自定義登入體驗介面的外觀。
然而,一些用戶仍然希望能夠深度自定義他們的登入體驗(包括介面和認證流程)以符合他們的品牌和特定業務需求。 我們聽到了你的意見!我們很高興地宣布,"帶上你自己的介面" 功能現在已經在 Logto Cloud 推出。
在本教程中,我們將指導你完成創建和部署你自己的自定義登入介面到 Logto Cloud 的步驟。
先決條件
在開始之前,請確保你擁有以下條件:
- 一個具有訂閱計劃的 Logto Cloud 帳戶
- 一個與 Logto 集成的應用程序(快速入門)
- 已安裝 Logto tunnel CLI
- HTML、CSS 和 JavaScript 的基本知識
為了簡單起見,我們將在接下來的步驟中使用經典的 "用戶名和密碼" 登入方法。記得在 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 文檔。
測試你的自定義登入頁面
- 進入你的應用程序並點擊 "登入" 按鈕。
- 你應該被重定向到自定義登入頁面
http://localhost:9000/
。 - 輸入用戶名和密碼,然後點擊 "提交" 按鈕。
- 如果一切設置正確,應該會重定向回你的應用程序,並帶有已認證的用戶信息。
部署你的自定義登入介面到 Logto Cloud
一旦你完成了在本地開發和測試自定義登入介面,你可以將它部署到 Logto Cloud。 只需創建一個自定義介面文件夾的 zip 文件,並上傳到 Logto Console 的 "自定義介面" 部分。
上傳後,保存更改,你的自定義登入介面將在你的 Logto Cloud 租戶中上線,替換內建的 Logto 登入體驗。
最後,返回你的應用程序,將端點 URI 更改回你的 Logto Cloud 端點:https://foobar.logto.app/
。
這次,你可以停止 Logto 隧道服務,應用程序現在應直接使用在線托管的自定義介面。
總結
在本教程中,我們已經引導你完成實現並部署你自己的自定義登入介面到 Logto Cloud 的過程。
透過這個功能,你現在可以深度自定義你的登入介面和認證流程,以符合你的品牌和特定業務需求。
祝編碼愉快! 🚀