Question

我在网页上将Ajse（Javascript / PHP）格式添加到了Google隐形重访中（请参阅下面客户端的html + js）。一切正常，但谷歌隐形Recaptcha经常在网页加载和表单提交时启动图像挑战。

这非常令人讨厌，因为包含此提交表单的页面是该网站的主页（实际上它是一个关联的请愿签名网站）。

这导致用户甚至在从网站获取主要信息并决定签署请愿书之前就能看到图像质询的问题。这是一种糟糕的用户体验。

有没有办法防止这种行为。以这样的方式配置Google Recaptcha在用户点击提交按钮之前没有挑战性吗？

非常感谢你的宝贵帮助：o）！

劳伦

Javascript代码：

    window.onScriptLoad = function () {

        var htmlEl = document.querySelector('.g-recaptcha');

        var captchaOptions = {

          'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
          'size': 'invisible',
          'badge': 'inline',
          callback: window.onUserVerified

         };

        var inheritFromDataAttr = true;

        recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

        console.log('recaptchaId=', recaptchaId);

        window.grecaptcha.execute(recaptchaId);

    };

    window.onUserVerified = function (token) {

        console.log('token=', token);

    };


    function onSubmitBtnClick () {

      var token = window.grecaptcha.getResponse(recaptchaId);

      console.log('token=', token);

      if (!token) {

         window.grecaptcha.execute(recaptchaId);
         return;

      }


      $.ajax({

            url: 'process.php',
            type: 'post',
            dataType: 'json',
            data : {

                'lastname'   : $("#lastnameField").val(),
                'firstname'  : $("#firstnameField").val(),
                'city'       : $("#cityField").val(),
                'postalCode' : $("#postalcodeField").val(),
                'g-recaptcha-response' : token

            },

            success:function(data) {

                // informs user that form has been submitted
                // and processed

                },

            error: function(xhr, textStatus, error){

                  console.log(xhr.statusText);
                  console.log(textStatus);
                  console.log(error);
            }

       });

HTML code：

<html>

  <head>

    <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>    

    <script type="text/javascript" src="js/petition.js"></script>

    ...

  </head>

  <body>

     <form id="petitionForm" onsubmit="return false;">

         <input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
         <input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
         <input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
         <input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
         ....

         <input type="submit" name="login" class="g-2" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx" id="signButton" data-callback='' value="Signer" onclick="onSubmitBtnClick();">

         <div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>

       </form>

       ...

  </body>
</html>

Answer 1

对于onScriptLoad函数，我必须删除

using System.Text.RegularExpressions;

int CursorWas;
string WhatItWas;

private void textBox1_Enter(object sender, EventArgs e)
    {
        WhatItWas = textBox1.Text;
    }

private void textBox1_TextChanged(object sender, EventArgs e)
    {
        if (Regex.IsMatch(textBox1.Text, "^[a-zA-Z ]*$"))
        {
            WhatItWas = textBox1.Text;
        }
        else
        {
            CursorWas = textBox1.SelectionStart == 0 ? 0 : textBox1.SelectionStart - 1;
            textBox1.Text = WhatItWas;
            textBox1.SelectionStart = CursorWas;
        }
    }

我想这会执行recaptcha onload

Invisble ReCaptcha：在提交表单之前防止图像质疑

1 个答案: