Cara integrasi Cloudflare Turnstile (Human Check) pada website kamu

oleh

Saya buatkan panduan praktis step-by-step untuk mengintegrasikan Cloudflare Turnstile (Human Check) pada halaman login & register website kamu.
Cloudflare Turnstile ini gratis dan ringan, mirip reCAPTCHA, tapi tanpa mengganggu user experience.

📌 Langkah 1 — Daftar Cloudflare Turnstile

  1. Masuk ke Cloudflare Dashboard:
    👉 https://dash.cloudflare.com/
  2. Pilih menu Turnstile (biasanya di sidebar kiri).
  3. Klik “Create Site”.
  4. Masukkan nama domain web kamu (atau nama project kamu).
  5. Pilih:
    • Widget Mode: Managed (paling umum dipakai, otomatis mengatur challenge)
    • Callback: (optional, bisa diabaikan untuk tahap awal)
  6. Setelah itu kamu akan mendapatkan:
    • Site Key
    • Secret Key

📌 Langkah 2 — Tambahkan Widget di Halaman Login & Register

Misalnya halaman login kamu ada di: /login.html

Di form login, tambahkan kode berikut:

<form method="post" action="/login">
    <input type="text" name="username" placeholder="Username" required />
    <input type="password" name="password" placeholder="Password" required />

    <!-- Cloudflare Turnstile widget -->
    <div class="cf-turnstile" data-sitekey="SITE_KEY_KAMU"></div>

    <button type="submit">Login</button>
</form>

<!-- Load Turnstile script -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Ganti SITE_KEY_KAMU dengan Site Key yang kamu dapatkan.

Lakukan hal yang sama di halaman register.

📌 Langkah 3 — Validasi Turnstile di Server

Di sisi server (PHP/Python/Node.js/Go/dll), setelah user submit form login/register, kamu harus memverifikasi apakah human check Turnstile valid.

Contoh kode PHP

Misalnya di file login.php (atau register.php):

<?php
// Ambil token Turnstile dari form
$token = $_POST['cf-turnstile-response'];
$secret = 'SECRET_KEY_KAMU'; // dari Cloudflare

// Kirim request verifikasi ke Cloudflare
$response = file_get_contents("https://challenges.cloudflare.com/turnstile/v0/siteverify", false, stream_context_create([
    'http' => [
        'method' => 'POST',
        'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
        'content' => http_build_query([
            'secret' => $secret,
            'response' => $token,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        ]),
    ]
]));

$result = json_decode($response, true);

if ($result['success']) {
    // Lolos human check, proses login atau register
    echo "Human Verified ✅";
    // Proses login seperti biasa...
} else {
    // Gagal, kemungkinan bot atau error
    echo "Verifikasi gagal ❌";
}
?>

Kamu cukup panggil API https://challenges.cloudflare.com/turnstile/v0/siteverify
Kirim secret, response (token dari form), dan remoteip (optional tapi disarankan).

📌 Langkah 4 — Selesai

Sekarang halaman login dan register kamu sudah terlindungi dari bot, brute force, maupun spam register.

  • Tidak ada gangguan puzzle gambar seperti reCAPTCHA.
  • Tidak memperlambat user.
  • Kompatibel di desktop dan mobile.

📌 Catatan tambahan:

  • Kalau kamu pakai framework (Laravel, Node.js Express, Django, dsb), saya bisa berikan contoh kodenya sesuai kebutuhan.
  • Bisa dikombinasikan dengan CSRF token untuk keamanan ekstra.
Post Views: 42