Inicio de sesión con redes sociales para cuentas de cliente

Además de la experiencia de inicio de sesión sin contraseña predeterminada para las cuentas de cliente, puedes conectar tus cuentas de Google y Facebook a fin de permitir que los clientes inicien sesión mediante sus credenciales de redes sociales.

Activar el inicio de sesión con redes sociales para las cuentas de cliente puede proporcionar a los clientes una experiencia de inicio de sesión más rápida mediante métodos de autenticación conocidos. Puedes activar varios métodos de inicio de sesión con redes sociales en tu tienda.

Si conectaste tu propio proveedor de identidad a las cuentas de cliente y deseas conectar un inicio de sesión con redes sociales, debes comunicarte con tu proveedor de identidad externo.

Consideraciones para conectar el inicio de sesión con redes sociales a las cuentas de cliente

Revisa las siguientes consideraciones para conectar el inicio de sesión con redes sociales a las cuentas de cliente:

  • Debes tener una cuenta de desarrollador para el proveedor que deseas conectar a las cuentas de cliente.
  • El único dato del cliente que se sincroniza con Shopify cuando usas el inicio de sesión con redes sociales es el correo electrónico del cliente.

Conectar Google a las cuentas de cliente

Para conectar Google a las cuentas de cliente, debes completar las siguientes tareas en este orden:

Durante la configuración, deberás cambiar entre las pestañas del navegador de tu Google Cloud Console y de tu panel de control de Shopify. Necesitas configurar una cuenta de Google Cloud para conectar Google a las cuentas de cliente. Para obtener más información sobre Google Cloud, consulta la documentación de ayuda de Google.

Paso 1: Abre la página Iniciar sesión con Google en tu panel de control de Shopify

  1. Desde el panel de control de Shopify, ve a Configuración > Cuentas de cliente.

  2. En la sección Autenticación, haz clic en Gestionar.

  3. Haz clic en Conectar junto a Google para abrir la página Iniciar sesión con Google.

Esta página contiene información que deberás copiar y pegar al configurar el cliente OAuth de tu app de Google, así que mantenla abierta en otra pestaña del navegador.

Paso 2: Crea una app en tu Google Cloud Console

  1. En otra pestaña del navegador, inicia sesión en tu Google Cloud Console.
  2. Selecciona un proyecto existente o crea uno nuevo. Se te redirigirá al panel de control del proyecto.
  3. Haz clic en Menu y luego en API y servicios > Credenciales.
  4. Haz clic en Configurar pantalla de consentimiento > Comenzar.
  5. Completa la información de configuración OAuth de tu proyecto:
    1. Asigna a tu app un nombre que el cliente pueda reconocer, como el nombre de tu tienda online. Proporciona un correo electrónico para obtener ayuda técnica y, a continuación, haz clic en Siguiente.
    2. En la sección Audiencia, selecciona Externo y luego haz clic en Siguiente.
    3. Proporciona un correo electrónico de contacto para las notificaciones que Google pueda enviar sobre el proyecto y haz clic en Siguiente.
    4. Acepta la Política de datos de usuario de los servicios de las API de Google y luego haz clic en Continuar.
    5. Haz clic en Crear.
  6. Configura la información de las políticas de tu app que se mostrará a los clientes en la pantalla de consentimiento:
    1. Haz clic en Marca.
    2. En la sección Dominio de la app, incluye un enlace a tu página de inicio, uno a tu política de privacidad pública y otro a tus Términos del Servicio. Más información sobre cómo crear políticas de la tienda.

Paso 3: Configura el cliente OAuth de tu app en tu Google Cloud Console

Este paso requiere que copies la información de la sección Instrucciones de configuración de la página Iniciar sesión con Google en el panel de control de Shopify y la pegues en los campos correspondientes de la pestaña de Google Cloud Console.

  1. En la app de tu proyecto en Google Cloud Console, haz clic en Resumen.
  2. En la sección Métricas, haz clic en Crear cliente OAuth.
  3. Configura la información del cliente OAuth:
    1. En el menú desplegable Tipo de aplicación, selecciona Aplicación web.
    2. En el campo Nombre, introduce un nombre.
  4. Configura la sección Orígenes autorizados de JavaScript para tu app:
  5. En la sección Orígenes autorizados de JavaScript, haz clic en + Agregar URI.
  6. En la página Iniciar sesión con Google del panel de control de Shopify, copia el valor de la sección Orígenes autorizados de JavaScript.
  7. En tu Google Cloud Console, pega el valor en el campo URI 1.
  8. Si tienes más de un URI en la sección Orígenes autorizados de JavaScript del panel de control de Shopify, repite estos pasos para los campos de URI adicionales.
  9. Configura la sección URI de redireccionamiento autorizados de tu app:
  10. En tu Google Cloud Console, dentro de la sección URI de redireccionamiento autorizados, haz clic en + Agregar URI.
  11. En la pestaña del navegador con tu panel de control de Shopify, copia el valor del campo URI de redireccionamiento autorizado.
  12. Vuelve a tu Google Cloud Console y pega el valor en el campo URI 1.
  13. Si tienes más de un URI en la sección URI de redireccionamiento autorizado de tu panel de control de Shopify, repite estos pasos para los campos de URI adicionales.
  14. En la consola de Google Cloud, haz clic en Crear.

Mantén abierto el cuadro de diálogo Cliente de OAuth creado que se muestra para el Paso 4: Configurar las credenciales en el panel de control de Shopify, ya que debes copiar y pegar información de la consola de Google Cloud en el panel de control de Shopify.

Paso 4: Configurar las credenciales en el panel de control de Shopify

  1. En el cuadro de diálogo Cliente de OAuth creado de la consola de Google Cloud, copia el ID de cliente.
  2. En la página Iniciar sesión con Google del panel de control de Shopify, en la sección Credenciales, pega el ID de cliente.
  3. En el cuadro de diálogo Cliente de OAuth creado de la consola de Google Cloud, copia el Secreto del cliente.
  4. En la página Iniciar sesión con Google del panel de control de Shopify, en la sección Credenciales, pega el Secreto del cliente.
  5. En la página Iniciar sesión con Google del panel de control de Shopify, haz clic en Guardar.

Paso 5: Publicar la app en la consola de Google Cloud

  1. En la app del proyecto en la consola de Google Cloud, haz clic en Público.
  2. Haz clic en Publicar app.

Conectar Facebook a las cuentas de cliente

Para conectar Facebook a las cuentas de cliente, debes completar las siguientes tareas en orden:

Durante la configuración, debes cambiar entre las pestañas del navegador del panel de control de Meta for Developers y del panel de control de Shopify. Para conectar Facebook a las cuentas de cliente, debes tener una cuenta de Meta Developer. Obtén información sobre cómo registrarte como Meta Developer.

Paso 1: Abrir la página Iniciar sesión con Facebook en el panel de control de Shopify

  1. Desde el panel de control de Shopify, ve a Configuración > Cuentas de cliente.

  2. En la sección Autenticación, haz clic en Gestionar.

  3. Haz clic en Conectar junto a Facebook para abrir la página Iniciar sesión con Facebook.

Paso 2: Crear una app en el panel de control de Meta for Developers

  1. En una pestaña distinta del navegador, ve al panel de control de Meta for Developers y haz clic en Iniciar sesión para acceder. Si no tienes una cuenta de Meta Developer, debes crear una desde la página de inicio de sesión antes de continuar con el siguiente paso.
  2. Haz clic en Apps.
  3. Haz clic en Crear app.
  4. Completa los campos Nombre de la app y Correo electrónico de contacto de la app, y haz clic en Siguiente.
  5. En la página Agregar casos de uso, selecciona Autenticar y solicitar datos de los usuarios con el inicio de sesión de Facebook y haz clic en Siguiente.
  6. En la página ¿Qué portafolio comercial deseas conectar con esta app?, selecciona un portafolio comercial o No quiero conectar un portafolio comercial aún, y haz clic en Siguiente.
  7. Revisa la página Requisitos de publicación y haz clic en Siguiente.
  8. Revisa la página Información general y haz clic en Ir al panel de control.

Paso 3: Ajustar la configuración de la app de Meta

  1. Después de crear una app, en el panel de control de Meta for Developers, haz clic en Casos de uso.
  2. En el caso de uso Autenticar y solicitar datos de los usuarios con el inicio de sesión de Facebook, haz clic en Personalizar.
  3. Para asegurar que la información del cliente se capture durante el inicio de sesión, en la sección Permisos y funciones, junto a correo electrónico, haz clic en Agregar.
  4. Haz clic en Configuración y ve a Configuración de OAuth de cliente.
  5. En la página Iniciar sesión con Facebook del panel de control de Shopify, copia la URL de redireccionamiento de la sección URL de redireccionamiento.
  6. En la página Configuración del panel de control de Meta for Developers, pega la URL de redireccionamiento en el campo URI de redireccionamiento de OAuth válidos.
  7. Si tienes más de una URL de redireccionamiento en la sección URL de redireccionamiento del panel de control de Shopify, repite estos pasos para las otras URL de redireccionamiento.
  8. En la página Iniciar sesión con Facebook del panel de control de Shopify, copia la URL de la sección URL de anulación de autorización.
  9. En la página Configuración del panel de control de Meta for Developers, pega la URL en el campo URL de devolución de llamada de anulación de autorización.
  10. En la página Configuración del panel de control de Meta for Developers, haz clic en Guardar cambios.

Paso 4: Configurar las credenciales en el panel de control de Shopify

  1. Haz clic en el ícono de Inicio para volver al panel de control de Meta for Developers y, luego, haz clic en Configuración de la app > Básica.
  2. Copia el ID de la app del panel de control de Meta for Developers.
  3. En la página Iniciar sesión con Facebook del panel de control de Shopify, pega el ID de la app en el campo ID de la app de la sección Credenciales.
  4. En el panel de control de Meta for Developers, haz clic en Mostrar junto al Secreto de la app y cópialo.
  5. En la página Iniciar sesión con Facebook del panel de control de Shopify, pega el secreto de la app en el campo Secreto de la app y haz clic en Guardar.
  6. En el panel de control de Shopify, haz clic en Guardar cambios.

Paso 5: Probar y activar Iniciar sesión con Facebook

  1. En la página Iniciar sesión con Facebook del panel de control de Shopify, haz clic en Más acciones > Vista previa y prueba el flujo de autenticación de Facebook como si fueras un cliente que inicia sesión en tu tienda.
  2. Haz clic en Activar.

Una vez que actives Iniciar sesión con Facebook, puedes ir a la tienda online e iniciar sesión en tu cuenta de cliente con Facebook para probar la experiencia del cliente.

Iniciar sesión con Shop

Si tienes Shop Pay activado, el cliente puede iniciar sesión con sus credenciales de Shop y las claves de acceso guardadas. Además, los clientes inician sesión automáticamente con Shop después de pagar en la tienda con Shop Pay.

Sign in with Shop se activa automáticamente para las cuentas de cliente y solo se puede eliminar de la tienda si desactivas Shop Pay.

Aprende a agregar un botón de Sign in with Shop a la tienda.

Administrar las opciones de inicio de sesión social

Puedes editar, desactivar o eliminar un método de inicio de sesión social que hayas conectado.

Después de desactivar o eliminar un método de inicio de sesión social, los clientes mantienen la sesión iniciada para evitar interrupciones. Las sesiones de inicio de sesión social vencen de forma natural o cuando los clientes cierran sesión.

Pasos:

  1. Desde el panel de control de Shopify, ve a Configuración > Cuentas de cliente.

  2. En la sección Autenticación, haz clic en Gestionar.

  3. Junto al método de inicio de sesión que quieres cambiar, haz clic en el menú .

  4. Realiza una de las siguientes acciones:

    • Para editar una opción de inicio de sesión, haz clic en Gestionar y luego actualiza las credenciales que quieres editar.
    • Para desactivar una opción de inicio de sesión sin eliminarla, haz clic en Desactivar.
    • Para eliminar una opción de inicio de sesión, haz clic en Eliminar y luego vuelve a hacer clic en Eliminar en el cuadro de diálogo.

Actualizar los inicios de sesión social al cambiar el dominio de cuentas de cliente

Si planeas cambiar el dominio de las cuentas de cliente a una URL diferente, deberás actualizar la configuración de inicio de sesión social antes de hacer el cambio en Shopify. Esto garantiza que los clientes puedan seguir iniciando sesión sin interrupciones.

Estos pasos son obligatorios cuando actualizas la URL de cuentas de cliente en Shopify del formato heredado, como shopify.com/1234567890/account, al nuevo formato de subdominio account.your-store.com, o de un subdominio existente a un subdominio diferente, como al actualizar de account.your-store.com a customers.your-store.com.

Agregar el nuevo subdominio de cuentas de cliente a los proveedores sociales

Agregarás el nuevo dominio a la configuración del proveedor social junto al dominio actual. Después de cambiar el dominio de cuentas de cliente en Shopify y confirmar que el proceso de inicio y cierre de sesión de dichas cuentas funciona correctamente, podrás eliminar las entradas del dominio antiguo.

Debes repetir estos pasos para cada opción de inicio de sesión social que hayas activado.

Pasos:

Google
  1. Ve a Google Cloud Console y abre API y servicios > Credenciales.
  2. Selecciona el cliente de OAuth 2.0 que creaste para Shopify.
  3. En Orígenes autorizados de JavaScript, agrega una entrada nueva. Por ejemplo: https://account.your-store.com
  4. En URI de redireccionamiento autorizados, agrega una entrada nueva. Por ejemplo: https://account.your-store.com/authentication/social/google/callback
  5. En URL de devolución de llamada para desautorizar, agrega una entrada nueva. Por ejemplo: https://account.your-store.com/authentication/social/google/revoke
  6. Guarda los cambios. Por ahora, conserva tanto las URL antiguas como las nuevas.
  7. Vuelve a tu panel de control de Shopify y sigue los pasos para cambiar el dominio de cuentas a la URL del nuevo subdominio personalizado en Shopify.
  8. Prueba tanto el inicio como el cierre de sesión con cada opción social en la tienda online para confirmar que todo funciona.
  9. Opcional: Una vez que se confirme que el proceso de inicio de sesión funciona correctamente, puedes volver a Google y eliminar las entradas del dominio antiguo.
Facebook
  1. Ve a Meta for Developers y abre tu app.
  2. Ve a Inicio de sesión con Facebook > Configuración.
  3. En URI de redireccionamiento de OAuth válidos, agrega una entrada nueva. Por ejemplo: https://account.your-store.com/authentication/social/facebook/callback
  4. En URL de devolución de llamada de desautorización, agrega una entrada nueva. Por ejemplo: https://account.your-store.com/authentication/social/facebook/revoke
  5. Ve a Configuración > Información básica.
  6. En Dominios de la app, agrega una entrada nueva. Por ejemplo: account.your-store.com
  7. Guarda los cambios. Por ahora, conserva tanto las URL antiguas como las nuevas.
  8. Vuelve a tu panel de control de Shopify y sigue los pasos para cambiar el dominio de cuentas a la URL del nuevo subdominio personalizado en Shopify.
  9. Prueba tanto el inicio como el cierre de sesión con cada opción social en la tienda online para confirmar que todo funciona.
  10. Opcional: Una vez que se confirme que el proceso de inicio de sesión funciona correctamente, puedes volver a Facebook y eliminar las entradas del dominio antiguo.