建立使用者登入的自訂頁面

發行項
07/25/2024

本文說明如何在 Microsoft Dynamics 365 Commerce 中組建自訂頁面，以處理 Microsoft Entra 企業對消費者 (B2C) 租用戶使用者的自訂登入。

若要使用在 Dynamics 365 Commerce 中建立的自訂頁面來處理使用者登入流程，您必須設定將在 Commerce 環境中引用的 Microsoft Entra 原則。您可以使用 Microsoft Entra B2C 應用程式來設定「註冊並登入」、「設定檔編輯」和「密碼重設」 Microsoft Entra B2C 原則。然後，可以在使用 Microsoft Entra Lifecycle Services (LCS) 為 Commerce 環境完成的佈建過程中引用 Microsoft Dynamics B2C 租用戶和原則名稱。

可以使用登入、註冊、帳戶設定檔編輯、密碼重設或通用 Microsoft Entra 模組來組建自訂 Commerce 頁面。然後應在 Azure 入口網站中的 Microsoft Entra B2C 原則設定中引用為這些自訂頁面發佈的頁面 URL：。

警告

Microsoft Entra 識別碼 B2C 將於 2021 年 8 月 1 日淘汰舊 (舊版) 使用者流程。因此，您應該計劃將使用者流程遷移到新的建議版本。新版本提供了功能同位和新功能。如需詳細資訊，請參閱 Microsoft Entra 識別碼 B2C 中的使用者流程。

Commerce 版本 10.0.15 或更新版本的模組庫應與建議的 B2C 使用者流程一起使用。 Microsoft Entra 識別碼 B2C 中提供的預設使用者原則頁面也可以使用，並允許新增與公司品牌相關的背景圖像、標誌和背景色彩變更。儘管設計功能受到更多限制，但預設使用者原則頁面會提供 Microsoft Entra B2C 原則功能，無需建立和設定專用自訂頁面。

設定 B2C 原則

設定完您的 Microsoft Entra B2C 租用戶並將其與您的 Commerce 環境關聯後，請移至 Azure 入口網站中的 Microsoft Entra B2C 頁面，然後在選單上的原則，選取使用者流程 (原則)。

選單上的使用者 (流程) 命令。

您現在可以設定「註冊並登入」、「設定檔編輯」和「密碼重設」使用者登入流程。

若要設定「註冊並登入」原則，請依照下列步驟操作。

選取新使用者流程，選取註冊並登入，選取建議的索引標籤，然後選取建立。
輸入原則的名稱 (例如，B2C_1_SignInSignUp)。
在身分識別提供者區段中，選取要用於原則的身份識別提供者。至少必須選取電子郵件註冊。
在收集屬性行中中，選取電子郵件地址、名字，和姓氏的核取方塊。
在退貨聲明行中，選取電子郵件地址、名字、身分識別提供者、姓氏和使用者的物件識別碼的核取方塊。
選取確定以建立原則。
雙擊新原則名稱，然後在瀏覽窗格中選取屬性。
將啟用 JavaScript 強制執行頁面配置 (預覽版) 選項設定為開啟。

附註

原則名稱將在 Commerce 環境中完整引用。 (B2C_1_ 前綴將包含在引用中。) 原則建立後無法重新命名。如果您要替換 Commerce 環境的現有原則，您可以刪除原始原則並組建具有相同名稱的新原則。或者，如果環境已佈建，您可以透過服務需求提交新原則名稱。

組建完自訂頁面後，您將返回此原則以完成設定。現在，關閉原則以返回 Azure 入口網站中的使用者流程 (原則) 頁面。

設定「設定檔編輯」原則

若要設定「設定檔編輯」原則，請執行下列步驟。

選取新使用者流程，選取設定檔編輯，選取建議的索引標籤，然後選取建立。
輸入原則的名稱 (例如，B2C_1_EditProfile)。
在身分識別提供者區段中，選取要用於原則的身份識別提供者。至少必須選取本機帳號登入 。
在收集屬性行中，選取名字和姓氏的核取方塊。
在退貨聲明行中，選取電子郵件地址、名字、身分識別提供者、姓氏和使用者的物件識別碼的核取方塊。
選取確定以建立原則。
雙擊新原則名稱，然後在瀏覽窗格中選取屬性。
將啟用 JavaScript 強制執行頁面配置 (預覽版) 選項設定為開啟。

組建完自訂頁面後，您將返回此原則以完成設定。現在，關閉原則以返回 Azure 入口網站中的使用者流程 (原則) 頁面。

設定「密碼重設」原則

若要設定「密碼重設」原則，請執行下列步驟。

選取新使用者流程，然後選取密碼重設選項，然後選取建議的索引標籤，然後點擊建立。
輸入原則的名稱 (例如，B2C_1_ForgetPassword)。
在身分識別提供者區段中，選取使用電子郵件地址重設密碼。
在退貨聲明行中，選取電子郵件地址、名字、姓氏和使用者的物件識別碼的核取方塊。
選取確定以建立原則。
雙擊新原則名稱，然後在瀏覽窗格中選取屬性。
將啟用 JavaScript 強制執行頁面配置 (預覽版) 選項設定為開啟。

組建完自訂頁面後，您將返回此原則以完成設定。現在，關閉原則以返回 Azure 入口網站中的使用者流程 (原則) 頁面。

組建自訂頁面

Commerce 中包含專用的 Microsoft Entra 模組，可用來為 Microsoft Entra B2C 使用者原則建立自訂頁面。可以使用下面詳述的主要 Microsoft Entra B2C 模組專門為每個使用者原則頁面的配置頁面。或者，可用 Microsoft Entra 通用模組來針對 Microsoft Entra 識別碼B2C 中的所有頁面配置和原則 (甚至適用於下面未列出之原則中的頁面配置選項)。

特定於頁面的 Microsoft Entra 模組是綁定到由 Microsoft Entra 識別碼 B2C 呈現的資料輸入項。這些模組讓您可以更好地控制頁面中元素的位置。但是，可能需要組建更多頁面和模組擴充，以解決超出下述預設的差異。
Microsoft Entra 通用模組為 Microsoft Entra B2C 建立「div」元素來呈現使用者原則頁面配置中的所有元素，為 B2C 功能頁面提供更大的彈性，但對定位和樣式的控制較少 (儘管 CSS 可用於匹配網站的外觀和感覺)。

您可以使用 Microsoft Entra 通用模組來建立單一頁面，並將其用於所有使用者原則頁面，或也可以使用單獨的 Microsoft Entra 模組建立特定頁面來進行登入、註冊、設定檔編輯、密碼重設和密碼重設驗證。您也可以混合使用兩者，將特定 Microsoft Entra 頁面用於下面提到的頁面配置，而將通用 Microsoft Entra 模組頁面用於這些或其他使用者原則頁面中的其餘頁面配置。

若要深入了解有關模組庫附帶的 Microsoft Entra 模組，請參閱身份識別管理頁面和模組。

若要使用特定身分識別模組組建自訂頁面來處理使用者登入，請按照下列步驟操作。

在 Commerce 網站產生器中，移至您的網站。
組建以下五個範本和頁面 (如果在您的網站中尚未存在)：
- 使用登入模組的登入範本和頁面。
- 使用註冊模組的註冊範本和頁面。
- 使用密碼重設模組的密碼重設範本和頁面。
- 使用密碼重設驗證模組的密碼重設驗證範本和頁面。
- 使用帳戶設定檔編輯模組的 設定檔編輯範本和頁面。

組建頁面時，請遵循以下準則：

對於每個頁面或模組，請使用最適合您業務需求的配置和樣式。
發佈必須在 Microsoft Entra B2C 設定中使用的所有頁面和 URL。
頁面和 URL 發佈後，收集必須用於該頁面的 URL Microsoft Entra B2C 原則設定。使用時，?preloadscripts=true 後綴將會新增到每個 URL 中。

重要

組建以供在 Microsoft Entra B2C 中被引用的頁面會直接從 Microsoft Entra B2C 租用戶的網域出現。請勿重複使用具有相關連結的通用標頭和頁尾。因為使用時，這些頁面將託管在 Microsoft Entra B2C 網域中，所有連結只能使用絕對 URL。建議您使用絕對 URL 為您的 Microsoft Entra相關自訂頁面建立特定的標頭和頁尾，使用任何已移除連接到零售伺服器需求的Commerce 限定模組。例如，我的最愛、搜尋列、登入連結和購物車模組不應包含在將用於 Microsoft Entra B2C 使用者流量的任何頁面中。。

設定具有自訂頁面資訊的 Microsoft Entra B2C 原則

在 Azure 入口網站中，返回 Microsoft Entra B2C 頁面，然後在選單上的原則底下，選取使用者流程 (原則)。

若要使用自訂頁面資訊更新「註冊並登入」原則，請依照下列步驟操作。

在您先前設定的登入並註冊原則中，在瀏覽窗格中選取頁面配置。
選取統一註冊或登入頁面配置。
將使用自訂頁面內容選項設定為是。
在自訂頁面 URI欄位中，輸入完整的登入 URL。包括 ?preloadscripts=true 後綴。例如，輸入 www.<my domain>.com/sign-in?preloadscripts=true。
在頁面配置版本欄位中，選取版本 2.1.0 或更新版本 (需要 Commerce 版本 10.0.15 或更新版本的模組庫)。
選取儲存。
選取本機帳戶註冊頁面配置。
將使用自訂頁面內容選項設定為是。
在自訂頁面 URI欄位中，輸入完整的註冊 URL。包括 ?preloadscripts=true 後綴。例如，輸入 www.<my domain>.com/sign-up?preloadscripts=true。
在頁面配置版本欄位中，選取版本 2.1.0 或更新版本 (需要 Commerce 版本 10.0.15 或更新版本的模組庫)。
在使用者屬性區段中，執行下列步驟：
1. 對於名字和姓氏屬性，選取需要驗證行中的否。
2. 對於電子郵件地址屬性，建議保留在需要驗證行中選取的預設值是。此選項可確保使用給定電子郵件地址註冊的使用者驗證他們是否擁有該電子郵件地址。
3. 對於電子郵件地址、名字，和姓氏屬性，選取可選行中的否。
選取儲存。

使用自訂頁面資訊更新「設定檔編輯」原則

若要使用自訂頁面資訊更新「設定檔編輯」原則，請依照下列步驟操作。

在您先前設定的設定檔編輯原則中，在瀏覽窗格中選取頁面配置。
選取設定檔編輯頁面配置 (可能需要向下捲動到其他版面配置選項，視您的畫面而定)。
將使用自訂頁面內容選項設定為是。
在自訂頁面 URI欄位中，輸入完整的設定檔編輯 URL。包括 ?preloadscripts=true 後綴。例如，輸入 www.<my domain>.com/profile-edit?preloadscripts=true。
對於頁面配置版本，選取版本 2.1.0 或更新版本 (需要 Commerce 版本 10.0.15 或更新版本的模組庫)。
在使用者屬性區段中，執行下列步驟：
1. 對於名字和姓氏屬性，選取可選行中的否。
2. 對於名字和姓氏屬性，選取需要驗證行中的否。
選取儲存。

使用自訂頁面資訊更新「密碼重設」原則

若要使用自訂頁面資訊更新「密碼重設」原則，請依照下列步驟操作。

在您先前設定的密碼重設原則中，在瀏覽窗格中選取頁面配置。
選取忘記密碼頁面配置。
將使用自訂頁面內容選項設定為是。
在自訂頁面 URI欄位中，輸入完整的密碼重設驗證 URL。包括 ?preloadscripts=true 後綴。例如，輸入 www.<my domain>.com/password-reset-verification?preloadscripts=true。
在頁面配置版本欄位中，選取版本 2.1.0 或更新版本 (需要 Commerce 版本 10.0.15 或更新版本的模組庫)。
選取儲存。
選取更改密碼頁面配置。
將使用自訂頁面內容選項設定為是。
在自訂頁面 URI欄位中，輸入完整的密碼重設 URL。包括 ?preloadscripts=true 後綴。例如，輸入 www.<my domain>.com/password-reset?preloadscripts=true。
在頁面配置版本欄位中，選取版本 2.1.0 或更新版本 (需要 Commerce 版本 10.0.15 或更新版本的模組庫)。
選取儲存。

自訂標籤和描述的預設文字字串

在模組庫中，登入模組預先填入了標籤和描述的預設文字字串。您可以您正在使用之模組的屬性窗格中自訂字串。頁面上的其他字串 (例如 忘記密碼？連結文字或建立帳戶調用動作文字) 將需要使用 Commerce 軟體開發工具套件 (SDK) 並更新登入模組的 global.json 檔案中的值。

例如，忘記密碼連結的預設文字為忘記密碼？。下面顯示了登入頁面上的預設文字。

登入頁面上忘記密碼連結的預設文字。