自訂流程的外觀和風格

  • 10 分鐘

練習 - 自訂流程的外觀和風格

建立新的外部租用戶之後，您可以自訂使用者體驗。 為租用戶設定公司商標設定，以建立使用者登入應用程式的自訂外觀與風格。 透過這些設定，您可以新增自己的背景影像、色彩、公司標誌和文字，以自訂應用程式之間的登入體驗。 您可以為登入的使用者建立個人化的預設登入體驗。 或者透過自訂特定瀏覽器語言的商標元素，為該瀏覽器語言建立個人化的每種語言登入體驗。

注意

您至少需要組織商標系統管理員目錄角色，才能設定流程的商標。

想提供意見反應？ 請讓我們知道您的概念證明專案進行狀況如何。 我們很樂意收到您的寶貴意見。

  1. 若要建立或更新您的租用戶公司商標 (預設或每種語言)，請登入 Microsoft Entra 系統管理中心，瀏覽 [使用者體驗]>[公司商標]。 如果找不到它，請選取 。顯示更多。 在 [公司商標] 頁面上，您可以選擇編輯 [預設登入體驗]，或 [依瀏覽器語言自訂]。 對於我們的雜貨店網站，我們將編輯預設體驗。 如果選取 [依瀏覽器自訂語言]，則您必須選取要自訂的語言。

    Microsoft Entra 系統管理中心左側瀏覽的螢幕擷取畫面，醒目提示使用者體驗和公司商標，公司商標刀鋒視窗醒目提示了 [入門] 索引標籤下的 [編輯] 和 [新增] 瀏覽器語言兩個按鈕。

  2. 在 [基本] 索引標籤上，修改任何背景元素。 然後選取下一步。

    • 最愛圖示 - 顯示在 [網頁瀏覽器] 索引標籤中的圖示。

    • 背景影像 - 登入頁面上顯示的較大影像。 如果您上傳影像，它將縮放和裁剪以填滿瀏覽器視窗。

    • 頁面背景色彩 - 當影像無法載入時，例如由於連線延遲，會取代背景影像的色彩。

      選取第一個索引標籤 [基本資料] 後，編輯預設登入體驗刀鋒視窗之精靈瀏覽的螢幕擷取畫面。顯示了設定最愛圖示、背景影像和頁面背景色彩的設定。

  3. 在 [版面配置] 索引標籤上，選取登入頁面上網頁元素的位置。 然後選取下一步。

    • 範本 - 全螢幕北京

    • 頁首 - 顯示

    • 頁尾 - 顯示

    • 自訂 CSS - 上傳您自己的 CSS 檔案，用您自己的樣式取代預設 Microsoft 樣式，包括色彩、字型、文字大小、元素位置以及不同裝置和螢幕大小的顯示。

      編輯預設登入體驗刀鋒視窗的 [版面配置] 索引標籤的螢幕擷取畫面，醒目提示要上傳自訂 CSS 的欄位。

  4. 在 [頁首] 索引標籤上，選取要在登入頁面的頁首中顯示的頁首標誌。 然後選取下一步。

    編輯預設登入體驗刀鋒視窗的 [頁首] 索引標籤的螢幕擷取畫面，顯示上傳頁首標誌的欄位。

  5. 在 [頁尾] 索引標籤上，您可以自訂登入頁面頁尾中顯示的隱私權和使用條款的 URL 和連結顯示文字。

    • 隱私權與 Cookie - 選取核取方塊和 Cookie 旁的核取方塊，在頁尾中顯示此超連結。 除非您輸入自己的超連結顯示文字和 URL，否則將顯示 Microsoft 預設隱私權連結。

    • 使用條款 - 選取使用條款旁的核取方塊，在頁尾中顯示此超連結。 除非您輸入自己的超連結顯示文字和 URL，否則將顯示 Microsoft 使用條款連結。

      編輯預設登入體驗刀鋒視窗的 [頁尾] 索引標籤之螢幕擷取畫面，顯示了為隱私權與 Cookie 以及使用條款自訂顯示文字和 URL 的欄位。

  6. 在 [登入表單] 索引標籤上，設定登入表單的元素。

    • 橫幅標誌 - 顯示在登入頁面和使用者的存取面板上

    • 登入頁面文字 - 出現在登入和註冊頁面的底端。

    • 顯示自助式密碼重設 - 是

      編輯預設登入體驗刀鋒視窗的 [登入表單] 索引標籤的螢幕擷取畫面，醒目提示用於上傳橫幅標誌的欄位。

      向下捲動以查看更多選項。

      編輯預設登入體驗刀鋒視窗的 [登入表單] 索引標籤底端的螢幕擷取畫面，醒目提示欄位以自訂登入頁面文字，並選中顯示自助式密碼重設的核取方塊。

  7. 若要自訂某些標籤，請在 [文字] 索引標籤上選取 [新增自訂文字]。

    編輯預設登入體驗刀鋒視窗的 [文字] 索引標籤的螢幕擷取畫面，醒目提示標題為「新增自訂文字」的按鈕。

  8. 選取要自訂的文字，然後在 [標題] 中輸入新標籤。 選取 [新增]。

    在編輯預設登入體驗刀鋒視窗右側開啟的 [心中自訂文字] 窗格的螢幕擷取畫面，其中標題為「要自訂的文字」之下拉式功能表欄位設定為 [登入]，底端標題為「添加」的按鈕醒目顯示。

  9. 選取 [檢閱] 並檢閲所有修改。 然後，如果您想要儲存變更，請選取 [儲存]，如果要繼續自訂，請選取 [上一步]。

    編輯預設登入體驗 [檢閲] 索引標籤的螢幕擷取畫面，顯示了基本資料、版面配置、頁首和頁尾的設定概觀。

    做得好！您已完成設定公司商標。

更新預設公司商標

若要更新 (而不是建立) 預設當地語系化的屬性，請執行以下 Microsoft Graph 要求。 將 {Tenant-ID} 取代為您的租用戶識別碼。

PATCH https://graph.microsoft.com/v1.0/organization/{Tenant-ID}/branding/localizations/0
{
    "id": "0",
    "backgroundColor": "#cddfcc",
    "customAccountResetCredentialsUrl": null,
    "customCannotAccessYourAccountText": null,
    "customCannotAccessYourAccountUrl": null,
    "customForgotMyPasswordText": null,
    "customPrivacyAndCookiesText": "Privacy & Cookies",
    "customPrivacyAndCookiesUrl": "https://woodgrovedemo.com/Privacy",
    "customResetItNowText": null,
    "customTermsOfUseText": "Terms of Use",
    "customTermsOfUseUrl": "https://woodgrovedemo.com/TOS",
    "headerBackgroundColor": null,
    "signInPageText": "Welcome to the **Woodgrove groceries** online store. Sign-in with your credentials, or create a new account. You can also sign-in with your *social accounts*, such as Facebook or Google. For help, please [contact us](https://woodgrovedemo.com/help).",
    "squareLogoRelativeUrl": null,
    "squareLogoDarkRelativeUrl": null,
    "usernameHintText": null,
    "loginPageTextVisibilitySettings": {
        "hideCannotAccessYourAccount": null,
        "hideAccountResetCredentials": false,
        "hideTermsOfUse": false,
        "hidePrivacyAndCookies": false,
        "hideForgotMyPassword": null,
        "hideResetItNow": null
    },
    "loginPageLayoutConfiguration": {
        "layoutTemplateType": "default",
        "isHeaderShown": true,
        "isFooterShown": true
    }
}

提供意見反應