Implementar el inicio de sesión social | Construya su sitio | Composable Storefront

PWA Kit viene listo para usar con la opción de usar el inicio de sesión social para sus compradores. Incluya la característica en su sitio del kit de Progressive Web App (PWA) para mejorar la experiencia del comprador. Con el inicio de sesión social, los compradores pueden entrar rápidamente en su sitio y crear perfiles utilizando sus cuentas de redes sociales.

Nuestro sitio de demostración muestra la implementación predeterminada del inicio de sesión social.

Para habilitar y configurar el inicio de sesión social para tu sitio de PWA Kit, sigue los pasos de esta guía. A lo largo de esta guía, usamos un escaparate de ejemplo con la URL: https://www.example.com. Reemplácelo example.com con su nombre de dominio.

El inicio de sesión social no es compatible con los storefronts híbridos.

PWA Kit es compatible con los proveedores de identidad (IdP) enumerados en Proveedores de identidad admitidos.

Si cumple con los requisitos previos, los inicios de sesión sociales de Google y Apple están disponibles en Retail React App de forma predeterminada.

Para usar el inicio de sesión social:

Crea tu sitio usando Composable Storefront y Retail React App versión 6.0 o posterior.
Para agregar el IdP elegido, complete los pasos descritos en Registro de un proveedor de identidad.
Configure un cliente de inicio de sesión de comprador y acceso a API (SLAS). En el campo URI de redireccionamiento de su cliente, ingrese el URI de redireccionamiento que desea usar en el flujo de inicio de sesión social. De forma predeterminada, PWA Kit se utiliza /social-callback como ruta. Por ejemplo, si tu dominio es example.com, ingresa: https://www.example.com/social-callback. Reemplázalo example.com con tu dominio real.

a. Actualización template-retail-react-app/config/default.js

Para configurar el inicio de sesión social en tu proyecto de PWA Kit, actualízalo template-retail-react-app/config/default.js como se muestra en este ejemplo.

Asegúrese de que la ruta de acceso del URI de redireccionamiento configurada en el proyecto de PWA Kit coincida con la ruta configurada en el cliente SLAS. El cliente SLAS puede usar un comodín para el URI completo, pero las rutas deben coincidir exactamente.

b. Opcional: Uso de una variable de entorno para establecer el URI de redireccionamiento

El valor de la variable de entorno para el inicio de sesión social anula cualquier valor que haya agregado en template-retail-react-app/config/default.js.

Opcionalmente, puede establecer el URI de redireccionamiento usando una variable de entorno en lugar de template-retail-react-app/config/default.js. Úselo template-retail-react-app/config/default.js para habilitar el inicio de sesión social y configurar los IdP. Configure esta variable de entorno para establecer el URI de redireccionamiento.

SOCIAL_LOGIN_REDIRECT_URI

Consulte Variables de entorno.

De forma predeterminada, PWA Kit importa y configura los iconos para los inicios de sesión sociales de Google y Apple en el SocialLogin componente del template-retail-react-app/app/components/social-login/index.jsx archivo. En su sitio, puede incluir íconos para otros IdP compatibles. Para ello, complete estos pasos.

a. Importar iconos en el SocialLogin componente

En este ejemplo, importamos el icono de Facebook al SocialLogin componente.

b. Extender el IDP_CONFIG objeto

Utilice el IDP_CONFIG objeto en el SocialLogin componente para mostrar botones para sus inicios de sesión sociales adicionales, cada uno con sus respectivos iconos y mensajes localizados.

En este ejemplo, agregamos la configuración para Facebook. Asegúrese de que cada clave de IdP coincida con el nombre en minúscula de su IdP elegido.

Siga las mejores prácticas de seguridad para proteger las cuentas de los compradores. Por ejemplo:
- Si está utilizando una CDN integrada (eCDN), puede aplicar las reglas de limitación de velocidad de eCDN.
- Si utiliza una red de entrega de contenido (CDN) de terceros, como Cloudfare, puede bloquear solicitudes por puntuación de amenaza.
Realice un seguimiento del uso de las opciones de autenticación por parte de los compradores y diagnostique los problemas de manera eficiente. Por ejemplo, use Log Center para acceder a los registros de Managed Runtime (MRT) y su instancia de B2C Commerce.
Combine perfiles de comprador en Shopper Login and API Access Service (SLAS) para asegurarse de que los compradores con una identidad de B2C Commerce y un IdP de terceros puedan iniciar sesión sin problemas sin crear cuentas duplicadas.

Si ambos perfiles existen antes de configurar loginMergeClaims y antes de que un comprador iniciara sesión en su sitio, no se realiza ninguna combinación. Las cuentas no se pueden fusionar retroactivamente.
Los pasos de la guía Fusionar perfiles de comprador se aplican a los compradores que tienen la misma identificación de inicio de sesión para su perfil de B2C Commerce y una identificación de terceros.

Para obtener más información sobre la combinación de perfiles y los casos de uso admitidos, consulte Fusionar perfiles de comprador.

Esta sección proporciona soluciones sugeridas para algunos errores comunes que puede encontrar relacionados con el inicio de sesión social.

Posible causa: La configuración de inicio de sesión social es incorrecta.

Solución sugerida: Asegúrese de que la ruta de acceso del URI de redireccionamiento configurada en el proyecto de PWA Kit coincida con la ruta configurada en el cliente SLAS. Consulte Configurar el inicio de sesión social.

Posible causa: Los compradores tienen perfiles separados para B2C Commerce e IdP de terceros.

Solución sugerida: Siga los pasos descritos en Fusionar perfiles de comprador para fusionar los registros de los compradores registrados en B2C Commerce y un IdP de terceros.

Proveedores de identidad SLAS