Compartir a través de

Procedimientos recomendados para diseñar páginas web de autenticación

En este tema se describen los procedimientos recomendados para diseñar páginas web que usan el Agente de autenticación web para iniciar sesión.

Uso de metatags

Con metaetiquetas, el proveedor "Contoso Social" puede especificar el título, el icono y el color del encabezado. En el archivo HTML de ejemplo (WebAuthLogin.html), esto se realiza mediante el código siguiente.

<meta name="mswebdialog-title" content="Contoso Social" />
<meta name="mswebdialog-header-color" content="#326464" /> <!-- Your brand color -->
<meta name="mswebdialog-logo" content="contoso_social_glyph.png" />

Esto permite a Windows integrar la presencia del proveedor de forma destacada en el encabezado de la interfaz de usuario, tal como se resalta en el cuadro rojo en la captura de pantalla siguiente. página de inicio de sesión que muestra el encabezado contoso en la interfaz de usuario

Uso del estilo CSS de Windows 8

La hoja de estilos ui-light.css proporcionada es la hoja de estilos Windows 8 usada por las aplicaciones de la Tienda Windows. Define el estilo de la aplicación de la Tienda Windows para controles tipográficos y estándar, como botones, cuadros de texto, hipervínculos y casillas para asegurarse de que son táctiles. Al diseñar y adaptar páginas de autorización web para Windows 8, le recomendamos que use esta hoja de estilos tal como está y actualícela según sea necesario, siempre y cuando la página web siga los procedimientos recomendados de forma propia.

Por ejemplo, si tiene una hoja de estilos especial para qué hipervínculos deben tener un aspecto y aspecto en la página web, es conveniente tener cuidado de asegurarse de que el estilo que proporcione sea táctil de la misma manera que los hipervínculos Windows 8 estándar. Esto es esencial para la base de consumidores mediante Windows 8 en sus dispositivos táctiles.

Uso de colores y temas

En este ejemplo se muestra un uso cuidadoso del color de varias maneras diferentes.

  • Fondo blanco de la página web. Como puede saber en la captura de pantalla anterior, la página web se hospeda dentro de una superficie blanca que abarca el ancho de la pantalla. Para asegurarse de que la página web se integra con la superficie, se recomienda que la página web tenga un fondo blanco.
  • Colorear los controles en función del color de la marca. El archivo CSS theme-colors.css proporciona estilo para invalidar los colores estándar de los controles de la hoja de estilos de la interfaz de usuario para que coincidan con el tema de los controles con el color del encabezado. Por ejemplo, en la captura de pantalla siguiente, los botones y los hipervínculos toman colores derivados del color del encabezado. captura de pantalla de los botones y el texto con el mismo color que el encabezado
  • Color del encabezado. El uso del color de marca de Contoso en el encabezado crea una personalidad unificada para la marca del proveedor dentro de la interfaz de usuario del sistema.

Alineación

La propia página web no tiene relleno a la izquierda o a la derecha para permitir la alineación tipográfica con el título en el encabezado de la izquierda y el icono del encabezado de la derecha.

También observará que los botones siempre están alineados de abajo a la derecha en la página web (y alineados a la derecha con el icono del encabezado). Este es el procedimiento recomendado, ya que Windows 8 los usuarios estarán acostumbrados a flujos de diálogo similares que tengan botones en la parte inferior derecha.

Diseño para ajuste

En la imagen siguiente, puede ver las páginas de inicio de sesión y permisos en estado de ajuste.

vista de ajuste de la pantalla de inicio de sesión . vista de ajuste de la página de permisos

En el archivo de ejemplo ui-webauth.css, puede ver el uso de consultas multimedia que optimizan el diseño de la página para el estado de ajuste en función del ancho disponible para la página web. El fragmento de código incluido en el ámbito siguiente implementa CSS adaptado para el estado de ajuste.

@media screen and (max-width: 500px) 
{
…
}

En Windows 8, el ancho del estado de ajuste es de 320 píxeles. La página web-auth ocupa 260 píxeles en la interfaz de usuario anterior. Usamos un valor de ancho máximo con margen suficiente, por lo que el código de consulta multimedia del proveedor no está enlazado al ancho exacto del estado de ajuste.

Para personalizar la aplicación para la vista de instantáneas, es importante que el usuario no pierda ningún contexto que tenga en las demás vistas de la experiencia de autenticación web (vistas completas, de relleno o de acceso), pero es útil volver a estructurar el diseño y la jerarquía de los elementos de la página para que la información necesaria para conservar el contexto sea visible e interactiva. Hemos resaltado algunos ejemplos de cómo el ejemplo adapta la página web para el estado de ajuste.

  • Por ejemplo, para la página de inicio de sesión en estado de ajuste, la propiedad width del campo de texto de entrada (como se especifica en ui-light.css) se ha invalidado y se ha establecido como un valor numérico más pequeño, de modo que el campo de texto no se recorta horizontalmente.
  • Como otro ejemplo, en estado de ajuste, el tamaño de fuente de los encabezados h1 y h2 se reduce a 20 pt y 11 pt de 42 pt y 20 pt respectivamente. Esto se hace de acuerdo con la rampa de tipo Windows 8 y optimiza el texto para que sea más compacto en la ventanilla modificada.
  • Como otro ejemplo, observe que los tamaños de los iconos de la página de permisos son más pequeños (compare con la página de vista completa anterior). De nuevo, esto se hace para conservar el contexto, mientras se intercambian los recursos de diseño para aquellos más óptimos para la ventanilla modificada.

Diseño para una experiencia de inicio de sesión rápida y fluida

Al principio del diseño de esta página web, hicimos una apuesta en el terreno de que una cosa en la que esta página es mejor es una experiencia de inicio de sesión rápida y fluida. Por lo tanto, la interfaz de usuario que es más destacada en el flujo es el campo nombre de usuario y contraseña de la página de inicio de sesión para una experiencia de entrada rápida de credenciales. Aunque hemos identificado que hay otros escenarios comunes, como la recuperación de contraseñas y la referencia a declaraciones de privacidad, la experiencia enriquecida de la web es un lugar mejor para esas experiencias. Para todos los flujos no relacionados con la experiencia de autenticación web segura, se recomienda navegar por el usuario al explorador. Esto se muestra en el archivo HTML de ejemplo (WebAuthLogin.html) como se indica a continuación: <meta name="mswebdialog-newwindowurl" content="*" /> se abren todas las páginas web vinculadas desde la página de inicio de sesión o permisos en el explorador predeterminado del usuario donde el usuario puede completar estos flujos y, a continuación, volver a la aplicación para iniciar sesión.

Consideraciones sobre la seguridad

En los artículos siguientes se proporcionan instrucciones para escribir código de C++ seguro.

Consideraciones para el desarrollo de páginas web

Preguntas más frecuentes sobre el Agente de autenticación web

Aplicación de ejemplo del SDK de Agente de autenticación web

Windows.Security.Authentication.Web