Kodsuz Webflow OAuth: Xano Kullanarak Webflow API'sine Kimliği Doğrulanmış İstekler Yapın

Selam millet!

Yakın zamanda Webflow OAuth'u uygulamama entegre etme görevini üstlendim ve kodlama bilmeyen biri olarak Xano'yu arka uç olarak ve Webflow'u ön uç olarak kullanarak yaklaşımımı paylaşmak istedim. Eğer kodlama uzmanıysanız lütfen sabırlı olun; çürük domatesleri atmayın! Bu, yolculuğunuzu biraz daha kolaylaştırmayı umarak kodlayıcı olmayanlar arasında bir geçiştir.

TLDR: Görsel öğrenmeyi tercih edenler için her adımı bir videoda derledim, ancak aşağıda sürecin ayrıntılı metin versiyonunu bulacaksınız.

OAuth'u Anlamak

OAuth'un nasıl çalıştığına ilişkin temel konsepti hızlıca kavrayalım. Şunu hayal edin: tatildesiniz ve yabancı bir ülkede bir daire kiralamak istiyorsunuz. Birim kiralayabileceğiniz bir apartman bulacaksınız. Varışta, tüm dairelerin anahtarlarını vermek yerine, mülk sahibi size dairenizin anahtar kilit kutusuna erişmeniz için tek seferlik bir kod gönderecektir.

Bu kodu kilitli kutuyu açmak ve kaldığınız süre boyunca daireye erişmenizi sağlayacak anahtar kartı almak için kullanırsınız.

Bu benzetmede Webflow daire sahibini temsil eder, tek kullanımlık kod erişim kodu görevi görür ve anahtar kartı da erişim belirtecine benzer.

Bir kullanıcının Web Akışı projeleri hakkındaki sayfa listeleri, varlıklar, koleksiyonlar veya formlar gibi herhangi bir bilgiye erişmeniz gerekiyorsa bir erişim belirtecine ihtiyacınız olacaktır. Bu belirteç, kullanıcı adına Webflow'a gönderilen tüm API isteklerinde kullanılır.

Aşağıdaki örnekte, erişim belirtecini veritabanımda saklamadan kullanıcının projesi hakkındaki bilgileri görüntüleyen basit bir Web akışı uygulaması oluşturmayı göstereceğim (ancak gerçek dünya senaryolarında kullanıcılarla ilişkili belirteçlerin saklanması tavsiye edilir).

1. Adım: Yeni bir Webflow Uygulaması Oluşturun

Webflow kontrol panelinizin "Uygulamalar ve Entegrasyonlar" sekmesine gidin ve yeni bir uygulama oluşturun. Uygulamanızın adı, açıklaması ve ana sayfa URL'si de dahil olmak üzere uygulamanız hakkında genel bilgiler sağlayın. Gerekli izinleri belirtin: Örneğimde "Siteler"e "Okuma" erişimi veren bir veri istemcisi uygulaması kullanacağım. Gerekirse bu izinleri daha sonra ayarlayabilirsiniz.

Burada ihtiyacımız olan önemli bilgiler, uygulamanız için otomatik olarak oluşturulan Müşteri Kimliği ve Müşteri Sırrı'dır . Yönlendirme URL'si alanını şimdilik boş bırakın; bir sonraki adımda tekrar ele alacağız.

Adım 2: Yeni Bir Web Akışı Projesini Ön Uç Olarak Ayarlama

İki sayfalı yeni bir Web akışı projesi oluşturun: Ana Sayfa ve Siteler. Ana sayfada, Webflow'a erişim kodu isteğini tetikleyecek "Siteleri Göster" etiketli bir düğme ekleyin.

Düğmenin URL'sini https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread olarak ayarlayın ve YOUR_CLIENT_ID'yi daha önce elde edilen gerçek Müşteri Kimliğiyle değiştirin. Uygulamanız ek izinler gerektiriyorsa URL'yi ayarlayın.

Bu düğmeye tıklamak, kullanıcıya hangi projelere erişim izni vereceğini seçmesine olanak tanıyan bir izinler ekranı görüntüler. Uygulamayı yetkilendirdikten sonra Yönlendirme URL'sine yönlendirileceklerdir; Siteler sayfasının (oluşturduğunuz ikinci sayfa) URL'sini kopyalayıp uygulamanızın Yönlendirme URL'si alanına yapıştırmayı unutmayın.

Bu adım tamamlandıktan sonra, "Siteleri Göster" seçeneğinin tıklanması, kullanıcıları URL'de erişim kodunun bulunduğu Siteler sayfasına yönlendirecektir.

Adım 3: Xano Projesi Kurma ve İlk API'yi Oluşturma

Xano'da yeni bir proje oluşturun ve API'ler sekmesine gidin. Yeni bir API Grubu ekleyin ve ardından bu grubun içine yeni bir API Uç Noktası ekleyin; buna "getToken" adını verelim.

"getToken" uç noktasında:

1. Erişim kodunu ön uçtan almak için "accessCode" adlı bir metin girişi ekleyin.

   
   

2. https://api.webflow.com/oauth/access_token adresine gövde parametreleriyle bir POST isteği yapın:

   • client_id: Müşteri Kimliğiniz

   • client_secret: Müşteri Sırrınız

   • hibe_türü: yetkilendirme_kodu

   • kod: erişimCode (girişteki değişkeni kullanarak)

     
     

   • 

   
   

3. İlk API isteğinin çıktısını, kullanıcıyla ilişkili erişim belirteci olacak "accessToken" olarak tanımlayın.

   
   

4. Kullanıcının site listesini almak için ikinci bir API isteğinde bulunun (gösterim amacıyla) ( https://api.webflow.com/v2/sites adresine bir GET isteği). Aşağıdaki başlıkları ekleyin:

   • kabul et: uygulama/json

   • yetkilendirme: erişimToken.response.result.access_token

     
     

   • 

   
   

5. İkinci API'nin çıktısını, Web akışı projelerinin listesini temsil eden "siteList" olarak tanımlayın.

   
   

6. Yanıttaki "siteList"i döndürün.

   
   

7. Daha sonra kullanmak üzere API uç noktası URL'sini kopyalayın.

Adım 4: Web Akışı Projenizden Bir Ön Uç İsteğini Yapılandırma

Webflow projesine dönün ve kullanıcıların Webflow projelerine erişim verdikten sonra yönlendirildikleri sayfa olan Siteler sayfasını açın. Burada, </body> etiketinin önündeki özel kod alanına aşağıdaki JavaScript işlevlerini ekleyin.

Öncelikle siteleri almak için getSites() fonksiyonunu yaratalım:

 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)); }

Ardından, alınan siteleri görüntülemek için showSites() işlevini oluşturalım:

 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); }); }

Son olarak sayfa yüklendiğinde getSites() işlevinin çalıştığından emin olun:

 document.addEventListener('DOMContentLoaded', function() { getSites(); });

İşte buyur! Umarım bu kılavuz kodlayıcı olmayan arkadaşlarım için faydalı olur!

Herhangi bir sorunuz varsa veya daha fazla açıklamaya ihtiyacınız varsa bizimle iletişime geçmekten çekinmeyin. Mutlu kodlama!