HIKO Social Login Plus

Añade inicio de sesión social y sin contraseña a tu tienda online. Los clientes pueden entrar con proveedores como Google, LINE, Facebook y Apple, con un código de un solo uso enviado por correo electrónico o WhatsApp, o con una passkey: sin contraseñas que recordar. Cada inicio de sesión se corresponde con una cuenta de cliente de Shopify.

La aplicación es para tiendas Shopify Plus con cuentas de cliente nuevas. Si tu tienda está en otro plan, o sigue usando las cuentas de cliente clásicas (heredadas), la configuración se bloquea y un aviso explica qué debe cambiar. Si acabas de actualizar o migrar, vuelve a abrir la aplicación para que compruebe de nuevo.

Requiere una suscripción de pago. Los planes y precios se muestran en la propia página de suscripción de Shopify, y es Shopify quien los cobra en tu factura de Shopify: nosotros nunca te cobramos por separado. Mientras no te suscribas, abrir la aplicación te lleva directamente a esa página de suscripción; todas las páginas de ajustes se desbloquean cuando la suscripción está activa.

Las tiendas de desarrollo (incluidos los entornos de prueba Plus) no necesitan suscripción y disponen de todas las funciones, así puedes montar y probar primero.

La pantalla de instalación solicita tres permisos, cada uno ligado a una función real:

• read_customers: localizar a un cliente existente por su correo para que un inicio de sesión social se una a su cuenta en lugar de crear un duplicado.
• write_customers: sincronizar la casilla de marketing marcada al iniciar sesión con el consentimiento de marketing de Shopify de esa persona, y escribir las etiquetas y el metacampo de identidad social.
• read_locales: leer el idioma principal de tu tienda para enviar el correo en el idioma correcto.

Para Shopify, los datos de clientes son datos de cliente protegidos, así que estos permisos requieren una aprobación adicional. Sin ellos no funcionan ni la sincronización del consentimiento de marketing ni la coincidencia con clientes existentes.

• Panel: la guía de configuración, un resumen de la actividad de inicio de sesión y la tendencia de los últimos 7 días. Haz clic en el nombre de la aplicación en la barra lateral para volver aquí.
• Analíticas de clientes: tus clientes, los inicios de sesión individuales, tendencias y desgloses de actividad.
• Proveedores de identidad: aquí vive casi todo el ajuste de inicio de sesión: el proveedor personalizado (el enlace con las cuentas de cliente), redes sociales, estilos personalizados, inicio de sesión por correo, Marketing opt-in, plataformas de marketing e identidad de inicio de sesión social.
• Widget de tienda: cómo aparece el inicio de sesión en tu tienda online y adónde van los clientes después.
• Integrations: Shopify Admin API, webhooks salientes, inicio de sesión headless y móvil.
• Traducciones: los textos del widget y de la página de verificación (OTP), por idioma.

Es el único paso de configuración obligatorio. La propia aplicación es un proveedor de identidad con el que Shopify se comunica:

1. Abre la página Proveedores de identidad (o la guía de configuración del panel) y busca la sección Proveedor personalizado.
2. Haz clic en Crear proveedor personalizado para abrir el admin de Shopify → Configuración → Cuentas de cliente y añadir un proveedor de identidad de terceros. Elige «Custom or other» y ponle un nombre.
3. Copia la Discovery URL, el Client ID y el Client secret que muestra la aplicación en los campos correspondientes, y fija el nombre del parámetro de URI de redirección tras cerrar sesión al valor indicado (post-sign-out). No te saltes ese campo: sin él, el cierre de sesión queda incompleto.
4. Guarda y después activa el proveedor.
5. De vuelta en la aplicación, haz clic en Comprobar configuración. Sondea tu tienda real y te dice si el enlace funciona, si el Client ID está obsoleto o si la tienda sigue apuntando a otro sitio.

1. Abre la sección Redes sociales de la página Proveedores de identidad.
2. Despliega el proveedor que quieras (por ejemplo, Google) y haz clic en Cómo obtener tu Client ID y secret para ver las instrucciones paso a paso.
3. Crea una aplicación OAuth en la consola de ese proveedor, copia el Client ID y el Client secret, pégalos y activa el proveedor.
4. Haz clic en Guardar.

Cada guía enlaza directamente con la consola correcta y enumera los pasos exactos. También puedes reordenar los proveedores arrastrándolos en esa lista: la vista previa contigua se actualiza al instante.

16 proveedores sociales: Google, Facebook, Apple, LINE, Kakao, X (Twitter), TikTok, Amazon, Twitch, Microsoft, Yahoo, LinkedIn, Discord, Spotify, GitHub y Yandex. Además, inicio de sesión con código de un solo uso por correo, con passkey y por WhatsApp. Tú eliges cuáles aparecen en el widget y en qué orden.

Sí. Puedes aportar tu propio Client ID y secret de OAuth para cada proveedor: sin dependencias, y la pantalla de consentimiento muestra tu propia marca. Algunos proveedores tienen opciones adicionales: datos de clave de Apple, región de Amazon, aviso de añadir amigo en LINE, canal y ámbitos de Kakao, y un selector de estilo de icono de Google.

Sí, y las tiendas de desarrollo no necesitan suscripción. Dos cosas que conviene saber:

• Con una tienda protegida por contraseña, «Comprobar configuración» no llega a una conclusión. Necesita alcanzar tu tienda real para saber si el inicio de sesión llega a esta aplicación; si la contraseña lo impide, informa de que no pudo comprobarlo, lo cual no significa que tu configuración esté mal.
• La aplicación OAuth de un proveedor suele exigir registrar también el dominio de tu tienda de prueba. Confirma que la URL de callback está registrada tanto para la tienda real como para la de prueba.

Sí. Los clientes reciben un código de un solo uso por WhatsApp. Empieza con nuestro número compartido (10 códigos por cliente y día, 2000 por tienda y día, a nuestro cargo) o conecta tu propio número de WhatsApp Business desde la página Proveedores de identidad para controlar el envío, la plantilla de mensaje, el tipo de botón de la plantilla, tus propios límites por tienda y la facturación.

El inicio de sesión por correo permite entrar con un código enviado al correo, sin contraseña. Una vez verificado, la aplicación propone crear una passkey (Face ID, huella o PIN del dispositivo): la passkey es una mejora posterior al código de un solo uso, no una vía de acceso aparte. Ambos se activan por separado en la sección Inicio de sesión por correo de la página Proveedores de identidad (o en la guía de configuración del panel).

Sí, en la sección Inicio de sesión por correo de la página Proveedores de identidad:

• SMTP propio: envía los códigos desde tu propio servidor de correo (incluidos Outlook / Office 365) para que el mensaje venga de ti y no de nosotros. Una vez relleno, usa Enviar correo de prueba para confirmar que los ajustes funcionan.
• Correo OTP personalizado: edita el asunto y el cuerpo HTML por idioma, con modo visual y modo HTML, vista previa en vivo y marcadores como {code}, {shop} y {minutes}. Los idiomas personalizados se marcan como «Personalizado» y pueden restablecerse a los valores predeterminados en cualquier momento.

Sí. En esa misma sección Inicio de sesión por correo, Página OTP personalizada te permite reescribir todo el HTML de la página de verificación por idioma: título, campo del código, enlace de reenvío, todo. Ofrece los mismos modos visual y HTML. Si a tu HTML le falta algo que el inicio de sesión necesita de verdad, el guardado se rechaza y te dice qué falta; la página publicada no se toca.

También hay un interruptor Alojar la página OTP en tu tienda. Activado, los clientes introducen el código en tu propio dominio, dentro de tu propio tema, en lugar del nuestro. Está desactivado por defecto y necesita un tema de tienda online con la aplicación instalada.

One Tap muestra el aviso de inicio de sesión en un clic de Google a quienes aún no han iniciado sesión. Está desactivado por defecto: una vez configurado Google, actívalo desde el panel o desde la fila de Google en la página Proveedores de identidad.

Con el widget de inicio de sesión de tu tienda online. Eligen un proveedor social o introducen un correo (o número de WhatsApp) para recibir un código de un solo uso. Una vez verificados quedan dentro de tu tienda, y pueden crear una passkey para volver con un solo toque la próxima vez. El widget también marca el último método usado con éxito con la etiqueta «Último usado», para que quien vuelve lo localice de inmediato.

Verá igualmente los métodos de inicio de sesión que has configurado. Como esta aplicación está registrada como proveedor de identidad en las cuentas de cliente, Shopify entrega a esta aplicación cualquier camino que lleve al inicio de sesión: el pago, un enlace de cuenta, la URL escrita a mano.

La aplicación intenta entonces, por orden: completar el inicio de sesión en silencio con una sesión de «mantener sesión iniciada» aún válida; si no puede, mostrar una página de inicio de sesión alojada por nosotros que monta exactamente el mismo widget que tu tienda: los mismos proveedores, los mismos estilos y textos. No hay nada más que configurar para ese camino.

Shopify exige de forma estricta una dirección de correo verificada en cada inicio de sesión, o lo bloquea. Proveedores como X (Twitter) y TikTok no siempre la devuelven.

En ese caso la aplicación intercala un paso tras la autorización del proveedor: la persona introduce una dirección de correo y la verifica con un código de un solo uso, y solo entonces se crea el inicio de sesión de Shopify. A esa misma persona no se le volverá a pedir la próxima vez con ese proveedor: recordamos la asociación. Por eso el inicio de sesión con estos pocos proveedores tiene un paso más que con Google.

No si la dirección de correo es la misma. Los clientes se identifican por su correo verificado, así que quien use primero Google y luego Facebook sigue siendo un solo cliente mientras ambos lleven el mismo correo: los inicios de sesión se acumulan y las analíticas muestran una sola fila.

Correos distintos sí producen dos clientes, y es deliberado: no podemos demostrar que sea la misma persona. Para fusionarlos, haz que el cliente inicie sesión y vincule las cuentas él mismo desde Métodos de inicio de sesión conectados en su página de cuenta, con Permitir vincular cuentas con un correo distinto activado en la página Widget de tienda.

Se une al cliente existente, sin duplicados. La coincidencia es por correo: si el correo verificado de la cuenta social coincide con un cliente que ya está en tu tienda, ese inicio de sesión lo autentica como ese cliente, con su historial de pedidos y direcciones intactos.

Sí. Añade el bloque de página de cuenta desde la página Widget de tienda: los clientes con sesión iniciada verán sus métodos conectados en la página de perfil de su cuenta, donde pueden desconectar uno o conectar otro nuevo.

Esa misma sección tiene el interruptor Permitir vincular cuentas con un correo distinto (desactivado por defecto). Con él activado, un cliente puede vincular una cuenta social cuyo correo verificado difiera del de su cuenta, y al iniciar sesión con ella acabará en esa misma cuenta. Sobrescribe el correo del proveedor, así que actívalo solo si confías en que los clientes vinculen únicamente cuentas suyas.

Cuatro formas, todas configurables en la página Widget de tienda:

• Ventana emergente en el icono de cuenta: haz clic en Activar en el tema para abrir las inserciones de aplicaciones del editor de temas, activa Sign-in widget y guarda. A partir de ahí, hacer clic en el icono de cuenta de la cabecera abre la ventana de inicio de sesión. Si tu tema es peculiar, añade un selector CSS propio en la sección Control de cuenta, o elige usar solo tu selector y saltarte la detección automática.
• Página de inicio de sesión: enlaza desde tu tema a /apps/signin (por ejemplo, desde una opción del menú de cabecera) para abrir la página de inicio de sesión alojada completa.
• Bloque de tarjeta de inicio de sesión: desde la pestaña Aplicaciones del editor de temas, añade el bloque de aplicación Sign-in en línea a cualquier sección.
• Métodos de inicio de sesión conectados: añade el bloque de página de cuenta para que los clientes con sesión iniciada vean y desconecten sus métodos sociales desde su página de perfil.

Por defecto se mantiene el enlace propio de tu tema. Si tienes tu propio centro de cliente, define el enlace a la página de cuenta con sesión iniciada en la página Widget de tienda (una ruta de tu tienda, por ejemplo /a/accounts): los clientes con sesión iniciada que pulsen el icono de cuenta de la cabecera irán allí.

Sí, en la página Widget de tienda. Define la redirección tras el inicio de sesión: de vuelta a la página desde la que iniciaron sesión, a la página anterior a esa, o a una ruta concreta (nota: Google One Tap deja siempre al cliente en la página en la que ya estaba, sea cual sea este ajuste). Mantener sesión iniciada (sesión SSO) conserva la sesión de los clientes que vuelven durante el periodo que elijas (1–90 días, 30 por defecto), evitando que se autentiquen en cada visita; también puedes optar por no tocar en absoluto la duración de sesión propia de Shopify.

Sí, en la sección Estilos personalizados de la página Proveedores de identidad: tema, forma de botón, tamaño, disposición (icono / etiqueta / icono + etiqueta / etiqueta con icono a la derecha), tamaño de icono y separador, además de anulaciones avanzadas para el color de fondo y de borde, el grosor del borde, la altura del botón, el tamaño de iconos y etiquetas, y el grosor y color de la etiqueta.

Para un control más fino, activa el CSS personalizado: la aplicación genera a partir de tus ajustes actuales una plantilla CSS completa y comentada como punto de partida (clases como .hs-btn y .hs-lbl) para que la edites, y puedes regenerarla desde tus ajustes cuando quieras. El fondo, el borde y la altura del botón conviene fijarlos en los campos de arriba y no por CSS. Cada cambio se refleja en vivo en la vista previa contigua.

Sí. Despliega cualquier proveedor en la página Proveedores de identidad y encontrarás el campo Texto del botón, configurable por idioma: el botón de Google puede leerse distinto en español y en japonés. Déjalo vacío para usar la traducción incorporada.

Sí. El widget viene en 15 idiomas y sigue automáticamente el idioma de tienda de cada cliente. En la página Traducciones puedes sobrescribir por idioma cualquier cadena del widget de inicio de sesión y de la página de verificación (OTP), e incluso añadir un idioma que no esté en la lista; «Restablecer valores predeterminados» devuelve todo un idioma a los textos incorporados. El texto de las casillas de marketing y consentimiento se edita en cambio directamente en la sección Marketing opt-in de la página Proveedores de identidad (también por idioma, y admite HTML).

El propio admin de la aplicación está disponible en 11 idiomas, conmutables desde el menú de idioma de la cabecera.

No de forma apreciable. El widget es un único archivo empaquetado, servido desde el propio CDN de Shopify y cargado con defer: se ejecuta después de que la página se renderice y nunca bloquea el primer pintado. La ventana emergente y el bloque de tarjeta comparten el mismo archivo, así que una página lo carga una sola vez. Y el bloque de tarjeta de inicio de sesión no se genera en absoluto para clientes que ya tienen la sesión iniciada.

Sí, en la sección Marketing opt-in de la página Proveedores de identidad. La casilla «Recibir novedades y ofertas por correo» del inicio de sesión se sincroniza con el consentimiento de marketing de Shopify del cliente; tú decides si aparece premarcada (nota: premarcar no está permitido bajo el RGPD/ePrivacy en la UE y el Reino Unido) y si desmarcarla lo da de baja. En esa misma sección puedes exigir además una casilla de aceptación de condiciones antes del inicio de sesión. El texto y los enlaces de ambas casillas se editan aquí, por idioma.

Si marca la casilla un cliente que aún no existe, el consentimiento queda retenido y se aplica cuando Shopify crea realmente ese cliente: por eso es normal que un cliente recién registrado no muestre el consentimiento de inmediato, y no significa que se haya perdido.

Sí. En la sección Plataformas de marketing de la página Proveedores de identidad, conecta Klaviyo, Mailchimp u Omnisend con tu clave de API: «Validar clave» confirma la conexión y después «Obtener listas» te deja elegir a qué listas se añaden los clientes, y decides si sincronizar a todos en cada inicio de sesión o solo a quienes dieron su consentimiento. También puedes etiquetar a los clientes sincronizados con social-login o con una etiqueta propia, y crear en Klaviyo métricas de inicio de sesión social y de Google One Tap.

Sí, en la sección Identidad de inicio de sesión social de la página Proveedores de identidad:

• Etiquetas: etiqueta automáticamente al cliente cuando inicia sesión con una red social. La plantilla por defecto es uid_%(social)s_%(user_id)s y las variables disponibles son %(social)s y %(user_id)s. (La IP no se ofrece a propósito: cambia en cada inicio de sesión y agotaría el límite de Shopify de 250 etiquetas por cliente.)
• Metacampo de cliente: siempre activo. Cada inicio de sesión social escribe JSON en un metacampo del cliente con el proveedor, el ID de usuario, el nombre y la fecha de vinculación. Léelo desde tu tema con {{ customer.metafields.hiko.social_identities }}.

Sí, en la página Integrations:

• Inicio de sesión headless y móvil: configura el cliente OAuth de la Customer Account API y los orígenes permitidos para añadir inicio de sesión social, OTP por correo e inicio de sesión biométrico a una tienda web headless y a aplicaciones móviles nativas (React Native, iOS, Android). La página incluye instrucciones paso a paso para obtener el Client ID, una explicación de los esquemas de URI personalizados para móvil y enlaces a los SDK y repositorios de GitHub.
• Shopify Admin API: consultas de ejemplo listas para usar que leen tus clientes y sus metacampos con un token de acceso que creas tú.

Sí. En la página Integrations, indica un endpoint HTTPS y activa los webhooks salientes para customer.login, customer.connected y customer.created. Cada solicitud se firma con un secreto que generas tú (X-HIKO-Signature), y dispones de un botón Enviar evento de prueba, un registro de envíos recientes y un ejemplo de verificación de firma en Node.js listo para usar.

La página Analíticas de clientes lista tus clientes y los inicios de sesión individuales, con búsqueda, filtros y exportación a CSV. También muestra los inicios de sesión a lo largo del tiempo y desgloses por proveedor, navegador, sistema operativo, país y ciudad. Haz clic en un cliente para ver sus detalles (teléfono, etiquetas e identidades sociales conectadas) y elimínalo junto con sus inicios de sesión si lo necesitas. El panel también muestra la actividad reciente y una tendencia de 7 días.

El número de clientes aquí suele ser menor que el total de tu admin de Shopify, y es correcto: esta página cuenta solo a quienes han iniciado sesión a través de esta aplicación. Los clientes creados en el pago, por importación o de otro modo no aparecen aquí.

Solo lo que necesitan el inicio de sesión y las analíticas:

• Clientes: dirección de correo, nombre, qué proveedores usaron y sus ID de usuario allí, primer y último inicio de sesión y número de inicios de sesión.
• Inicios de sesión: hora, proveedor, navegador, sistema operativo y ubicación aproximada (país / ciudad) de cada uno.
• Estado efímero: los datos de un solo uso empleados durante el inicio de sesión (la pista del método elegido, los códigos de un solo uso, la sesión de «mantener sesión iniciada») viven desde unos minutos hasta los días que fijes y caducan solos. La sesión de «mantener sesión iniciada» se guarda cifrada.

No guardamos las contraseñas de los clientes en sus proveedores sociales ni conservamos los tokens de acceso de larga duración de los proveedores. Los datos de cliente e inicios de sesión anteriores se conservan hasta que ese cliente se elimina o hasta que desinstalas la aplicación (véanse las dos respuestas siguientes).

Cualquiera de las dos vías sirve:

• Eliminarlos tú: abre ese cliente en la página Analíticas de clientes y elimínalo. Su ficha y todos sus inicios de sesión desaparecen con él.
• Usar el proceso de Shopify: cuando un cliente presenta una solicitud de eliminación o de acceso a datos a través de Shopify, Shopify avisa a esta aplicación y borramos automáticamente los datos de ese cliente aquí. No tienes que hacer nada más.

Los secretos guardados se muestran enmascarados en el admin y nunca se devuelven en claro al navegador; dejar vacío un campo de secreto al guardar significa «conserva el valor guardado», así que no puede borrarse por accidente. El secreto de firma de webhooks se muestra completo una sola vez, al generarlo: cópialo en ese momento.

Puedes regenerar el Client secret del proveedor personalizado cuando quieras (se te pedirá confirmación); el anterior deja de funcionar de inmediato. Recuerda pegar después el nuevo valor en tus ajustes de cuentas de cliente de Shopify, o el inicio de sesión se romperá.

Al desinstalar se borran todos tus ajustes (proveedores, credenciales, estilos, SMTP, marketing) y se invalidan las sesiones de inicio de sesión. Las analíticas de clientes e inicios de sesión se borran unas 48 horas después, cuando Shopify nos avisa como exigen sus normas.

Por tanto, reinstalar es empezar de cero: hay que volver a introducir todas las credenciales de proveedores y volver a configurar el proveedor personalizado en las cuentas de cliente de Shopify con un Client ID y un secret nuevos. Los clientes siguen en Shopify —son clientes de Shopify, no nuestros—, pero el registro de quién inició sesión con qué cuenta social no vuelve.

Comprueba en este orden:

• La inserción de la aplicación no está activada. La ventana emergente necesita Sign-in widget activado y guardado en las inserciones de aplicaciones del tema; Activar en el tema, en la página Widget de tienda, te lleva directamente allí.
• No se ha reconocido el icono de cuenta. La detección automática cubre la mayoría de temas, pero puede fallar con temas muy personalizados; añade el selector CSS de ese elemento en Control de cuenta.
• Tienes tú la sesión iniciada. El bloque de tarjeta de inicio de sesión no se muestra a clientes con sesión iniciada: pruébalo en una ventana privada.

• El proveedor personalizado se guardó pero no se activó. Es la causa más frecuente. Comprueba que esté activo en tus ajustes de cuentas de cliente de Shopify y verifícalo con Comprobar configuración.
• El Client ID está obsoleto. Si regeneraste el secret o reinstalaste la aplicación, Shopify puede conservar aún el valor antiguo; Comprobar configuración te dice exactamente cuál está viendo.
• Ese proveedor no tiene credenciales. Los proveedores sin credenciales aparecen marcados en la lista; sus botones no funcionan.

Asegúrate de que la Callback URL que se muestra para ese proveedor esté registrada, exactamente igual, en su consola. El callback con el dominio de tu tienda solo se usa cuando empleas tu propio cliente de Google; en todos los demás casos (incluido nuestro cliente de Google compartido) se usa el callback del broker que aparece junto a los campos del proveedor. Copia el valor tal cual.

Correo: que revise primero la carpeta de spam. Si configuraste SMTP propio, usa Enviar correo de prueba para confirmar que los ajustes del servidor y la dirección del remitente funcionan: un dominio de envío sin los registros de autenticación adecuados acaba fácilmente en spam. Ten en cuenta además que una misma dirección de correo puede recibir como máximo 20 códigos al día; alcanzado ese límite, al cliente se le indica directamente.

WhatsApp: con tu propio número, la plantilla de mensaje debe ser una plantilla de autenticación aprobada por Meta y su código de idioma debe coincidir con el que introdujiste. Con el número compartido, los límites son 10 códigos por cliente y día y 2000 por tienda y día.

Casi siempre se debe a que no se ha definido el nombre del parámetro de URI de redirección tras cerrar sesión. Con «mantener sesión iniciada» activado, nosotros recordamos aparte a ese cliente, y Shopify debe avisarnos al cerrar sesión para que borremos ese recuerdo.

Vuelve al admin de Shopify → Configuración → Cuentas de cliente, abre tu proveedor personalizado y comprueba que ese campo valga post-sign-out (el valor que muestra la aplicación). Guarda y prueba de nuevo a cerrar sesión.

Usa el botón Soporte de la cabecera para escribirnos (los adjuntos son bienvenidos) y te responderemos por correo electrónico.