Настройка внешнего вида и чувства потоков

Завершено

Упражнение. Настройка внешнего вида и чувства потоков

После создания нового внешнего клиента можно настроить интерфейс конечного пользователя. Создайте настраиваемый внешний вид и ощущение для пользователей, войдите в приложения, настроив параметры фирменной символики компании для вашего клиента. С помощью этих параметров вы можете добавить собственные фоновые изображения, цвета, логотипы компании и текст для настройки возможностей входа в приложениях. Вы можете создать персонализированный интерфейс входа по умолчанию для пользователей, которые входят в систему. Или создайте персонализированный интерфейс для каждого языка входа в браузер, настроив элементы фирменной символики для этого языка браузера.

Примечание.

Для настройки фирменной символики потоков вам потребуется по крайней мере роль администратора фирменной символики организации .

У вас есть отзывы? Пожалуйста, сообщите нам, как будет идти подтверждение проекта концепции. Мы хотели бы услышать ваше мнение!

  1. Чтобы создать или обновить фирменную символику компании клиента (по умолчанию или для каждого языка), войдите в Центр администрирования Microsoft Entra и перейдите в Пользовательские интерфейсы>Символика компании. Если не удается найти его, выберите ... Показать больше. На странице фирменной символики компании можно изменить интерфейс входа по умолчанию или настроить на языке браузера. Для нашего продуктового веб-сайта мы изменим его по умолчанию. Если выбрать Настройка по языку браузера, нужно будет выбрать язык для настройки.

    Снимок экрана: навигация в центре администрирования Microsoft Entra слева, где выделены пользовательский интерфейс и фирменный стиль компании, а также панель

  2. На вкладке "Основы" измените любой из фоновых элементов. Затем нажмите кнопку "Далее".

    • Favicon — значок, отображаемый на вкладке веб-браузера.

    • Фоновое изображение — большое изображение, отображаемое на странице входа. Если вы отправите изображение, оно будет масштабироваться и обрезка для заполнения окна браузера.

    • Цвет фона страницы — цвет , заменяющий фоновое изображение всякий раз, когда изображение не может быть загружено, например из-за задержки подключения.

      Снимок экрана: навигация мастера редактирования интерфейса входа по умолчанию с выбранной первой вкладкой

  3. На вкладке макета выберите размещение элементов веб-страницы на странице входа. Затем нажмите кнопку "Далее".

    • Шаблон — фон полноэкранного экрана

    • Заголовок — показать

    • Нижний колонтитул — показать

    • Настраиваемый CSS — отправьте собственный CSS-файл, чтобы заменить стили Майкрософт по умолчанию собственным стилем: цвет, шрифт, размер текста, положение элементов и отображение для различных устройств и размеров экрана.

      Снимок экрана: вкладка

  4. На вкладке "Заголовок" выберите логотип заголовка , который будет отображаться в заголовке страницы входа. Затем нажмите кнопку "Далее".

    Снимок экрана: вкладка

  5. На вкладке Нижний колонтитул можно настроить URL-адреса и отображаемый текст ссылки для конфиденциальности и условий использования, которые отображаются в нижнем колонтитуле страницы входа.

    • Конфиденциальность и файлы cookie — установите флажок рядом с конфиденциальностью и файлами cookie, чтобы отобразить эту гиперссылку в нижнем колонтитуле. Ссылка на конфиденциальность майкрософт по умолчанию будет отображаться, если вы не введете текст и URL-адрес отображения гиперссылки.

    • Условия использования . Установите флажок рядом с условиями использования, чтобы отобразить эту гиперссылку в нижнем колонтитуле. Ссылка на использование Майкрософт будет отображаться, если только вы не введете текст и 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
    }
}