코드 없는 Webflow OAuth: Xano를 사용하여 Webflow API에 인증된 요청 만들기

안녕 모두들!

저는 최근에 Webflow OAuth를 내 앱에 통합하는 작업에 착수했으며, 코딩을 하지 않는 사람으로서 Xano를 백엔드로, Webflow를 프런트엔드로 사용하는 접근 방식을 공유하고 싶었습니다. 코딩 전문가라면 양해해 주시기 바랍니다. 썩은 토마토를 던지면 안 됩니다! 이것은 여러분의 여행을 조금 더 원활하게 해주기를 바라면서 다른 코딩을 하지 않는 것입니다.

TLDR: 시각적 학습을 선호하는 사람들을 위해 모든 단계를 비디오로 편집했지만 아래에서 프로세스에 대한 자세한 텍스트 버전을 찾을 수 있습니다.

OAuth 이해

OAuth가 어떻게 작동하는지에 대한 기본 개념을 빠르게 파악해 봅시다. 이것을 생각해 보십시오: 당신은 휴가 중이고 외국에서 아파트를 임대하고 싶습니다. 임대할 수 있는 아파트 건물을 찾았습니다. 도착 시 모든 아파트의 열쇠를 받는 대신 주인이 특정 아파트의 열쇠 보관함에 액세스할 수 있는 일회성 코드를 보내드립니다.

이 코드를 사용하여 보관함을 열고 키 카드를 받아 머무는 동안 아파트에 출입하실 수 있습니다.

이 비유에서 Webflow는 아파트 소유자를 나타내고 일회성 코드는 액세스 코드 역할을 하며 키 카드는 액세스 토큰과 유사합니다.

페이지 목록, 자산, 컬렉션, 양식 등 사용자의 Webflow 프로젝트에 대한 정보에 액세스해야 하는 경우 액세스 토큰이 필요합니다. 이 토큰은 사용자를 대신하여 Webflow에 전송된 모든 API 요청과 함께 사용됩니다.

아래 예에서는 데이터베이스에 액세스 토큰을 저장하지 않고 사용자 프로젝트에 대한 정보를 표시하는 간단한 Webflow 앱을 구축하는 방법을 보여 드리겠습니다(실제 시나리오에서는 사용자와 관련된 토큰을 저장하는 것이 좋습니다).

1단계: 새 Webflow 앱 만들기

Webflow 대시보드의 "앱 및 통합" 탭으로 이동하여 새 앱을 만듭니다. 이름, 설명, 홈페이지 URL 등 앱에 대한 일반 정보를 제공하세요. 필요한 권한을 지정합니다. 제 예에서는 데이터 클라이언트 앱을 사용하여 "사이트"에 "읽기" 액세스 권한을 부여하겠습니다. 필요한 경우 나중에 이러한 권한을 조정할 수 있습니다.

여기에 필요한 중요한 정보는 앱에 대해 자동으로 생성되는 클라이언트 ID 와 클라이언트 비밀번호 입니다. 지금은 리디렉션 URL 필드를 비워 두세요. 다음 단계에서 다시 살펴보겠습니다.

2단계: 새 Webflow 프로젝트를 프런트엔드로 설정

홈과 사이트라는 두 페이지로 구성된 새 Webflow 프로젝트를 만듭니다. 홈 페이지에서 "사이트 표시"라는 버튼을 추가하면 Webflow에 액세스 코드 요청이 실행됩니다.

버튼의 URL을 https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread 로 설정하고 YOUR_CLIENT_ID를 이전에 얻은 실제 클라이언트 ID로 바꿉니다. 앱에 추가 권한이 필요한 경우 URL을 조정하세요.

이 버튼을 클릭하면 사용자에게 권한 화면이 표시되어 액세스 권한을 부여할 프로젝트를 선택할 수 있습니다. 앱을 승인하면 리디렉션 URL로 리디렉션됩니다. 사이트 페이지(만든 두 번째 페이지)의 URL을 복사하여 앱의 리디렉션 URL 필드에 붙여넣어야 합니다.

이 단계를 완료한 후 "사이트 표시"를 클릭하면 사용자가 URL에 포함된 액세스 코드와 함께 사이트 페이지로 리디렉션됩니다.

3단계: Xano 프로젝트 설정 및 첫 번째 API 생성

Xano에서 새 프로젝트를 생성하고 API 탭으로 이동합니다. 새 API 그룹을 추가한 다음 해당 그룹 내에 새 API 엔드포인트를 추가합니다. 이를 "getToken"이라고 하겠습니다.

"getToken" 엔드포인트에서:

1. 프런트엔드에서 액세스 코드를 받으려면 "accessCode"라는 텍스트 입력을 추가하세요.

   
   

2. 본문 매개변수를 사용하여 https://api.webflow.com/oauth/access_token 에 대한 POST 요청을 수행합니다.

   • client_id: 귀하의 클라이언트 ID

   • client_secret: 클라이언트 비밀번호

   • grant_type: 인증_코드

   • 코드: accessCode(입력의 변수 사용)

     
     

   • 

   
   

3. 첫 번째 API 요청의 출력을 사용자와 연결된 액세스 토큰이 될 "accessToken"으로 정의합니다.

   
   

4. 사용자의 사이트 목록을 검색하기 위해 두 번째 API 요청(데모용)을 만듭니다. 즉, https://api.webflow.com/v2/sites 에 대한 GET 요청입니다. 다음 헤더를 포함합니다.

   • 수락: 애플리케이션/json

   • 인증: accessToken.response.result.access_token

     
     

   • 

   
   

5. 두 번째 API의 출력을 Webflow 프로젝트 목록을 나타내는 "siteList"로 정의합니다.

   
   

6. 응답에 "siteList"를 반환합니다.

   
   

7. 나중에 사용할 수 있도록 API 엔드포인트 URL을 복사하세요.

4단계: Webflow 프로젝트에서 프런트엔드 요청 구성

Webflow 프로젝트로 돌아가 사이트 페이지(사용자가 Webflow 프로젝트에 대한 액세스 권한을 부여한 후 리디렉션되는 페이지)를 엽니다. 여기에서 </body> 태그 앞의 사용자 정의 코드 영역에 다음 JavaScript 함수를 추가합니다.

먼저 사이트를 검색하는 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(); });

그리고 거기에 있습니다! 이 가이드가 코딩을 하지 않는 동료들에게 도움이 되기를 바랍니다!

궁금한 점이 있거나 추가 설명이 필요한 경우 언제든지 문의해 주세요. 즐거운 코딩하세요!