Webflow의 애플리케이션 프로그래밍 인터페이스 소개

API(응용 프로그래밍 인터페이스)는 다양한 소프트웨어 응용 프로그램 간의 상호 작용을 촉진합니다. Webflow의 API는 외부 서비스를 연결하고, Webflow의 주요 기능을 향상시키며, 디자이너와 개발자를 위한 최첨단 솔루션을 개발하는 기능을 제공합니다. 

전문가 팁: 코딩 기술이 부족하다면 다음과 같은 도구가 있습니다. 통합적으로, 만들다또는 Zapier를 사용하면 API를 직접 처리하거나 코드를 작성할 필요 없이 Webflow를 다양한 타사 애플리케이션과 통합할 수 있습니다. 

이 튜토리얼에서는 다음 주제를 다룹니다. 

1. Webflow API의 가능한 용도 
2. API 토큰을 생성하는 단계 
3. 웹훅 만들기 

Webflow의 API 가능성 탐색 

Webflow의 API는 다양한 시나리오에 적합합니다. 

• 사이트 API — 사이트 정보 검색용 
• 페이지 API — 페이지 세부 정보 및 관련 메타데이터를 가져오는 데 사용됩니다. 
• 자산 API — Webflow의 자산 패널에서 자산을 관리하거나 폴더에 자산을 할당하거나 기존 자산을 나열합니다. 
• CMS API — CMS 컬렉션 및 컬렉션 항목에 대한 CRUD 작업용 
• 전자상거래 API — 전자상거래 제품 및 주문에 대한 CRUD 작업용 
• 사용자 계정 API — 사용자 계정 관리 
• 양식 API — 양식 구조 및 제출을 위해 양식을 외부 데이터 소스에 연결합니다. 
• 사용자 정의 코드 API — 사용자 정의 스크립트를 추가하고 처리합니다. 
• 디자이너 API — 요소, 스타일 및 구성 요소 관리를 포함하여 Designer 캔버스와 직접 상호 작용합니다. 

Webflow가 타사 애플리케이션과 통신할 수 있도록 웹후크를 설정할 수도 있습니다. Webflow API의 기능에 대해 자세히 알아보세요. 여기. 

API 토큰 생성 

Webflow의 API에 액세스하려면 인증 목적으로 다음을 통해 얻을 수 있는 액세스 토큰이 필요합니다. OAuth 또는 사이트 API 토큰을 생성하여 가능합니다. 

내부 프로젝트의 경우 사이트 API 토큰을 생성하면 프로세스를 빠르게 추적할 수 있습니다. 그러나 보다 폭넓은 용도로 사용되는 프로젝트의 경우 Webflow 앱을 사용하여 OAuth 인증 권장됩니다. 

이 섹션에서는 API 사용 시 비밀번호를 대체하기 위해 API 토큰을 생성하는 방법을 안내합니다. 비밀번호와 마찬가지로 API 토큰("API 키" 또는 "액세스 토큰"이라고도 함)은 요청 사이트 또는 애플리케이션을 식별합니다. API 토큰에는 해당 기능을 설명하고 관리하는 권한(“범위”)도 있습니다. 

메모: API 토큰은 365일 동안 활동이 없으면 만료됩니다.

API 토큰을 생성하려면: 

1. 로 이동 사이트 설정 > 앱 및 통합 탭 > API 액세스
2. 클릭 API 토큰 생성 
3. 입력 이름 귀하의 API 토큰에 대해
4. 각 Webflow API에 대해 원하는 권한을 선택합니다(액세스 없음, 읽기 전용 또는 읽기 및 쓰기 등).
5. 클릭 토큰 생성
6. 생성된 토큰을 클립보드에 복사하세요.

중요한: API 토큰에는 비밀번호와 같은 개인 정보와 민감한 정보가 포함되어 있으므로 안전하게 저장하세요. 생성된 토큰은 대시보드에서 다시 볼 수 없습니다. 손상된 토큰이 걱정되시나요? 방문하여 새로운 것을 생성하십시오. 사이트 설정 > 앱 및 통합 탭 > API 액세스를 클릭한 다음 타사 연결에서 손상된 토큰을 교체합니다. 

웹훅 설정 

웹후크는 특정 사이트 이벤트 발생 시 Webflow에서 외부 애플리케이션으로 실시간 데이터를 전송하는 역할을 합니다. 개발자 documentation에서 사용 가능한 웹훅 이벤트에 대해 자세히 알아보세요. 여기. 

웹훅을 설정하려면 다음 안내를 따르세요. 

1. 입장 사이트 설정 > 앱 및 통합 탭 > 웹훅
2. 클릭 웹훅 추가 
3. 트리거 유형을 선택합니다(예: 양식 제출, 사이트 게시 등). 
4. API 버전(예: v1 또는 v2)을 선택하세요.
5. 웹훅 URL(예: https://yourdomain.com/webhook/webflow)을 삽입하세요.