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

Σύνδεση στο https://dash.cloudflare.com/
Μπαίνουμε στο application security > turnstile
Κάνουμε click add widget
Προσθέτουμε hostnames
Αποθηκεύουμε το widget και κρατάμε το public/private key που μας δινει γιατι θα τα χρησιμοποιήσουμε αργότερα

<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 (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 render = () => {
            const el = document.getElementById("cf-turnstile");

            window.turnstileWidgetId = turnstile.render(el, {
              sitekey: "PUBLIC_KEY",
              // If you want to use ONLY your own "Είσοδος" button, keep this invisible.
              size: "invisible",
              callback: function (token) {
                window.turnstileToken = token || "";
                window.setSignInDisabled(false);
                window.turnstileAutoSubmit = false;
                document.getElementById("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", () => {
            event.preventDefault();

            let fields = {
              $email: document.getElementById("email"),
              $password: document.getElementById("password"),
            };
      
            const turnstileToken =
              window.turnstileToken ||
              (window.turnstileWidgetId !== null && typeof turnstile !== "undefined"
                ? turnstile.getResponse(window.turnstileWidgetId)
                : "");
      
            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("/api.php?op=signIn", {
              email: fields.$email.value,
              password: fields.$password.value,
              turnstileToken: turnstileToken,
              "cf-turnstile-response": turnstileToken,
            })
        });
    </script>
</body>

Βάζουμε στο script πάνω και όταν κάνουμε send έχουμε πλέον το token που θα σταλθεί στο backend
Στο backend μετά κάνουμε το παρακάτω για επιβεβαίωση οτι έιναι οκ να προχωρήσουμε

$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";
}

Μερικές επιπλέον επεξηγήσεις για το παραπάνω. Κάνουμε οπω ειναι copy paste αυτο το κομματι

let widgetId;

        // Cloudflare Turnstile (global callback referenced by the API script URL)
        window.turnstileWidgetId = null;
        window.turnstileToken = "";
        window.turnstileAutoSubmit = false;
  
        window.setSignInDisabled = function (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 render = () => {
            const el = document.getElementById("cf-turnstile");

            window.turnstileWidgetId = turnstile.render(el, {
              sitekey: "PUBLIC_KEY",
              // If you want to use ONLY your own "Είσοδος" button, keep this invisible.
              size: "invisible",
              callback: function (token) {
                window.turnstileToken = token || "";
                window.setSignInDisabled(false);
                window.turnstileAutoSubmit = false;
                document.getElementById("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("sign-in") να δειχνει το κουμπι συνδεσης. και έπειτα παίρνουμε οπως ειναι αυτο το κομματι πριν το request συνδεσης:

const turnstileToken =
  window.turnstileToken ||
  (window.turnstileWidgetId !== null && typeof turnstile !== "undefined"
    ? turnstile.getResponse(window.turnstileWidgetId)
    : "");

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);

Και απλα συμπεριλαμβανουμε στην αποστολη μετα το

turnstileToken