Personalizar páginas de autenticación web

Una página web personaliza la interfaz de usuario con el título, el icono y el color del encabezado usando las etiquetas de metadatos definidas en la página web. Los desarrolladores web pueden usar etiquetas HTML <meta> para mostrar la personalidad y la marca del proveedor en la interfaz de usuario del agente de autenticación web. Además, los desarrolladores pueden dirigir acciones de usuario más intricadas, por ejemplo, firmar y recuperar contraseñas. El concepto es muy similar a la característica Sitios anclados de Windows Internet Explorer 9 y Windows 7.

Además de personalizar la interfaz de usuario alrededor del área de la página web, la página web también puede aprovechar las ventajas de los estilos de los controles de Windows 8, habilitarse para entrada táctil y habilitar vínculos para que se abran en el explorador cuando corresponda.

El siguiente es un ejemplo de una página web que aprovecha las ventajas del modelo de personalización del agente de autenticación web.

Personalizar el icono

Con la etiqueta meta mswebdialog-logo, la página web puede proporcionar un icono.

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

El contenido es una dirección URL que puede ser una página relativa o absoluta. El esquema de la dirección URL puede ser HTTP o HTTPS. El formato del archivo debe ser PNG o JPG. El tamaño de la imagen debe ser 30x30 píxeles. Si la imagen es de un tamaño diferente, el sistema operativo la aumentará o reducirá para que se ajuste al espacio de 30x30. La imagen debe diseñarse para que se represente bien cuando se escale al 140% y al 180% para tener en cuenta pantallas con resoluciones más altas. Para probar diferentes factores de escala, usa la muestra de aplicación del SDK del agente de autenticación cargada en Visual Studio 11, que permite simular diferentes resoluciones y factores de escala usando las ventanas de dispositivo del modo de diseño.

Personalizar el texto del título

Con la etiqueta meta mswebdialog-title, la página web puede proporcionar el título.

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

El título debe ser corto y debe reflejar la marca del proveedor (por ejemplo, Contoso).

Personalizar el color del encabezado

Con la etiqueta meta mswebdialog-header-color, la página web puede proporcionar el color que representa su identidad de marca para usarse en el encabezado del cuadro de diálogo.

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

El color puede ser cualquiera de los valores especificados aquí. Sin embargo, el agente de autenticación web omitirá cualquier valor del canal alfa. Con este color específicamente y con los colores usados en la página en general, se recomienda seguir los mismo colores usados en la aplicación de Windows 8 del proveedor, si esta existe.

Nota  Los iconos y colores se almacenan en caché por servidor en el cliente después de analizar las etiquetas META. Borra la caché de cliente antes de lanzar la interfaz de usuario para que los cambios surtan efecto. Para ello, modifica las siguientes opciones del Registro.

// 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)

Después de descargar un icono, no se vuelve a seleccionar durante 24 horas. Para realizar las pruebas con imágenes de logotipo, establece la clave del Registro anterior con un valor menor.

Personalizar la página web

Además de personalizar la interfaz de usuario alrededor de la página web, los desarrolladores también deben crear páginas sin problemas e integradas con la experiencia general de Windows 8. Esto incluye usar los estilos recomendados, asegurarse de que las páginas web funcionan bien con dispositivos táctiles y abrir determinadas páginas web en el explorador web.

• Estilos

  Es muy recomendable usar los estilos recomendados aquí para crear una experiencia de usuario más coherente en todas las páginas web del agente de autenticación web y otros componentes de la interfaz de usuario de Windows 8. La página web debe usar un fondo blanco y sin bordes. Los botones como Iniciar sesión o Cancelar deben situarse en la esquina inferior derecha y usar el mismo color que el encabezado. Por último, como el agente de autenticación web proporciona un botón Atrás, considera la posibilidad de eliminar el botón Cancelar de la página web por completo.

• Habilitar la entrada táctil

  La página web debe diseñarse teniendo en cuenta la interacción táctil del usuario. Para obtener más información sobre el diseño para interacción táctil en Windows 8, consulta el tema Diseño de interacción táctil.

• Personalizar el destino de los hipervínculos

  El agente de autenticación web es ideal para proporcionar páginas web que requieren una acción de usuario único, como páginas de inicio de sesión o de autorización OAuth. Sin embargo, para flujos de usuario más intricados como la creación de cuentas, la recuperación de una contraseña perdida u olvidada o la visualización de declaraciones de privacidad, entre otros, en los que se espera que el usuario dedique algún tiempo a comprender y completar el flujo, se recomienda iniciar estas páginas en el explorador preferido del usuario para admitir una exploración amplia y navegación completa. De forma predeterminada, el agente de autenticación web no permite abrir nuevas ventanas de explorador desde una página web (para obtener más información, consulta la sección No se abren ventanas nuevas de forma predeterminada). Sin embargo, usando la etiqueta meta mswebdialog-newwindowurl, la página web puede declarar qué direcciones URL se deben abrir en el explorador.

  mswebdialog-newwindowurl permite a la página web especificar una dirección URL o parte de una dirección URL con la que el agente de autenticación web realizará la correspondencia (correspondencia de cadenas desde la izquierda) cada vez que se le pida abrir una dirección URL en una nueva ventana, usando el atributo target o el método window.open(). Si hay una correspondencia, la dirección URL se abrirá en el explorador predeterminado del usuario. Si no hay ninguna correspondencia, el agente de autenticación web navegará a la propia dirección URL (comportamiento predeterminado). Por ejemplo:<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

  En el caso de esta etiqueta meta, el agente de autenticación web abrirá https://www.contoso.com/privacy/policy.html en el explorador, pero navegará directamente a https://www.contoso.com/termsofuse.html. Ten en cuenta que los vínculos que no intentan abrirse en una ventana nueva (por ejemplo, los vínculos que no usan el atributo target ni el método window.open()) no se ven afectados por esta etiqueta meta. El contenido es una dirección URL que puede ser una página relativa o absoluta. El esquema de la dirección URL puede ser HTTP o HTTPS. Debes definir las etiquetas meta mswebdialog-newwindowurl para cubrir los vínculos que no forman parte del flujo de usuario principal como declaraciones de privacidad, formularios de registro, etc. Si admites inicios de sesión con un proveedor de autenticación de terceros (por ejemplo, proveedores de OpenID), asegúrate de mantener estas interacciones dentro del agente de autenticación web. Para habilitar todos los vínculos de su página como seguros para abrirse en el explorador, usa la sintaxis con comodín, como <meta name="mswebdialog-newwindowurl" content="*"/> Ten en cuenta que “*” únicamente se puede usar de forma exclusiva y no se puede combinar con otra dirección URL; por ejemplo, "https://www.contoso.com/*" no es una sintaxis válida.

Las reglas se aplican a todas las etiquetas meta

Cuando el agente de autenticación web procesa las etiquetas meta, se aplican las siguientes reglas:

• El efecto de la etiqueta meta persistirá en todas las páginas situadas bajo el mismo dominio de segundo nivel (por ejemplo, contoso.com) a menos que se encuentre otra etiqueta meta con el mismo nombre pero diferente contenido.

• Si se encuentran varias etiquetas meta con el mismo nombre en la misma página, el agente de autenticación web elegirá solo una de ellas y omitirá el resto. Qué etiqueta meta se elige no está definido.

  Nota  Esta regla no se aplica a la etiqueta meta mswebdialog-newwindowurl que admite varias instancias en la misma página.

Temas relacionados

Muestra de agente de autenticación web

Windows.Security.Authentication.Web

Conexión a proveedores de identidad en Internet