Consideraciones sobre el agente de autenticación web para proveedores en línea (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Como proveedor de autenticación, hay que tener en cuenta determinados detalles a la hora de configurar tu servicio de autenticación para que sea utilizado por las aplicaciones de la Tienda Windows. Además, puedes personalizar la página web que se muestra al usuario de la aplicación de la Tienda Windows con tu marcado preferido.

Consideraciones para los proveedores de autenticación en línea

El agente de autenticación web utiliza las mismas tecnologías que Internet Explorer en Windows. Sin embargo, debido a la finalidad especial de este componente, algunas características de Internet Explorer se deshabilitaron o se bloquearon a una configuración específica. Además, el agente de autenticación web proporciona un canal de registro de eventos dedicado para ayudar a solucionar problemas con las páginas que procesa.

Modo de documento estándar de Internet Explorer

El agente de autenticación web muestra todas las páginas en el modo estándar de IE para la versión específica de Windows. Por ejemplo, en Windows 8 el agente de autenticación web muestra páginas en el "modo Estándar de IE10". Puedes usar las herramientas de desarrollador de Internet Explorer para ver cómo funciona tu página en los diferentes modos de documento. Para obtener más información sobre la compatibilidad con Internet Explorer, consulta en MSDN los temas sobre Internet Explorer.

Características deshabilitadas y bloqueadas

Algunas características de Internet Explorer se han deshabilitado por completo o se han bloqueado a valores específicos que no se pueden cambiar en las Opciones de Internet del sistema operativo.

Función	Estado
API de la caché de la aplicación ("AppCache")	Deshabilitada
Historial de vínculos	Deshabilitada
Archivos temporales	Habilitada
Cookies	Las cookies de sesión están habilitadas. Se admiten cookies persistentes, aunque están sujetas a una limpieza automática a menos que el agente de autenticación web esté en modo SSO. Para obtener más información, consulta la sección Inicio se sesión único.
Indizar base de datos	Deshabilitada
Almacenamiento DOM	Deshabilitada
ActiveX	Deshabilitada
Descargas de archivos	Deshabilitada

 

Requisito de HTTPS

Es necesario que la primera dirección URL que una aplicación use para comunicarse con el proveedor con conexión sea HTTPS.

Dimensión para diferentes estados de vista

Una aplicación de Windows 8 puede aparecer con diferentes tamaños de vista, con orientación vertical u horizontal, o en un acceso como el acceso a Compartir. En función de en qué vista aparezca el agente de autenticación web, el tamaño con el que deben trabajar las páginas web puede variar. Para obtener más información, consulta los temas Directrices sobre tamaños de ventana y escalado en pantallas y Directrices para uso compartido de contenido.

La página web debe usar consultas de medios de CSS para comprobar con qué tamaño debe trabajar y distribuirse como corresponda. Sin embargo, la página no debe diseñarse basándose en los píxeles exactos aquí documentados y debe poder escalarse a diferentes tamaños. Los tamaños especificados en este documento están sujetos a cambios en futuras versiones del SO.

Si una página no puede acomodar toda la información en el espacio asignado (por ejemplo, una lista larga de permisos que una aplicación está solicitando), el agente de autenticación web proporcionará barras de desplazamiento para que el usuario pueda desplazarse por la página si es necesario. El zoom también se proporciona con el gesto de reducir o ampliar en dispositivos táctiles y con Ctrl + rueda del mouse en equipos de escritorio y portátiles.

Para probar los diferentes factores de escala, usa la muestra de aplicación del SDK del agente de autenticación web que se carga en Microsoft Visual Studio Professional 2012 y que permite simular diferentes tamaños de vista.

Muestra de vista

El ejemplo siguiente muestra la interfaz de usuario del agente de autenticación web con las siguientes dimensiones de página web:

• Ancho: 260 píxeles
• Alto: alto de la pantalla (depende de la resolución de pantalla)

Ten en cuenta que la interfaz de usuario del agente de autenticación web solo está en el lado derecho de la captura de pantalla.

Vista de Acceso

En la vista de Acceso, las dimensiones de la página web son:

• Ancho: 566 píxeles
• Alto: alto de la pantalla (depende de la resolución de pantalla)

El ejemplo siguiente muestra la interfaz de usuario del agente de autenticación web en la vista de Acceso.

Vista de selector de archivos

En la vista de selector de archivos, las dimensiones de la página web son:

• Ancho: 566 píxeles
• Alto: alto de la pantalla (depende de la resolución de pantalla)

El ejemplo siguiente muestra la interfaz de usuario del agente de autenticación web en la vista de selector de archivos.

No se abren ventanas nuevas de forma predeterminada

De forma predeterminada, ninguna dirección URL hará que se abra una nueva ventana; en su lugar, se mostrará dentro de la ventana del agente de autenticación web. Esto incluye el método window.open de JavaScript, el atributo "target" de los hipervínculos o cuando el usuario usa el mecanismo Ctrl+clic para hacer que se abra una nueva ventana. La excepción a esta regla es cuando una página web declara un vínculo como seguro para su navegación en un explorador, tal y como se describe en el tema sobre cómo personalizar el destino de los hipervínculos.

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

Agente de autenticación web

Muestra de agente de autenticación web

Windows.Security.Authentication.Web