Configurar páginas personalizadas para inicios de sesión de usuario

Este artículo describe cómo crear páginas personalizadas en Microsoft Dynamics 365 Commerce que administran inicios de sesión personalizados para usuarios de inquilinos de negocio a consumidor (B2C) de Microsoft Entra.

Para usar páginas personalizadas que se crean en Dynamics 365 Commerce para gestionar los flujos de inicio de sesión de usuario, debe configurar las directivas de Microsoft Entra a las que se hará referencia en el entorno de Commerce. Puede configurar las directivas B2C de Microsoft Entra "Registrarse e iniciar sesión", "Edición de perfiles" y "Restablecimiento de contraseña" mediante la aplicación B2C de Microsoft Entra. Se puede hacer referencia a continuación a los nombres de directiva e inquilino B2C de Microsoft Entra durante el proceso de abastecimiento que se realiza para el entorno de Commerce mediante Lifecycle Services (LCS) de Microsoft Dynamics.

Las páginas personalizadas de Commerce se pueden crean mediante el módulo de restablecimiento de contraseña, edición de perfil de cuenta o módulos de Microsoft Entra genéricos. A continuación, se hará referencia a las direcciones URL de página que se publican para estas páginas personalizadas en las configuraciones de directiva B2C de Microsoft Entra en el portal de Azure.

La biblioteca de módulos para Commerce versión 10.0.15 o superior debe usarse con los flujos de usuarios B2C recomendados. Las páginas de política de usuario predeterminadas que se ofrecen en Microsoft Entra ID B2C también se puede utilizar y permitir cambios adicionales en la imagen de fondo, el logotipo y el color de fondo relacionados con la marca de la empresa. Aunque más limitadas en capacidades de diseño, las páginas de políticas de usuario predeterminadas proporcionan funcionalidad de directivas a Microsoft Entra B2C sin crear y configurar páginas personalizadas dedicadas.

Configurar directivas B2C

Después de configurar su inquilino B2C de Microsoft Entra y de asociarlo con su entorno de Commerce, vaya a la página Microsoft Entra B2C en el portal de Azure y, a continuación, en Directivas, seleccione Flujos de usuario (directivas).

Ahora puede configurar los flujos de inicio de sesión de usuario "Registrarse e iniciar sesión", "Edición de perfiles" y "Restablecimiento de contraseña".

Configurar la directiva “Registrarse e iniciar sesión"

Para configurar la directiva “Registrarse e iniciar sesión”, siga estos pasos.

1. Seleccione Nuevo flujo de usuario, seleccione Iniciar sesión e iniciar sesión, seleccione la pestaña Recomendado y después seleccione Crear.

2. Especifique un nombre para la directiva (por ejemplo, B2C_1_SignInSignUp).

3. En la sección Proveedores de identidades, seleccione los proveedores de identidades que se utilizarán para la directiva. Como mínimo, la opción Registro por correo electrónico debe estar seleccionada.

4. En la columna Recopilar atributo, seleccione las casillas para Dirección de correo electrónico, Nombre dado y Apellido.

5. En la columna Notificación de devolución, seleccione las casillas para Direcciones de correo electrónico, Nombre dado, Proveedor de identidades, Apellido e Id. de objeto de usuario.

   

6. Seleccione Aceptar para crear la directiva.

7. Haga doble clic en el nuevo nombre de la directiva y, a continuación, en el panel de navegación, seleccione Propiedades.

8. Establezca la opción Habilitar JavaScript aplicando el diseño de página (versión preliminar) en Activado.

   

Se le devolverá a esta directiva para terminar la configuración después de haber creado las páginas personalizadas. Por ahora, cierre la directiva para volver a la página Flujos de usuario (directivas) del portal de Azure.

Configurar la directiva “Edición de perfiles”

Para configurar la directiva "Edición de perfiles", siga estos pasos.

1. Seleccione Nuevo flujo de usuario, seleccione Editar perfil, seleccione la pestaña Recomendado y después seleccione Crear.
2. Especifique un nombre para la directiva (por ejemplo, B2C_1_EditProfile).
3. En la sección Proveedores de identidades, seleccione los proveedores de identidades que se utilizarán para la directiva. Como mínimo, la opción Inicio de sesión de cuenta local debe estar seleccionada.
4. En la columna Recopilar atributo, seleccione las casillas para Nombre y Apellido.
5. En la columna Notificación de devolución, seleccione las casillas para Direcciones de correo electrónico, Nombre dado, Proveedor de identidades, Apellido e Id. de objeto de usuario.
6. Seleccione Aceptar para crear la directiva.
7. Haga doble clic en el nuevo nombre de la directiva y, a continuación, en el panel de navegación, seleccione Propiedades.
8. Establezca la opción Habilitar JavaScript aplicando el diseño de página (versión preliminar) en Activado.

Se le devolverá a esta directiva para terminar la configuración después de haber creado las páginas personalizadas. Por ahora, cierre la directiva para volver a la página Flujos de usuario (directivas) del portal de Azure.

Configurar la directiva "Restablecimiento de contraseña"

Para configurar la directiva "Restablecimiento de contraseña", siga estos pasos.

1. Seleccione Nuevo flujo de usuarios, luego seleccione la opción Restablecimiento de contraseña, elija la pestaña Recomendado pestaña y haga clic en Crear.
2. Especifique un nombre para la directiva (por ejemplo, B2C_1_ForgetPassword).
3. En la sección Proveedores de identidades, seleccione Restablecer contraseña con dirección de correo electrónico.
4. En la columna Notificación de devolución, seleccione las casillas para Direcciones de correo electrónico, Nombre dado, Apellido e Id. de objeto de usuario.
5. Seleccione Aceptar para crear la directiva.
6. Haga doble clic en el nuevo nombre de la directiva y, a continuación, en el panel de navegación, seleccione Propiedades.
7. Establezca la opción Habilitar JavaScript aplicando el diseño de página (versión preliminar) en Activado.

Se le devolverá a esta directiva para terminar la configuración después de haber creado las páginas personalizadas. Por ahora, cierre la directiva para volver a la página Flujos de usuario (directivas) del portal de Azure.

Compilar las páginas personalizadas

Los módulos dedicados de Microsoft Entra se incluyen en Commerce para crear páginas personalizadas para directivas de usuario de Microsoft Entra B2C. Las páginas se pueden crear específicamente para el diseño de la página de la política de cada usuario utilizando los módulos Microsoft Entra B2C detallados a continuación. Alternativamente, el módulo Microsoft Entra genérico se puede utilizar para todos los diseños de página y políticas en Microsoft Entra ID B2C (incluso para opciones de diseño de página dentro de políticas que no se enumeran a continuación).

• Los módulos específicos de página de Microsoft Entra están vinculados a elementos de entrada de datos representados por Microsoft Entra ID B2C. Estos módulos le dan más control sobre el posicionamiento de los elementos en sus páginas. Sin embargo, es posible que sea necesario crear más páginas y extensiones de módulo para tener en cuenta las variaciones más allá de la configuración predeterminada que se describe a continuación.
• El módulo Microsoft Entra genérico crea el elemento "div" para Microsoft Entra B2C para representar todos los elementos en el diseño de la página de la directiva del usuario, dando más flexibilidad a las funciones B2C de la página, pero menos control del posicionamiento y estilo (aunque CSS se puede utilizar para que coincida con la apariencia de su sitio).

Puede crear una sola página con el módulo Microsoft Entra genérico y utilícelo para todas sus páginas de políticas de usuario, o puede crear páginas específicas utilizando módulos de Microsoft Entra individuales para inicio de sesión, registro, edición de perfil, restablecimiento de contraseña y verificación de restablecimiento de contraseña. También puede usar una combinación de ambos, usando páginas específicas de Microsoft Entra para los diseños de página que se indican a continuación y la página del módulo de Microsoft Entra genérico para los diseños de página restantes dentro de estas u otras páginas de directivas de usuario.

Para aprender más sobre los módulos Microsoft Entra que se envían con la biblioteca de módulos, lea más en Páginas y módulos de gestión de identidad.

Para compilar las páginas personalizada con módulos de identidad específicos para administrar inicios de sesión de usuario, siga estos pasos.

1. En el generador de sitios de Commerce, vaya a su sitio.
2. Cree las siguientes cinco plantillas y páginas (si aún no están presentes en su sitio):
   • Una plantilla de Iniciar sesión y una página que usan el módulo de inicio de sesión.
   • Una plantilla de Registrarse y una página que usan el módulo de registro.
   • Una página y plantilla de Restablecimiento de contraseña que usan el módulo de restablecimiento de contraseña.
   • Una página y plantilla de Verificación de restablecimiento de contraseña que usan el módulo de verificación de restablecimiento de contraseña.
   • Una página y plantilla de Edición de perfil que usan el módulo de edición del perfil de cuenta.

Al compilar las páginas, siga estas directrices:

• Para cada página o módulo, utilice el diseño y el estilo que mejor se adapten a sus requisitos empresariales.
• Publique todas las páginas y direcciones URL que se deben usar en la configuración de Microsoft Entra B2C.
• Una vez que se publiquen las páginas y las direcciones URL, recoja las direcciones URL que se deben utilizar para las configuraciones de la directiva de Microsoft Entra B2C. Se agregará un sufijo ?preloadscripts=true a cada dirección URL cuando se use.

Configurar directivas de Microsoft Entra B2C con la información de página personalizada

En el portal de Azure, vuelva a la página de Microsoft Entra B2C y, a continuación, en el menú, en Directivas, seleccione Flujos de usuario (directivas).

Actualizar la directiva “Registrarse e iniciar sesión” con información de página personalizada

Para actualizar la directiva “Registrarse e iniciar sesión” con información de página personalizada, siga estos pasos.

1. En el directiva Registrarse e iniciar sesión que ha configurado anteriormente, en el panel de navegación, seleccione Diseños de página.

2. Seleccione el diseño Página unificada de inicio de sesión o de registro.

3. Establezca la opción Usar contenido de la página personalizada en Sí.

4. En el campo URI de página personalizado, especifique la dirección URL de inicio de sesión completa. Incluir el sufijo ?preloadscripts=true. Por ejemplo, escriba www.<my domain>.com/sign-in?preloadscripts=true.

5. En el campo Versión de diseño de página, seleccione la versión 2.1.0 o posterior (requiere biblioteca de módulos para Commerce versión 10.0.15 o superior).

6. Seleccione Guardar.

7. Seleccione el diseño Página de registro de cuenta local.

8. Establezca la opción Usar contenido de la página personalizada en Sí.

9. En el campo URI de página personalizado, especifique la dirección URL de registro completa. Incluir el sufijo ?preloadscripts=true. Por ejemplo, escriba www.<my domain>.com/sign-up?preloadscripts=true.

10. En el campo Versión de diseño de página, seleccione la versión 2.1.0 o posterior (requiere biblioteca de módulos para Commerce versión 10.0.15 o superior).

11. En la sección Atributos de usuario, siga estos pasos:

    1. Para los atributos Nombre y Apellido, seleccione No en la columna Requiere verificación.
    2. Para el atributo Dirección de correo electrónico, se recomienda dejar el valor predeterminado en Sí seleccionado en la columna Requiere Verificación. Esta opción garantiza que los usuarios que se registren con una dirección de correo electrónico determinada verifiquen que son propietarios de la dirección de correo electrónico.
    3. Para los atributos Dirección de correo electrónico, Nombre dado y Apellido, seleccione No en la columna Opcional.

12. Seleccione Guardar.

    

Actualizar la directiva “Edición de perfiles” con información de página personalizada

Para actualizar la directiva “Edición de perfiles” con información de página personalizada, siga estos pasos.

1. En el directiva Edición de perfiles que ha configurado anteriormente, en el panel de navegación, seleccione Diseños de página.
2. Seleccione el diseño Página de edición de perfil (puede requerir desplazarse hacia abajo más allá de otras opciones de diseño, según su pantalla).
3. Establezca la opción Usar contenido de la página personalizada en Sí.
4. En el campo URI de página personalizado, especifique la dirección URL completa de edición de perfil. Incluir el sufijo ?preloadscripts=true. Por ejemplo, escriba www.<my domain>.com/profile-edit?preloadscripts=true.
5. Para Versión de diseño de página, seleccione la versión 2.1.0 o superior (requiere biblioteca de módulos para Commerce versión 10.0.15 o superior).
6. En la sección Atributos de usuario, siga estos pasos:
   1. Para los atributos Nombre dado y Apellido, seleccione No en la columna Opcional.
   2. Para los atributos Nombre y Apellido, seleccione No en la columna Requiere verificación.
7. Seleccione Guardar.

Actualizar la directiva “Restablecimiento de contraseña” con información de página personalizada

Para actualizar la directiva “Restablecimiento de contraseña” con información de página personalizada, siga estos pasos.

1. En el directiva Restablecimiento de página que ha configurado anteriormente, en el panel de navegación, seleccione Diseños de página.
2. Seleccione el diseño Página de contraseña olvidada.
3. Establezca la opción Usar contenido de la página personalizada en Sí.
4. En el campo URI de página personalizado, especifique la dirección URL completa de verificación de restauración de contraseña. Incluir el sufijo ?preloadscripts=true. Por ejemplo, escriba www.<my domain>.com/password-reset-verification?preloadscripts=true.
5. En el campo Versión de diseño de página, seleccione la versión 2.1.0 o superior (requiere biblioteca de módulos para Commerce versión 10.0.15 o superior).
6. Seleccione Guardar.
7. Seleccione el diseño Página de cambio de contraseña.
8. Establezca la opción Usar contenido de la página personalizada en Sí.
9. En el campo URI de página personalizado, especifique la dirección URL completa de restauración de contraseña. Incluir el sufijo ?preloadscripts=true. Por ejemplo, escriba www.<my domain>.com/password-reset?preloadscripts=true.
10. En el campo Versión de diseño de página, seleccione la versión 2.1.0 o superior (requiere biblioteca de módulos para Commerce versión 10.0.15 o superior).
11. Seleccione Guardar.

Personalizar cadenas de texto predeterminada para etiquetas y descripciones

En la biblioteca de módulos, los módulos de inicio de sesión se llenan previamente con cadenas de texto predeterminadas para las etiquetas y descripciones. Puede personalizar las cadenas en el panel de propiedades del módulo en el que está trabajando. Cadenas adicionales en la página (como el enlace de texto ¿Contraseña olvidada? o el texto de llamada a la acción Crea una cuenta) requerirá el uso del kit de desarrollo de software (SDK) de Commerce y la actualización de los valores en el archivo global.json para el módulo de inicio de sesión.

Por ejemplo, el texto predeterminado para el vínculo de contraseña olvidada es ¿Olvidó la contraseña?. Lo siguiente muestra este texto predeterminado en la página de inicio de sesión.

Sin embargo, en el archivo global.json para el módulo de inicio de sesión de la biblioteca de módulos, puede editar el texto en ¿Olvidó la contraseña?, como se muestra en la siguiente ilustración.

Después de actualizar el archivo global.json y publicar los cambios, el nuevo texto del vínculo aparece en el módulo de inicio de sesión tanto en Commerce como en la página de inicio de sesión activa.

Recursos adicionales

Configurar su nombre de dominio

Implementar un inquilino nuevo de comercio electrónico

Crear un sitio de comercio electrónico

Asociar un sitio de Dynamics 365 Commerce con un canal en línea

Administrar archivos robots.txt

Subir redireccionamientos de URL en grandes cantidades

Configurar un inquilino B2C en Commerce

Configurar múltiples inquilinos B2C en un entorno de Commerce

Agregar soporte para una red de entrega de contenido (CDN)

Habilitar la detección de tienda según la ubicación