Всем привет! Недавно я решил задачу интеграции Webflow OAuth в свое приложение и, как человек, который не занимается программированием, хотел поделиться своим подходом с использованием Xano в качестве бэкэнда и Webflow в качестве внешнего интерфейса. Если вы профессионал в программировании, пожалуйста, будьте терпеливы — не бросайте гнилые помидоры! Это один не-кодировщик другому, в надежде немного облегчить ваше путешествие. TLDR: Я собрал каждый шаг в видео для тех, кто предпочитает визуальное обучение, но подробную текстовую версию процесса вы найдете ниже. https://youtu.be/bTUatl6eTec?embedable=true Понимание OAuth Давайте быстро разберемся с фундаментальной концепцией работы OAuth. Представьте себе: вы находитесь в отпуске и хотите снять квартиру в чужой стране. Вы находите многоквартирный дом, где можете арендовать квартиру. По прибытии, вместо того, чтобы получить ключи от всех квартир, владелец отправляет вам одноразовый код для доступа к сейфу с ключами вашей конкретной квартиры. Вы используете этот код, чтобы открыть сейф и получить ключ-карту, предоставляющую вам доступ в квартиру во время вашего пребывания. В этой аналогии Webflow представляет владельца квартиры, одноразовый код служит кодом доступа, а ключ-карта — аналогом токена доступа. Если вам нужен доступ к какой-либо информации о проектах Webflow пользователя, например к спискам страниц, ресурсам, коллекциям или формам, вам потребуется токен доступа. Этот токен используется с любыми запросами API, отправляемыми в Webflow от имени пользователя. В приведенном ниже примере я продемонстрирую создание простого приложения Webflow, которое отображает информацию о проекте пользователя без сохранения токена доступа в моей базе данных (хотя в реальных сценариях рекомендуется хранить токены, связанные с пользователями). Шаг 1. Создайте новое приложение Webflow Перейдите на вкладку «Приложения и интеграции» панели управления Webflow и создайте новое приложение. Предоставьте общую информацию о вашем приложении, включая его название, описание и URL-адрес домашней страницы. Укажите необходимые разрешения. В моем примере я буду использовать клиентское приложение для обработки данных, предоставляющее доступ «Чтение» к «Сайтам». При необходимости вы можете настроить эти разрешения позже. Важнейшая информация, которая нам здесь понадобится, — это и , автоматически сгенерированные для вашего приложения. Оставьте поле URL-адрес перенаправления пустым; мы вернемся к этому на следующем этапе. идентификатор клиента секрет клиента Шаг 2. Настройка нового проекта Webflow в качестве внешнего интерфейса Создайте новый проект Webflow с двумя страницами: «Домой» и «Сайты». На главной странице добавьте кнопку с надписью «Показать сайты», которая инициирует запрос к Webflow кода доступа. Установите URL-адрес кнопки , заменив YOUR_CLIENT_ID фактическим идентификатором клиента, полученным ранее. Измените URL-адрес, если вашему приложению требуются дополнительные разрешения. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Нажатие этой кнопки откроет пользователю экран разрешений, позволяющий ему выбрать, каким проектам предоставить доступ. После авторизации приложения они будут перенаправлены на URL-адрес перенаправления — не забудьте скопировать URL-адрес страницы «Сайты» (второй страницы, которую вы создали) и вставить его в поле «URL-адрес перенаправления» вашего приложения. После завершения этого шага нажатие «Показать сайты» перенаправит пользователей на страницу «Сайты» с кодом доступа, включенным в URL-адрес. Шаг 3. Настройка проекта Xano и создание первого API Создайте новый проект в Xano и перейдите на вкладку API. Добавьте новую группу API, а затем в эту группу добавьте новую конечную точку API — назовем ее «getToken». В конечной точке getToken: Добавьте текстовый ввод с именем «accessCode», чтобы получить код доступа из внешнего интерфейса. Отправьте POST-запрос на с параметрами тела: https://api.webflow.com/oauth/access_token client_id: ваш идентификатор клиента client_secret: ваш секрет клиента тип_гранта: код_авторизации код: accessCode (с использованием входной переменной) Определите выходные данные первого запроса API как «accessToken», который будет токеном доступа, связанным с пользователем. Сделайте второй запрос API (в демонстрационных целях) для получения списка сайтов пользователя — запрос GET к . Включите следующие заголовки: https://api.webflow.com/v2/sites принять: приложение/json авторизация: accessToken.response.result.access_token Определите выходные данные второго API как siteList, который представляет список проектов Webflow. Верните «siteList» в ответ. Скопируйте URL-адрес конечной точки API для дальнейшего использования. Шаг 4. Настройка внешнего запроса из вашего проекта Webflow Вернитесь в проект Webflow и откройте страницу «Сайты» — страницу, на которую пользователи перенаправляются после предоставления доступа к своим проектам Webflow. Здесь добавьте следующие функции JavaScript в область пользовательского кода перед тегом </body>. Сначала давайте создадим функцию для получения сайтов: 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)); } Затем давайте создадим функцию для отображения полученных сайтов: 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); }); } Наконец, убедитесь, что функция запускается при загрузке страницы: getSites() document.addEventListener('DOMContentLoaded', function() { getSites(); }); И вот оно! Я надеюсь, что это руководство окажется полезным для моих коллег, не программирующих! Не стесняйтесь обращаться, если у вас есть какие-либо вопросы или вам нужны дополнительные разъяснения. Приятного кодирования!
