Goodbye reCAPTCHA: Integrating Frictionless Cloudflare Turnstile

ওয়েবসাইটের ফর্মগুলোকে স্প্যাম এবং বটের হাত থেকে রক্ষা করার জন্য এতকাল আমরা গুগল রি-ক্যাপচা (Google reCAPTCHA) ব্যবহার করে এসেছি। কিন্তু ট্রাফিক লাইট বা ট্রাফিক সাইন সিলেক্ট করার এই বিরক্তিকর প্রক্রিয়াটি ইউজার এক্সপেরিয়েন্স নষ্ট করে। এর সেরা এবং সম্পূর্ণ ফ্রি বিকল্প হলো **Cloudflare Turnstile**।

টার্নস্টাইল ব্যবহারকারীদের কোনো ধাঁধা সমাধান করতে বাধ্য না করেই পর্দার আড়ালে ব্রাউজার বিহেভিয়ার চেক করে রিয়েল-টাইম বট ডিটেক্ট করে। চলুন দেখি কীভাবে আমাদের এইচটিএমএল ফর্মে এটি যুক্ত করা যায়।

১. ফ্রন্টএন্ড উইজেট বসানো (HTML Integration)

প্রথমে ক্লাউডফ্লেয়ার ড্যাশবোর্ড থেকে Turnstile সেকশনে গিয়ে আপনার সাইটের জন্য একটি Site Key জেনারেট করে নিন। এরপর নিচের কোড স্ট্রাকচার অনুযায়ী ফর্মের ভেতর স্ক্রিপ্ট এবং ডিভ ট্যাগটি বসান:

<!-- ক্লাউডফ্লেয়ার টার্নস্টাইল স্ক্রিপ্ট ফাইল -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="/submit-form" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    
    <!-- টার্নস্টাইল উইজেট কন্টেইনার -->
    <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY_HERE" data-theme="dark"></div>

    <button type="submit">Submit Data</button>
</form>

ধাপ ২: ব্যাকএন্ড ভেরিফিকেশন লেয়ার (Node.js API Route)

ইউজার ফর্ম সাবমিট করার পর ক্লাউডফ্লেয়ার একটি টোকেন পাঠাবে। ব্যাকএন্ডে সেই টোকেনটি **Secret Key** দিয়ে ভেরিফাই করতে হবে:

app.post('/submit-form', async (req, res) => {
    const token = req.body['cf-turnstile-response'];
    const secretKey = "YOUR_SECRET_KEY_HERE";

    // ক্লাউডফ্লেয়ার এন্ডপয়েন্টে ভেরিফিকেশন রিকোয়েস্ট পাঠানো
    const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `secret=${secretKey}&response=${token}`
    });

    const outcome = await response.json();
    if (outcome.success) {
        res.send("Success! Form verified securely without any user friction.");
    } else {
        res.status(403).send("Bot validation failed. Intruders blocked.");
    }
});