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. https://youtu.be/bTUatl6eTec?embedable=true 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 ve . Yönlendirme URL'si alanını şimdilik boş bırakın; bir sonraki adımda tekrar ele alacağız. Müşteri Kimliği Müşteri Sırrı'dır 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 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. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread 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: Erişim kodunu ön uçtan almak için "accessCode" adlı bir metin girişi ekleyin. adresine gövde parametreleriyle bir POST isteği yapın: https://api.webflow.com/oauth/access_token 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) İlk API isteğinin çıktısını, kullanıcıyla ilişkili erişim belirteci olacak "accessToken" olarak tanımlayın. Kullanıcının site listesini almak için ikinci bir API isteğinde bulunun (gösterim amacıyla) ( adresine bir GET isteği). Aşağıdaki başlıkları ekleyin: https://api.webflow.com/v2/sites kabul et: uygulama/json yetkilendirme: erişimToken.response.result.access_token İkinci API'nin çıktısını, Web akışı projelerinin listesini temsil eden "siteList" olarak tanımlayın. Yanıttaki "siteList"i döndürün. 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 fonksiyonunu yaratalım: 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)); } Ardından, alınan siteleri görüntülemek için işlevini oluşturalım: 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); }); } Son olarak sayfa yüklendiğinde işlevinin çalıştığından emin olun: getSites() 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!
