सुनिये सब लोग! मैंने हाल ही में वेबफ़्लो OAuth को अपने ऐप में एकीकृत करने का कार्य निपटाया है, और एक ऐसे व्यक्ति के रूप में जो कोड नहीं करता है, मैं Xano को बैकएंड के रूप में और वेबफ़्लो को फ्रंटएंड के रूप में उपयोग करके अपना दृष्टिकोण साझा करना चाहता था। यदि आप कोडिंग में माहिर हैं, तो कृपया मेरी बात मानें—सड़े हुए टमाटर न फेंकें! यह एक से दूसरे को नो-कोडर है, उम्मीद है कि आपकी यात्रा थोड़ी आसान हो जाएगी। टीएलडीआर: मैंने उन लोगों के लिए हर चरण को एक वीडियो में संकलित किया है जो दृश्य सीखना पसंद करते हैं, लेकिन आपको नीचे प्रक्रिया का एक विस्तृत पाठ संस्करण मिलेगा। https://youtu.be/bTUatl6eTec?embedable=true OAuth को समझना आइए OAuth कैसे संचालित होता है इसकी मूल अवधारणा को शीघ्रता से समझें। इसे चित्रित करें: आप छुट्टियों पर हैं और किसी विदेशी देश में एक अपार्टमेंट किराए पर लेना चाहते हैं। आपको एक अपार्टमेंट बिल्डिंग मिलती है जहां आप एक यूनिट किराए पर ले सकते हैं। आगमन पर, सभी फ्लैटों की चाबियाँ दिए जाने के बजाय, मालिक आपको आपके विशिष्ट फ्लैट की चाबी लॉकबॉक्स तक पहुंचने के लिए एक बार कोड भेजता है। आप इस कोड का उपयोग लॉकबॉक्स खोलने और कुंजी कार्ड प्राप्त करने के लिए करते हैं, जिससे आपको अपने प्रवास के दौरान अपार्टमेंट तक पहुंच मिलती है। इस सादृश्य में, वेबफ़्लो अपार्टमेंट के मालिक का प्रतिनिधित्व करता है, एक बार का कोड एक एक्सेस कोड के रूप में कार्य करता है, और कुंजी कार्ड एक एक्सेस टोकन के समान होता है। यदि आपको किसी उपयोगकर्ता के वेबफ्लो प्रोजेक्ट्स के बारे में किसी भी जानकारी तक पहुंच की आवश्यकता है - जैसे पृष्ठों, परिसंपत्तियों, संग्रहों या प्रपत्रों की सूची - तो आपको एक्सेस टोकन की आवश्यकता होगी। इस टोकन का उपयोग उपयोगकर्ता की ओर से वेबफ्लो को भेजे गए किसी भी एपीआई अनुरोध के साथ किया जाता है। नीचे दिए गए उदाहरण में, मैं एक सरल वेबफ्लो ऐप का निर्माण प्रदर्शित करूंगा जो मेरे डेटाबेस में एक्सेस टोकन को संग्रहीत किए बिना उपयोगकर्ता के प्रोजेक्ट के बारे में जानकारी प्रदर्शित करता है (हालांकि वास्तविक दुनिया के परिदृश्यों में, उपयोगकर्ताओं से जुड़े टोकन को संग्रहीत करना उचित है)। चरण 1: एक नया वेबफ्लो ऐप बनाएं अपने वेबफ़्लो डैशबोर्ड के "ऐप्स और एकीकरण" टैब पर नेविगेट करें और एक नया ऐप बनाएं। अपने ऐप के बारे में सामान्य जानकारी प्रदान करें, जिसमें उसका नाम, विवरण और होम पेज यूआरएल शामिल है। आवश्यक अनुमतियाँ निर्दिष्ट करें—मैं अपने उदाहरण में एक डेटा क्लाइंट ऐप का उपयोग करूंगा, जो "साइट्स" तक "पढ़ें" पहुंच प्रदान करेगा। यदि आवश्यक हो तो आप बाद में इन अनुमतियों को समायोजित कर सकते हैं। यहां हमें जिन महत्वपूर्ण सूचनाओं की आवश्यकता है, वे हैं और , जो आपके ऐप के लिए स्वचालित रूप से उत्पन्न होते हैं। रीडायरेक्ट यूआरएल फ़ील्ड को अभी खाली छोड़ दें; हम अगले चरण में इस पर दोबारा गौर करेंगे। क्लाइंट आईडी क्लाइंट सीक्रेट चरण 2: फ्रंटएंड के रूप में एक नया वेबफ्लो प्रोजेक्ट स्थापित करना दो पृष्ठों वाला एक नया वेबफ्लो प्रोजेक्ट बनाएं: होम और साइट्स। होम पेज पर, "साइट दिखाएं" लेबल वाला एक बटन जोड़ें, जो एक्सेस कोड के लिए वेबफ़्लो के अनुरोध को ट्रिगर करेगा। बटन के URL को पर सेट करें, YOUR_CLIENT_ID को पहले प्राप्त वास्तविक क्लाइंट आईडी से बदल दें। यदि आपके ऐप को अतिरिक्त अनुमतियों की आवश्यकता है तो यूआरएल समायोजित करें। https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread इस बटन पर क्लिक करने से उपयोगकर्ता को एक अनुमति स्क्रीन प्रदर्शित होगी, जिससे उन्हें यह चुनने की अनुमति मिलेगी कि उन्हें किन परियोजनाओं तक पहुंच प्रदान करनी है। ऐप को अधिकृत करने पर, उन्हें रीडायरेक्ट यूआरएल पर रीडायरेक्ट कर दिया जाएगा - साइट्स पेज (आपके द्वारा बनाया गया दूसरा पेज) के यूआरएल को कॉपी करना और इसे अपने ऐप के रीडायरेक्ट यूआरएल फ़ील्ड में पेस्ट करना याद रखें। इस चरण को पूरा करने पर, "साइट दिखाएं" पर क्लिक करने से उपयोगकर्ता यूआरएल में शामिल एक्सेस कोड के साथ साइट पेज पर रीडायरेक्ट हो जाएंगे। चरण 3: एक ज़ानो प्रोजेक्ट स्थापित करना और पहला एपीआई बनाना Xano में एक नया प्रोजेक्ट बनाएं, और API टैब पर नेविगेट करें। एक नया API समूह जोड़ें, और फिर उस समूह के भीतर, एक नया API समापन बिंदु जोड़ें—चलिए इसे "getToken" कहते हैं। "गेटटोकन" समापन बिंदु में: फ्रंटएंड से एक्सेस कोड प्राप्त करने के लिए "एक्सेसकोड" नामक टेक्स्ट इनपुट जोड़ें। बॉडी पैरामीटर के साथ पर एक POST अनुरोध करें: https://api.webflow.com/oauth/access_token client_id: आपकी क्लाइंट आईडी client_secret: आपका ग्राहक रहस्य अनुदान_प्रकार: प्राधिकरण_कोड कोड: एक्सेसकोड (इनपुट से वेरिएबल का उपयोग करके) पहले एपीआई अनुरोध के आउटपुट को "एक्सेसटोकन" के रूप में परिभाषित करें, जो उपयोगकर्ता से जुड़ा एक्सेस टोकन होगा। उपयोगकर्ता की साइट सूची को पुनः प्राप्त करने के लिए दूसरा एपीआई अनुरोध (प्रदर्शन उद्देश्यों के लिए) करें - पर एक GET अनुरोध। निम्नलिखित शीर्षलेख शामिल करें: https://api.webflow.com/v2/sites स्वीकार करें: एप्लिकेशन/जेएसओएन प्राधिकरण: accessToken.response.result.access_token दूसरे एपीआई के आउटपुट को "साइटलिस्ट" के रूप में परिभाषित करें, जो वेबफ्लो परियोजनाओं की सूची का प्रतिनिधित्व करता है। प्रतिक्रिया में "साइटसूची" लौटाएँ। बाद में उपयोग के लिए एपीआई एंडपॉइंट यूआरएल की प्रतिलिपि बनाएँ। चरण 4: अपने वेबफ़्लो प्रोजेक्ट से फ्रंटएंड अनुरोध कॉन्फ़िगर करना वेबफ्लो प्रोजेक्ट पर वापस लौटें और साइट्स पेज खोलें - वह पेज जहां उपयोगकर्ताओं को उनके वेबफ्लो प्रोजेक्ट्स तक पहुंच प्रदान करने के बाद रीडायरेक्ट किया जाता है। यहां, </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(); }); आखिर तुमने इसे हासिल कर ही लिया है! मुझे आशा है कि यह मार्गदर्शिका मेरे साथी नो-कोडर्स के लिए मददगार साबित होगी! यदि आपके कोई प्रश्न हों या अधिक स्पष्टीकरण की आवश्यकता हो तो बेझिझक संपर्क करें। हैप्पी कोडिंग!
