跳至主要內容

為你的 WordPress 應用程式新增驗證 (Authentication)

資訊:

為了提供更好的使用者體驗，我們現在建議使用我們的官方 WordPress 插件，而不是遵循本教程。

本教程將向你展示如何將 Logto 整合到你的 WordPress 網站中。

先決條件​

整合​

安裝插件​

我們將使用 OpenID Connect Generic 插件，通過 OIDC 協議將 Logto 整合到你的 WordPress 網站中。

  1. 登入你的 WordPress 網站。
  2. 導航到「插件」並點擊「新增」。
  3. 搜尋「OpenID Connect Generic」並安裝 daggerhart 的插件。
  4. 啟用插件。

配置重定向 URI​

首先，讓我們配置重定向 URI。你可以在插件設置中找到它，向下滾動到「Notes」部分，並複製「Redirect URI」值。

切換到 Logto Console 的應用程式詳細資訊頁面。新增一個重定向 URI，然後點擊「儲存變更」。

設定插件​

請參考下表進行必要的配置：

插件欄位描述
Client ID你的 Logto 應用程式的 app ID
Client Secret你的 Logto 應用程式的 app secret
OpenID Scope輸入 email profile openid offline_access
Login Endpoint URL你的 Logto 應用程式的授權端點 URL，格式為 https://[tenant-id].logto.app/oidc/auth，你可以在 Logto 應用程式頁面點擊「顯示端點詳細資訊」來獲取 URL。
Userinfo Endpoint URL你的 Logto 應用程式的 userinfo 端點 URL，格式為 https://[tenant-id].logto.app/oidc/me。
Token Validation Endpoint URL你的 Logto 應用程式的權杖驗證端點 URL，格式為 https://[tenant-id].logto.app/oidc/token。
End Session Endpoint URL你的 Logto 應用程式的結束會話端點 URL，格式為 https://[tenant-id].logto.app/oidc/session/end。
Identity Key在 ID 權杖中包含使用者身分的唯一鍵，根據你的配置可以是 email 或 sub。
Nickname Key在 ID 權杖中包含使用者暱稱的鍵，你可以將其設置為 sub，並在之後更改。

檢查點：測試你的應用程式​

現在，你可以測試你的應用程式：

  1. 登出你的 WordPress 網站。
  2. 訪問 WordPress 登入頁面，然後點擊「使用 Logto 登入」按鈕。
  3. 你將被重定向到 Logto 登入頁面。
  4. 使用你的 Logto 帳戶登入。
  5. 你將被重定向回 WordPress 網站並自動登入。

角色 (Roles) 映射​

WordPress 具有內建的使用者角色管理系統，定義了使用者在網站上可以執行的操作（能力）。預設的使用者角色包括管理員、編輯、作者、貢獻者和訂閱者，每個角色都有其自己的能力集。

Logto 採用基於角色的存取控制 (RBAC, Role-Based Access Control) 作為其授權模型，使用「權限範圍 (Scopes)」作為最小的權限單位。這些權限範圍定義了已驗證使用者在應用程式中被允許執行的具體操作。然而，WordPress 在管理使用者權限時依賴於預定義的「角色」，這些角色將各種能力捆綁在一起。

鑑於這一基本差異，我們建議在 Logto 中創建與 WordPress 中定義的角色相對應的特殊角色。這些角色可能不具有任何權限範圍，它們僅用作將使用者映射到 WordPress 角色的參考。

先決條件​

  • 在 Logto 中設置與 WordPress 中角色相對應的角色。例如，如果你在 WordPress 中有一個「editor」角色，則在 Logto 中創建一個「group:editors」角色。

實施角色映射​

要實施角色映射，我們將在 WordPress 主題的 functions.php 文件中添加自定義代碼。這涉及使用 wp_login 動作鉤子，該鉤子在使用者登入時觸發。以下是設置此功能的分步指南：

步驟 1：訪問你的主題的 functions.php​

打開你的主題的 functions.php 文件。你可以通過 WordPress 管理面板導航到外觀 > 主題編輯器，然後從右側文件列表中選擇 functions.php 來訪問此文件。或者在源代碼中，導航到你的 WordPress 主題目錄並找到 functions.php 文件。此文件允許你添加自定義 PHP 函數，以擴展你的 WordPress 網站的功能。

步驟 2：編寫角色映射函數​

以下是一個你可能會添加到 functions.php 的簡單函數示例。此函數將在使用者登入時觸發，並根據從 Logto 獲取的使用者 roles 宣告分配角色。

function logto_handler($user_login, $user = null) {
	if (!$user) {
		$user = get_user_by('login', $user_login);
	}

	$oidc_claims = get_user_meta($user->ID, 'openid-connect-generic-last-user-claim', true);

	if (in_array('group:editors', $oidc_claims['roles'])) {
		$user->set_role('editor');
	} else {
		$user->set_role('subscriber');
	}
}

add_action('wp_login', 'logto_handler', 10, 2);

步驟 3：理解代碼並自定義它​

  • logto_handler 函數：此函數接受兩個參數：$user_login（用戶名）和 $user（使用者對象）。它從 Logto 中檢索存儲在使用者元數據中的角色作為 openid-connect-generic-last-user-claim，將此角色映射到相應的 WordPress 角色，並將其分配給使用者。

  • add_action：此行將 logto_handler 函數掛接到 wp_login 動作，該動作在使用者登入後觸發。10 是優先級（默認），2 表示函數接受的參數數量。

上述示例將 group:editors 角色的使用者分配為通過 Logto 驗證的「editor」角色。然而，在實際情況中，你可能需要實施更多種類的角色映射。

你可以在 這裡 找到 WordPress 角色及其能力的列表。

步驟 4：測試你的設置​

現在，讓我們通過使用在 Logto 中具有 group:editors 角色的使用者登入來測試角色映射功能。登入後，檢查使用者在 WordPress 中的角色，以確保映射正常工作。

進一步閱讀​

終端使用者流程：驗證流程、帳號流程與組織流程 (End-user flows: authentication flows, account flows, and organization flows) 設定連接器 (Configure connectors) 授權 (Authorization)