フローの外観をカスタマイズする

10 分

演習 - フローの外観をカスタマイズする

新しい外部テナントを作成したら、エンドユーザーエクスペリエンスをカスタマイズできます。テナントに対して会社のブランド設定を構成して、ユーザーがアプリにサインインするためのカスタムの外観を作成します。これらの設定を使用すると、独自の背景画像、色、会社のロゴ、テキストを追加して、アプリ全体のサインインエクスペリエンスをカスタマイズできます。サインインするユーザーのためにカスタマイズされた既定のサインインエクスペリエンスを作成できます。または、特定のブラウザー言語用にブランド要素をカスタマイズして、そのブラウザー言語に対するカスタマイズされた言語ごとのサインインエクスペリエンスを作成します。

Note

フローのブランド化を構成するには、少なくとも組織ブランド化管理者ディレクトリロールが必要です。

フィードバックがありますか? ご自身の概念実証プロジェクトがどのように進んでいるかをお知らせください。ご意見をお聞かせください！

テナントの会社のブランド (既定または言語ごと) を作成または更新するには、Microsoft Entra 管理センターにサインインし、[ユーザーエクスペリエンス]>[会社のブランド] に移動します。それが見つからない場合は、[... さらに表示] を選びます。 [会社のブランド] ページでは、[既定のサインインエクスペリエンス] または [ブラウザーの言語でカスタマイズ] を選んで編集できます。この食料品 Web サイトでは、既定のものを編集します。 [ブラウザーの言語でカスタマイズ] を選んだ場合は、カスタマイズする言語を選ぶ必要があります。
[基本] タブで、いずれかの背景要素を変更します。 [次へ] を選択します。
- [ファビコン]: Web ブラウザーのタブに表示されるアイコン。
- [背景画像]: サインインページに表示される大きな画像。画像をアップロードすると、ブラウザーウィンドウに合わせて拡大縮小およびトリミングされます。
- [ページの背景色]: 接続の待ち時間などのために、画像を読み込めないときに常に背景画像を置き換える色。
[レイアウト] タブで、サインインページでの Web ページ要素の配置を選びます。 [次へ] を選択します。
- [テンプレート]: 全画面表示の背景
- [ヘッダー]: 表示します
- [フッター]: 表示します
- [カスタム CSS]: 既定の Microsoft スタイルを独自のスタイルに置き換えるための、独自の CSS ファイルをアップロードします: 色、フォント、テキストサイズ、要素の位置、さまざまなデバイスと画面サイズの表示。
[ヘッダー] タブで、サインインページのヘッダーに表示する [ヘッダーロゴ] を選びます。 [次へ] を選択します。
[フッター] タブでは、サインインページのフッターに表示されるプライバシーと使用条件の URL とリンク表示テキストをカスタマイズできます。
- [プライバシーと Cookie]: このハイパーリンクをフッターに表示するには、[プライバシーと Cookie] の横にあるチェックボックスをオンにします。独自のハイパーリンク表示テキストと URL を入力しない限り、Microsoft の既定のプライバシーリンクが表示されます。
- [使用条件]: このハイパーリンクをフッターに表示するには、[使用条件] の横にあるチェックボックスをオンにします。独自のハイパーリンク表示テキストと URL を入力しない限り、Microsoft の使用条件リンクが表示されます。
[サインインフォーム] タブで、サインインフォームの要素を構成します。
- [バナーロゴ]: サインインページとユーザーのアクセスパネルに表示されます
- [サインインページのテキスト]: サインインとサインアップのページの下部に表示されます。
- [セルフサービスによるパスワードのリセットを表示する]: はい
  
  下にスクロールすると、さらにオプションが表示されます。
一部のラベルをカスタマイズするには、[テキスト] タブの [カスタムテキストの追加] を選びます。
カスタマイズするテキストを選んで、[タイトル] に新しいラベルを入力します。 [追加] を選択します。
[レビュー] を選んで、すべての変更を確認します。続いて、変更を保存する場合は [保存] を、カスタマイズを続行する場合は [前へ] を選択します。

お疲れさまでした。会社のブランドの構成が済みました。

既定の会社のブランドを更新する

既定のローカライズのプロパティを (作成ではなく) 更新するには、次の Microsoft Graph 要求を実行します。 {Tenant-ID} はご自分のテナント 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
    }
}

フィードバックを送信する