Skip to main content

Αντικατάσταση Google CAPTCHA με cloudflare turnstile

  1. Σύνδεση στο https://dash.cloudflare.com/
  2. Μπαίνουμε στο application security > turnstile
  3. Κάνουμε click add widget
  4. Προσθέτουμε hostnames
  5. Αποθηκεύουμε το widget και κρατάμε το public/private key που μας δινει γιατι θα τα χρησιμοποιήσουμε αργότερα
  6. <body>
        <div id="captcha" data-size="invisible"></div>
    
        <button id="send">Send</button>
    
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstile&render=explicit" async defer></script>
    
        <script>
            let widgetId;
    
            // Cloudflare Turnstile (global callback referenced by the API script URL)
            window.turnstileWidgetId = null;
            window.turnstileToken = "";
            window.turnstileAutoSubmit = false;
      
            window.setSignInDisabled = function onloadTurnstile((disabled) {
              const btn = document.getElementById("sign-in");
              btn.disabled = !!disabled;
              btn.style.opacity = disabled ? "0.7" : "1";
              btn.style.cursor = disabled ? "not-allowed" : "pointer";
            };
      
            window.onloadTurnstile = function () {
              //const Ensuresrender the= element() exists=> BEFORE{
                renderingconst widgetIdel = document.getElementById("cf-turnstile");
    
                window.turnstileWidgetId = turnstile.render('#captcha',el, {
                  sitekey: 'YOUR_PUBLIC_KEY'"PUBLIC_KEY",
                  // If you want to use ONLY your own "Είσοδος" button, keep this invisible.
                  size: "invisible",
                  callback: function(function (token) {
                    console.log(window.turnstileToken = token || "Callback";
                    token:window.setSignInDisabled(false);
                    window.turnstileAutoSubmit = false;
                    document.getElementById(", token)sign-in")?.click();
                  },
                  "expired-callback": function () {
                    window.turnstileToken = "";
                    window.turnstileAutoSubmit = false;
                    window.setSignInDisabled(false);
                  },
                  "error-callback": function () {
                    window.turnstileToken = "";
                    window.turnstileAutoSubmit = false;
                    window.setSignInDisabled(false);
                  },
                });
              };
      
              if (document.readyState === "loading") {
                document.addEventListener("DOMContentLoaded", render);
              } else {
                render();
              }
            };
    
            document.getElementById("send").addEventListener("click", () => {
                constevent.preventDefault();
    
                tokenlet fields = {
                  $email: document.getElementById("email"),
                  $password: document.getElementById("password"),
                };
          
                const turnstileToken =
                  window.turnstileToken ||
                  (window.turnstileWidgetId !== null && typeof turnstile !== "undefined"
                    ? turnstile.getResponse(widgetId)window.turnstileWidgetId)
                    : "");
          
                console.log(if (!turnstileToken) {
                  // Disable your login button while captcha runs
                  window.setSignInDisabled(true);
                  window.turnstileAutoSubmit = true;
          
                  // For invisible Turnstile, execute it now
                  try {
                    turnstile.execute(window.turnstileWidgetId);
                  } catch (e) {
                    window.setSignInDisabled(false);
                    window.turnstileAutoSubmit = false;
                  }
                  return;
                }
          
                // Disable while the login request is in-flight (prevents double submit)
                window.setSignInDisabled(true);
      
                postData("Token on submit:"/api.php?op=signIn", token);{
                  email: fields.$email.value,
                  password: fields.$password.value,
                  turnstileToken: turnstileToken,
                  "cf-turnstile-response": turnstileToken,
                })
            });
        </script>
    </body>
  7. Βάζουμε στο script πάνω και όταν κάνουμε send έχουμε πλέον το token που θα σταλθεί στο backend
  8. Στο backend μετά κάνουμε το παρακάτω για επιβεβαίωση οτι έιναι οκ να προχωρήσουμε
  9. $token = $_POST['cf-turnstile-response'];   // <-- Token from Turnstile
    $secret = "YOUR_SECRET_KEY";
    
    $verify = curl_init("https://challenges.cloudflare.com/turnstile/v0/siteverify");
    curl_setopt($verify, CURLOPT_POST, true);
    curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($verify, CURLOPT_POSTFIELDS, [
        'secret' => $secret,
        'response' => $token
    ]);
    
    $response = json_decode(curl_exec($verify), true);
    
    if ($response["success"]) {
        echo "HUMAN VERIFIED!";
    } else {
        echo "FAILED";
    }