¡Hola a todos! Recientemente abordé la tarea de integrar Webflow OAuth en mi aplicación y, como alguien que no codifica, quería compartir mi enfoque usando Xano como backend y Webflow como frontend. Si eres un profesional de la codificación, ten paciencia conmigo: ¡no arrojes tomates podridos! Este es un no codificador a otro, con la esperanza de facilitar un poco su viaje. TLDR: He recopilado cada paso en un video para aquellos que prefieren el aprendizaje visual, pero encontrarán una versión de texto detallada del proceso a continuación. https://youtu.be/bTUatl6eTec?embedable=true Entendiendo OAuth Captemos rápidamente el concepto fundamental de cómo funciona OAuth. Imagínate esto: estás de vacaciones y quieres alquilar un apartamento en un país extranjero. Encuentra un edificio de apartamentos donde puede alquilar una unidad. A su llegada, en lugar de recibir las llaves de todos los apartamentos, el propietario le envía un código único para acceder a la caja de seguridad de llaves de su apartamento específico. Utilice este código para abrir la caja de seguridad y recuperar una tarjeta de acceso que le permitirá acceder al apartamento durante su estancia. En esta analogía, Webflow representa al propietario del apartamento, el código de un solo uso sirve como código de acceso y la tarjeta de acceso es análoga a un token de acceso. Si necesita acceder a cualquier información sobre los proyectos de Webflow de un usuario, como listas de páginas, activos, colecciones o formularios, necesitará un token de acceso. Este token se utiliza con cualquier solicitud de API enviada a Webflow en nombre del usuario. En el siguiente ejemplo, demostraré la creación de una aplicación Webflow simple que muestra información sobre el proyecto del usuario sin almacenar el token de acceso en mi base de datos (aunque en escenarios del mundo real, es recomendable almacenar tokens asociados con los usuarios). Paso 1: cree una nueva aplicación Webflow Navegue a la pestaña "Aplicaciones e integraciones" de su panel de Webflow y cree una nueva aplicación. Proporcione información general sobre su aplicación, incluido su nombre, descripción y URL de la página de inicio. Especifique los permisos necesarios. En mi ejemplo, utilizaré una aplicación de cliente de datos que otorgará acceso de "lectura" a "Sitios". Puede ajustar estos permisos más adelante si es necesario. La información crucial que necesitamos aquí es la y , generados automáticamente para su aplicación. Deje el campo URL de redireccionamiento en blanco por ahora; Lo revisaremos en el siguiente paso. ID del cliente el secreto del cliente Paso 2: configurar un nuevo proyecto de flujo web como interfaz Cree un nuevo proyecto de Webflow con dos páginas: Inicio y Sitios. En la página de inicio, agregue un botón denominado "Mostrar sitios", que activará una solicitud a Webflow para obtener el código de acceso. Establezca la URL del botón en , reemplazando YOUR_CLIENT_ID con el ID de cliente real obtenido anteriormente. Ajuste la URL si su aplicación requiere permisos adicionales. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Al hacer clic en este botón se mostrará una pantalla de permisos al usuario, permitiéndole elegir a qué proyectos otorgar acceso. Al autorizar la aplicación, serán redirigidos a la URL de redireccionamiento; recuerde copiar la URL de la página Sitios (la segunda página que creó) y pegarla en el campo URL de redireccionamiento de su aplicación. Al completar este paso, al hacer clic en "Mostrar sitios" se redirigirá a los usuarios a la página Sitios, con el código de acceso incluido en la URL. Paso 3: configurar un proyecto Xano y crear la primera API Cree un nuevo proyecto en Xano y navegue hasta la pestaña API. Agregue un nuevo grupo de API y luego, dentro de ese grupo, agregue un nuevo punto final de API; llamémoslo "getToken". En el punto final "getToken": Agregue una entrada de texto llamada "accessCode" para recibir el código de acceso desde la interfaz. Realice una solicitud POST a con parámetros del cuerpo: https://api.webflow.com/oauth/access_token client_id: su ID de cliente client_secret: Su secreto de cliente tipo_concesión: código_autorización código: código de acceso (usando la variable de la entrada) Defina el resultado de la primera solicitud de API como "accessToken", que será el token de acceso asociado con el usuario. Realice una segunda solicitud de API (con fines de demostración) para recuperar la lista de sitios del usuario: una solicitud GET a . Incluya los siguientes encabezados: https://api.webflow.com/v2/sites aceptar: aplicación/json autorización: accessToken.response.result.access_token Defina la salida de la segunda API como "siteList", que representa la lista de proyectos de Webflow. Devuelve la "lista de sitios" en la respuesta. Copie la URL del punto final de la API para usarla más adelante. Paso 4: Configurar una solicitud de frontend desde su proyecto de flujo web Regrese al proyecto Webflow y abra la página Sitios, la página donde se redirige a los usuarios después de otorgarles acceso a sus proyectos Webflow. Aquí, agregue las siguientes funciones de JavaScript en el área de código personalizado antes de la etiqueta </body>. Primero, creemos la función para recuperar los sitios: getSites() function getSites() { const url = window.location.search; const params = new URLSearchParams(url); const accessCode = params.get('code'); const options = { method: 'POST', headers: {accept: 'application/json', 'content-type': 'application/json'}, body: JSON.stringify({accessCode: accessCode}) }; fetch('YOUR_API_ENDPOINT', options) .then(response => response.json()) .then(response => { const siteList = response.response.result.sites; showSites(siteList); }) .catch(err => console.log(err)); } Luego, creemos la función para mostrar los sitios recuperados: showSites() function showSites(sites) { const container = document.querySelector('#result'); sites.forEach(site => { const siteDiv = document.createElement('div'); siteDiv.classList.add('site'); const siteContent = `<h2>${site.displayName}</h2> <p><strong>ID:</strong> ${site.id}</p> <p><strong>Workspace ID:</strong> ${site.workspaceId}</p> <p><strong>Short Name:</strong> ${site.shortName}</p> <p><strong>Time Zone:</strong> ${site.timeZone}</p> <p><strong>Created On:</strong> ${site.createdOn}</p> <p><strong>Last Updated:</strong> ${site.lastUpdated}</p> <p><strong>Last Published:</strong> ${site.lastPublished}</p> <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); } Por último, asegúrese de que la función se ejecute al cargar la página: getSites() document.addEventListener('DOMContentLoaded', function() { getSites(); }); ¡Y ahí lo tienes! ¡Espero que esta guía resulte útil para mis compañeros no codificadores! No dude en comunicarse si tiene alguna pregunta o necesita más aclaraciones. ¡Feliz codificación!
