Conexiones por autorización: Shopify, Meta y Google Workspace

Estas conexiones sirven para que la app lea datos de tu cuenta (productos y pedidos de tu tienda, las publicaciones de tu página). No las confundas con el login social, que es tu cliente entrando en la app con su propia cuenta: eso está en la pestaña Autenticación, en Registro e inicio de sesión en tu app.

Antes de empezar

• Plan: Builder. El plan se comprueba en cada uso: si la cuenta deja Builder, la app deja de leer esos datos;
• Costo: crear las apps en los proveedores es gratis. Cada llamada que la app hace a esas cuentas consume créditos de integración;
• Tienes que estar presente en el paso de autorizar: eres tú quien aprueba el acceso, con la sesión iniciada en tu cuenta del proveedor.

Cómo funciona la autorización

El camino es el mismo para Shopify y Meta, y tiene dos etapas:

1. guardar las claves de la app que creaste en el proveedor, en la tarjeta, con Guardar y activar;
2. conectar la cuenta: en la misma tarjeta, haz clic en Conectar cuenta. Se abre una ventana del proveedor, entras en tu cuenta y apruebas el acceso. La ventana se cierra sola y la tarjeta muestra "Integración activa."

El botón Conectar cuenta queda deshabilitado hasta que las claves estén guardadas ("Guarde las claves primero y luego conecte la cuenta."). Guardar las claves no basta: sin la etapa 2, la app responde que primero hay que conectar la cuenta.

Shopify

Campos de la tarjeta: Shop domain, API key y API secret key.

La app puede listar productos, ver un producto, listar pedidos y listar clientes de la tienda. Es solo lectura: el acceso que se pide a la tienda es para leer productos, pedidos y clientes.

1. en partners.shopify.com, crea una app (para probar, una tienda de desarrollo es gratis);
2. copia el Client ID (va en el campo API key) y el Client secret (va en API secret key);
3. en el editor de la app, pestaña Integraciones, categoría E-commerce, abre la tarjeta Shopify;
4. en Shop domain, indica el dominio de la tienda con el formato tu-tienda.myshopify.com. Tiene que ser la dirección .myshopify.com, no el dominio propio de la tienda;
5. completa las dos claves y haz clic en Guardar y activar;
6. haz clic en Conectar cuenta y aprueba la instalación en la tienda.

Meta (Facebook/Instagram)

Campos de la tarjeta: App ID y App Secret.

La app puede listar las Páginas de Facebook que administras y leer las publicaciones de una página. El acceso que se pide es para ver la lista de páginas, leer su interacción y gestionar el negocio.

1. en developers.facebook.com, crea una app (puede ser la misma de WhatsApp);
2. agrega el producto Inicio de sesión con Facebook a la app;
3. en Configuración → Básica, copia el App ID y el App Secret;
4. en el editor de la app, pestaña Integraciones, categoría Redes sociales, abre la tarjeta Meta (Facebook/Instagram);
5. pega las dos claves y haz clic en Guardar y activar;
6. haz clic en Conectar cuenta, entra con el Facebook de quien administra las páginas y aprueba.

Mientras la app de Meta está en modo de desarrollo, solo quien tiene un rol en la app (administrador, desarrollador, evaluador) puede autorizar. Para tu propio uso, eso basta.

Google Workspace

Campos de la tarjeta: Client ID y Client Secret.

La conexión sirve para que la app use Sheets, Calendar, Drive y Gmail con una cuenta de Google.

1. en console.cloud.google.com, en el proyecto que usas (puede ser el mismo de Maps), ve a APIs y servicios → Credenciales → Crear credenciales → ID de cliente de OAuth, tipo Aplicación web;
2. activa en el proyecto las APIs que va a usar la app (por ejemplo, Google Sheets API y Google Calendar API);
3. en el editor de la app, pestaña Integraciones, categoría Productividad, abre la tarjeta Google Workspace, pega el Client ID y el Client Secret y haz clic en Guardar y activar.

⚠️ A diferencia de Shopify y Meta, la tarjeta de Google Workspace hoy no tiene el botón Conectar cuenta: guarda las claves, pero la etapa de autorizar la cuenta de Google no está disponible en ella. Si tu app depende de esta conexión, contacta con soporte antes de construir sobre ella.

No uses aquí la URL de callback del login con Google, de la pestaña Autenticación: es de otra conexión.

Cómo saber que funcionó

• después de Conectar cuenta, la ventana del proveedor muestra "¡Conectado! Puedes cerrar esta ventana." y se cierra sola;
• la tarjeta muestra "Integración activa." y el sello Conectada. Atención: el sello aparece ya al guardar las claves, antes de la autorización. Por sí solo no prueba que la cuenta se haya conectado;
• la prueba final es que la app muestre los datos: pide en el chat, por ejemplo, "lista los productos de mi tienda Shopify".

Cómo revocar el acceso

Hay dos extremos, y conviene hacer los dos:

1. en la plataforma: abre la tarjeta y haz clic en Desconectar. Las claves y el acceso autorizado se borran de aquí;
2. en el proveedor: quita la autorización de su lado, para que el acceso deje de existir por completo. En Shopify, desinstala la app en la configuración de apps de la tienda. En Facebook, quita la app en las integraciones comerciales de tu cuenta.

Problemas comunes

• La ventana del proveedor muestra un error sobre la dirección de redirección. El proveedor exige que la dirección de retorno esté registrada en la app que creaste, y esa dirección hoy no aparece en la tarjeta. Contacta con soporte para obtener la dirección de retorno de tu proyecto y regístrala en la app del proveedor;
• La ventana se cierra con "Error:" seguido de un motivo. El motivo viene del proveedor. Los más comunes: se canceló la autorización, o la clave secreta guardada no es la de la app en la que entraste;
• "completa … antes de conectar". Falta algún campo guardado. En Shopify, el Shop domain también es obligatorio;
• "shop_domain debe ser un dominio .myshopify.com válido". Usa la dirección tu-tienda.myshopify.com;
• En Meta, nadie más que yo puede autorizar. La app de Meta está en modo de desarrollo.