হেই সবাই! আমি সম্প্রতি আমার অ্যাপে Webflow OAuth সংহত করার কাজটি মোকাবেলা করেছি, এবং কোড করে না এমন কেউ হিসাবে, আমি ব্যাকএন্ড হিসাবে Xano এবং ফ্রন্টএন্ড হিসাবে Webflow ব্যবহার করে আমার পদ্ধতি শেয়ার করতে চেয়েছিলাম। আপনি যদি একজন কোডিং প্রো হন, অনুগ্রহ করে আমার সাথে সহ্য করুন—কোন পচা টমেটো নিক্ষেপ করবেন না! এটি একটি নো-কোডার থেকে অন্যটি, আপনার যাত্রাকে কিছুটা মসৃণ করার আশায়। TLDR: যারা ভিজ্যুয়াল লার্নিং পছন্দ করেন তাদের জন্য আমি একটি ভিডিওতে প্রতিটি ধাপ সংকলন করেছি, কিন্তু আপনি নীচের প্রক্রিয়াটির একটি বিস্তারিত পাঠ্য সংস্করণ পাবেন। https://youtu.be/bTUatl6eTec?embedable=true OAuth বোঝা আসুন OAuth কীভাবে কাজ করে তার মৌলিক ধারণাটি দ্রুত উপলব্ধি করি। এটির চিত্র: আপনি ছুটিতে আছেন এবং একটি বিদেশী দেশে একটি অ্যাপার্টমেন্ট ভাড়া নিতে চান৷ আপনি একটি অ্যাপার্টমেন্ট বিল্ডিং খুঁজে পাবেন যেখানে আপনি একটি ইউনিট ভাড়া নিতে পারেন। আগমনের পরে, সমস্ত ফ্ল্যাটের চাবি দেওয়ার পরিবর্তে, মালিক আপনার নির্দিষ্ট ফ্ল্যাটের কী লকবক্স অ্যাক্সেস করার জন্য আপনাকে একটি এককালীন কোড পাঠান। আপনি লকবক্স খুলতে এবং একটি কী কার্ড পুনরুদ্ধার করতে এই কোডটি ব্যবহার করেন, আপনার থাকার সময় আপনাকে অ্যাপার্টমেন্টে অ্যাক্সেস দেয়। এই সাদৃশ্যে, Webflow অ্যাপার্টমেন্টের মালিককে প্রতিনিধিত্ব করে, এককালীন কোডটি একটি অ্যাক্সেস কোড হিসাবে কাজ করে এবং কী কার্ডটি একটি অ্যাক্সেস টোকেনের সাথে সাদৃশ্যপূর্ণ। আপনার যদি কোনো ব্যবহারকারীর ওয়েবফ্লো প্রকল্প সম্পর্কে কোনো তথ্য অ্যাক্সেসের প্রয়োজন হয়—যেমন পৃষ্ঠা, সম্পদ, সংগ্রহ বা ফর্মের তালিকা—আপনার একটি অ্যাক্সেস টোকেন প্রয়োজন হবে। এই টোকেনটি ব্যবহারকারীর পক্ষ থেকে Webflow-এ পাঠানো যেকোনো API অনুরোধের সাথে ব্যবহার করা হয়। নীচের উদাহরণে, আমি একটি সাধারণ ওয়েবফ্লো অ্যাপ তৈরির প্রদর্শন করব যা আমার ডাটাবেসে অ্যাক্সেস টোকেন সংরক্ষণ না করে ব্যবহারকারীর প্রকল্প সম্পর্কে তথ্য প্রদর্শন করে (যদিও বাস্তব-বিশ্বের পরিস্থিতিতে, ব্যবহারকারীদের সাথে যুক্ত টোকেন সংরক্ষণ করার পরামর্শ দেওয়া হয়)। ধাপ 1: একটি নতুন ওয়েবফ্লো অ্যাপ তৈরি করুন আপনার ওয়েবফ্লো ড্যাশবোর্ডের "অ্যাপস এবং ইন্টিগ্রেশন" ট্যাবে নেভিগেট করুন এবং একটি নতুন অ্যাপ তৈরি করুন৷ আপনার অ্যাপের নাম, বিবরণ এবং হোম পৃষ্ঠার URL সহ সাধারণ তথ্য প্রদান করুন৷ প্রয়োজনীয় অনুমতিগুলি নির্দিষ্ট করুন—আমি আমার উদাহরণে একটি ডেটা ক্লায়েন্ট অ্যাপ ব্যবহার করব, "সাইট"-এ "পড়ুন" অ্যাক্সেস প্রদান করব। প্রয়োজনে আপনি পরে এই অনুমতিগুলি সামঞ্জস্য করতে পারেন৷ আমাদের এখানে প্রয়োজনীয় তথ্যের গুরুত্বপূর্ণ অংশ হল এবং , আপনার অ্যাপের জন্য স্বয়ংক্রিয়ভাবে তৈরি হয়। আপাতত পুনঃনির্দেশ URL ক্ষেত্রটি ফাঁকা রাখুন; আমরা পরবর্তী ধাপে এটি পুনরায় দেখব। ক্লায়েন্ট আইডি ক্লায়েন্ট সিক্রেট ধাপ 2: ফ্রন্টেন্ড হিসাবে একটি নতুন ওয়েবফ্লো প্রকল্প সেট আপ করা দুটি পৃষ্ঠা সহ একটি নতুন ওয়েবফ্লো প্রকল্প তৈরি করুন: হোম এবং সাইট৷ হোম পৃষ্ঠায়, "সাইটগুলি দেখান" লেবেলযুক্ত একটি বোতাম যুক্ত করুন যা অ্যাক্সেস কোডের জন্য ওয়েবফ্লোতে একটি অনুরোধ ট্রিগার করবে৷ পূর্বে প্রাপ্ত প্রকৃত ক্লায়েন্ট আইডির সাথে YOUR_CLIENT_ID প্রতিস্থাপন করে বোতামের URL এ সেট করুন। আপনার অ্যাপের অতিরিক্ত অনুমতির প্রয়োজন হলে ইউআরএল সামঞ্জস্য করুন। https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread- এই বোতামটি ক্লিক করলে ব্যবহারকারীর কাছে একটি অনুমতি স্ক্রীন প্রদর্শিত হবে, যা তাদের কোন প্রকল্পগুলিতে অ্যাক্সেস দিতে হবে তা চয়ন করতে দেয়৷ অ্যাপটিকে অনুমোদন করার পরে, তাদের পুনঃনির্দেশ URL-এ পুনঃনির্দেশিত করা হবে—সাইট পৃষ্ঠার URL (আপনার তৈরি করা দ্বিতীয় পৃষ্ঠা) অনুলিপি করতে এবং আপনার অ্যাপের পুনঃনির্দেশ URL ক্ষেত্রে পেস্ট করতে ভুলবেন না। এই ধাপটি সম্পূর্ণ করার পরে, "সাইটগুলি দেখান" এ ক্লিক করা ব্যবহারকারীদের সাইট পৃষ্ঠায় পুনঃনির্দেশিত করবে, ইউআরএল-এ অন্তর্ভুক্ত অ্যাক্সেস কোড সহ। ধাপ 3: একটি Xano প্রকল্প সেট আপ করা এবং প্রথম API তৈরি করা Xano-তে একটি নতুন প্রকল্প তৈরি করুন এবং APIs ট্যাবে নেভিগেট করুন। একটি নতুন API গ্রুপ যোগ করুন, এবং তারপরে সেই গোষ্ঠীর মধ্যে, একটি নতুন API এন্ডপয়েন্ট যোগ করুন - আসুন এটিকে "getToken" বলি। "getToken" এন্ডপয়েন্টে: ফ্রন্টএন্ড থেকে অ্যাক্সেস কোড পেতে "accessCode" নামে একটি টেক্সট ইনপুট যোগ করুন। বডি প্যারামিটার সহ এ একটি POST অনুরোধ করুন: https://api.webflow.com/oauth/access_token- client_id: আপনার ক্লায়েন্ট আইডি ক্লায়েন্ট_সিক্রেট: আপনার ক্লায়েন্ট সিক্রেট অনুদান_প্রকার: অনুমোদন_কোড কোড: অ্যাক্সেসকোড (ইনপুট থেকে ভেরিয়েবল ব্যবহার করে) প্রথম API অনুরোধের আউটপুটটিকে "accessToken" হিসাবে সংজ্ঞায়িত করুন যা ব্যবহারকারীর সাথে যুক্ত অ্যাক্সেস টোকেন হবে। ব্যবহারকারীর সাইট তালিকা পুনরুদ্ধার করার জন্য একটি দ্বিতীয় API অনুরোধ করুন (প্রদর্শনের উদ্দেশ্যে) - এ একটি GET অনুরোধ। নিম্নলিখিত শিরোনাম অন্তর্ভুক্ত করুন: https://api.webflow.com/v2/sites- গ্রহণ করুন: অ্যাপ্লিকেশন/জসন অনুমোদন: accessToken.response.result.access_token দ্বিতীয় API-এর আউটপুটটিকে "সাইটলিস্ট" হিসাবে সংজ্ঞায়িত করুন, যা ওয়েবফ্লো প্রকল্পগুলির তালিকাকে উপস্থাপন করে৷ প্রতিক্রিয়ায় "সাইটলিস্ট" ফেরত দিন। পরবর্তীতে ব্যবহারের জন্য API এন্ডপয়েন্ট URL কপি করুন। ধাপ 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(); }); এবং সেখানে আপনি এটা আছে! আমি আশা করি এই গাইড আমার সহকর্মী নো-কোডারদের জন্য সহায়ক প্রমাণিত হবে! আপনার কোন প্রশ্ন থাকলে বা আরও স্পষ্টীকরণের প্রয়োজন হলে নির্দ্বিধায় যোগাযোগ করুন। শুভ কোডিং!
