增加Cloudflare Turnstile 验证码支持

gitiy1 commented 1 year ago

Turnstile是cloudflare新推出的验证码服务，无需视觉拼图即可确认访问者为真实人类，为网站访问者提供更好的体验 Website: https://www.cloudflare.com/zh-cn/products/turnstile/

hibobmaster commented 1 year ago

其实目前是可以使用cloudflare turnstile的，prov使用reCAPTCHAv2/reCAPTCHAv3 https://docs.addesp.com/ngx_waf/advance/directive.html#waf-captcha 把里面的 api 填写为 https://challenges.cloudflare.com/turnstile/v0/siteverify 再把html模板里的脚本改为cf提供的配置即可，我测试下面的配置是okay的参考: https://developers.cloudflare.com/turnstile/get-started/migrating-from-recaptcha/ captcha-v2-turnstile.html

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Please complete the captcha</title>
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  <style type="text/css">
    div {
      text-align: left;
    }
  </style>
  <script>
    function onSubmit(token) {
      let reqBody = "g-recaptcha-response=" + token;
      let httpRequest = new XMLHttpRequest();
      httpRequest.open("POST", "/captcha");
      httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      httpRequest.send(reqBody);
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let text = httpRequest.responseText;
          switch (text) {
            case "good":
              window.location.reload();
              break;
            case "bad":
              alert("Bad CAPTCHA, please refresh the page and try again.\n"
                  + "您未能通过人机验证，请刷新页面后重试。");
              break;
            default:
              alert("Unexpected error occurred, please refresh the page and try again.\n"
                  + "发生了意料之外的错误，请刷新页面后重试。");
          }
        }
      }
    }
  </script>
</head>

<body>
  <h1>Please complete the captcha.</h1>
  <h1>请完成验证码</h1>
  <div class="cf-turnstile" data-sitekey="xxxxxxxxxxxxxxxxxx" data-callback='onSubmit'></div>
  </div>
</body>

</html>

captcha-v3-turnstile.html

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Please complete the captcha</title>
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?compat=recaptcha" async defer></script>
  <style type="text/css">
    div {
      text-align: center;
    }
  </style>
  <script>
    function onSubmit(token) {
      let reqBody = "g-recaptcha-response=" + token;
      let httpRequest = new XMLHttpRequest();
      httpRequest.open("POST", "/captcha");
      httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      httpRequest.send(reqBody);
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let text = httpRequest.responseText;
          switch (text) {
            case "good":
              window.location.reload();
              break;
            case "bad":
              alert("Bad CAPTCHA, please refresh the page and try again.\n"
                  + "您未能通过人机验证，请刷新页面后重试。");
              break;
            default:
              alert("Unexpected error occurred, please refresh the page and try again.\n"
                  + "发生了意料之外的错误，请刷新页面后重试。");
          }
        }
      }
    }
  </script>
</head>

<body>
  <h1>Please complete the captcha.</h1>
  <h1>请完成验证码</h1>
  <div>
    <button class="g-recaptcha" data-sitekey="xxxxxxxxxxx"
    data-callback='onSubmit' style="font-size:25px" data-action='submit'>CLICK ME （点击此处）</button>
  </div>
</body>

</html>

gitiy1 commented 1 year ago

十分感谢！希望项目越做越好！

ADD-SP / ngx_waf

增加Cloudflare Turnstile 验证码支持 #115