Поделиться через

Настройка элементов пользовательского интерфейса

Веб-страница настраивает пользовательский интерфейс, используя теги метаданных, определенные на веб-странице, для установки заголовка, значка и цвета шапки. Веб-разработчики могут использовать метаданные HTML-<> для отображения личности и фирменной символики поставщика в пользовательском интерфейсе брокера веб-проверки подлинности. Кроме того, разработчики могут направлять более сложные действия пользователей, например регистрация и восстановление паролей. Идея очень похожа на функцию закрепления сайтов в Windows Internet Explorer 9 и Windows 7.

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

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

Инструкции

Шаг 1. Настройка значка

Веб-страница может предоставить значок с помощью метаметки mswebdialog-logo.

<meta name="mswebdialog-logo" content="https://www.contoso.com/logo.png"/>

Содержимое — это URL-адрес, который может быть относительным или абсолютным. Схема URL-адреса может быть HTTP или HTTPS. Формат файла должен иметь формат PNG или JPG. Размер изображения должен составлять 30x30 пикселей. Если изображение имеет другой размер, оно будет уменьшено или увеличено операционной системой, чтобы соответствовать пространству 30x30. Изображение должно быть разработано так, чтобы хорошо отображать при увеличении до 140% и 180% на экранах с более высоким разрешением. Чтобы проверить различные факторы масштабирования, используйте пример приложения пакета SDK для брокера веб-проверки подлинности, загруженного в Visual Studio 11, что позволяет имитировать различные разрешения и коэффициенты масштабирования с помощью окон устройств в режиме конструктора.

Шаг 2. Настройка текста заголовка

Веб-страница может предоставить заголовок с помощью мета тега mswebdialog-title.

<meta name="mswebdialog-title" content="Contoso Social"/>

Заголовок должен быть коротким и должен отражать бренд поставщика (например, Contoso).

Шаг 3. Настройка цвета заголовка

Веб-страница может предоставить цвет, представляющий идентичность бренда, для использования в заголовке диалогового окна, используя метаметку mswebdialog-header-color.

<meta name="mswebdialog-header-color" content="#1267DF"/>

Цвет может быть любым значением, указанным здесь. Однако брокер веб-проверки подлинности будет игнорировать любое значение альфа-канала. При использовании этого цвета в частности и с цветами, используемыми на странице в целом, рекомендуется следовать тем же цветам, которые используются в приложении Windows 8 поставщика, если такое приложение существует.

Заметка

Значки и цвета кэшируются на клиенте отдельно для каждого сервера после синтаксического анализа тегов META. Удалите кэш клиента перед запуском пользовательского интерфейса, чтобы изменения вступили в силу. Для этого измените следующие параметры реестра.

 

// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
    L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
    L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT        \
    (24 * 60 * 60)

После скачивания значка он не будет снова выбран в течение 24 часов. Чтобы протестировать изображения логотипов, установите ранее упомянутый регистровый ключ на более низкое значение.

Шаг 4. Настройка веб-страницы

Помимо настройки пользовательского интерфейса на веб-странице, разработчики также должны создавать веб-страницы, которые являются простыми и интегрированными с общим интерфейсом Windows 8. Это включает использование рекомендуемых стилей, чтобы веб-страницы работали отлично с устройствами с поддержкой сенсорного ввода, а также открывать определенные веб-страницы в веб-браузере.

  • Стиль

    Настоятельно рекомендуется использовать стили, рекомендуемые здесь, чтобы создать более согласованный пользовательский интерфейс на веб-страницах брокера веб-проверки подлинности и других компонентах пользовательского интерфейса Windows 8. У веб-страницы должен быть белый фон и отсутствовать границы. Такие кнопки, как Войти или Отмена, должны располагаться в правом нижнем углу и использовать тот же цвет, что и заголовок. Наконец, так как брокер веб-проверки подлинности предоставляет кнопку "Назад", рассмотрите возможность устранения кнопки "Отмена" на веб-странице полностью.

  • Включение сенсорного ввода

    Веб-страница должна быть разработана с учетом взаимодействия с пользователем на основе сенсорного ввода. Дополнительные сведения о проектировании сенсорного ввода в Windows 8 см. в теме Дизайн взаимодействия в сенсорном режиме.

  • Настройка целевого объекта гиперссылок

    Брокер веб-проверки подлинности отлично подходит для доставки веб-страниц, требующих одного действия пользователя, например страниц авторизации OAuth или входа. Однако для более сложных потоков пользователей, таких как создание учетной записи, восстановление утерянного или забытого пароля, показ заявлений о конфиденциальности и т. д., где ожидается, что пользователь потратит некоторое время на понимание и завершение процесса, рекомендуется запустить эти страницы в предпочтительном браузере пользователя для поддержки полноценной навигации и удобного просмотра. Брокер веб-проверки подлинности по умолчанию не позволяет открывать новые окна браузера с веб-страницы (дополнительные сведения см. в разделе "Нет новых окон по умолчанию"). Однако с помощью метаметка mswebdialog-newwindowurl веб-страница может объявить, какие URL-адреса следует открыть в браузере.

    mswebdialog-newwindowurl позволяет веб-странице указать URL-адрес или часть URL-адреса, который брокер веб-проверки подлинности будет использовать для сопоставления (совпадения с левой строкой) при каждом запросе открыть URL-адрес в новом окне с помощью целевого атрибута или метода window.open(). Если совпадение совпадает, URL-адрес будет открыт в браузере пользователя по умолчанию. Если совпадения нет, брокер веб-проверки подлинности перейдет к самому URL-адресу (по умолчанию). Например,<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

    В случае этого метатега брокер веб-аутентификации откроет https://www.contoso.com/privacy/policy.html в браузере, но напрямую перейдет к https://www.contoso.com/termsofuse.html. Обратите внимание, что ссылки, которые не пытаются открываться в новом окне (например, ссылки, не использующие атрибут target или метод window.open()), на которые не влияет этот метатег. Содержимое — это URL-адрес, который может быть относительным или абсолютным. Схема URL-адреса может быть HTTP или HTTPS. Вы должны определить mswebdialog-newwindowurl метатеги для покрытия всех ссылок, которые не являются частью основного потока пользователя, таких как заявления о конфиденциальности, формы регистрации и тому подобное. Если вы поддерживаете вход с помощью стороннего поставщика проверки подлинности (например, поставщиков OpenID), обязательно сохраните эти взаимодействия в брокере веб-проверки подлинности. Чтобы включить все ссылки на странице как безопасные для открытия в браузере, используйте синтаксис звездочки, например, <meta name="mswebdialog-newwindowurl" content="*"/> Обратите внимание, что "*" можно использовать только исключительно и не может быть объединен с другим URL-адресом, например "https://www.contoso.com/*" не является допустимым синтаксисом.

Шаг 5. Правила, применяемые ко всем метатегам

Если брокер веб-проверки подлинности обрабатывает метатеги, применяются следующие правила:

  • Действие мета-тега будет сохраняться на всех страницах под одним доменом второго уровня (например, contoso.com), если не будет найден метатег с тем же именем, но другим содержимым.

  • Если на одной странице обнаружены несколько метатег одного и того же имени, брокер веб-проверки подлинности выбирает только один из них и игнорирует остальные. Какой конкретный метатег выбран, не определено.

    Заметка

    Это правило не применяется к мета-тегу mswebdialog-newwindowurl, который допускает несколько экземпляров на одной странице.

     

Рекомендации по разработке веб-страниц

пример приложения SDK для брокера веб-аутентификации

Windows.Security.Authentication.Web