问题：

从Google实现新的不可见的reCaptcha

阎星华

2023-03-14

我正在建立一个PHP网站，我想把验证码放在登录表单上。我使用了Google新的隐形reCaptcha，但在实现它时遇到了麻烦（HTML部分，PHP正在工作）。

我现在得到的“普通”reCaptcha的代码如下（根据Google reCaptcha的说明，这是有效的）：

<form action=test.php method="POST">
   <input type="text" name="email" placeholder="Email">
   <input type="password" name="password" placeholder="Password">

   <!-- <Google reCaptcha> -->
   <div class="g-recaptcha" data-sitekey="<sitekey>"></div>
   <!-- </Google reCaptcha> -->

   <input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>

当我注册时，确认邮件中发送了一些指示（大约花了24小时才得到确认）。也就是说：

隐形reCAPTCHA集成

请确保您的站点密钥已被列入TCHA的白名单。

要启用隐形reCAPTCHA，而不是将参数放在div中，您可以直接将它们添加到html按钮中。

3a. data-回调=""。这就像复选框验证码一样工作，但是对于不可见是必需的。

3b。数据徽章：这允许您重新定位reCAPTCHA徽章（即徽标和“受reCAPTCHA保护”文本）。有效选项为“bottomright”（默认值）、“bottomleft”或“inline”，可将徽章直接置于按钮上方。如果将徽章内联，则可以直接控制徽章的CSS。

验证用户的响应是否没有更改。

我遇到的问题是超文本标记语言实现（因此我需要步骤3的帮助。其余的我有正常的reCaptcha工作，根据说明，它应该是同样的事情。我不明白什么是数据回调和数据徽章以及它是如何工作的。如何实现不可见的reCaptcha与我的表单是如何设置的代码示例将是伟大的！

共有3个答案

郎诚

2023-03-14

下面是如何实现客户端-服务器端（php）TCHA功能：

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reCaptcha</title>

    <!--api link-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!--call back function-->
    <script>
        function onSubmit(token) {
            document.getElementById('reCaptchaForm').submit();
        }
    </script>
</head>
<body>
<div class="container">
    <form id="reCaptchaForm" action="signup.php" method="POST">
        <input type="text" placeholder="type anything">
        <!--Invisible reCaptcha configuration-->
        <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
        <br/>
    </form>
</div>
</body>
</html>

服务器端验证：创建signup.php文件

<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = '<your secret key>';
    $response = $_POST['g-recaptcha-response'];     
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
    $result = json_decode($reCaptchaValidationUrl, TRUE);

    //get response along side with all results
    print_r($result);

    if($result['success'] == 1) {
        //True - What happens when user is verified
        $userMessage = '<div>Success: you\'ve made it :)</div>';
    } else {
        //False - What happens when user is not verified
        $userMessage = '<div>Fail: please try again :(</div>';
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reCAPTCHA Response</title>
    </head>
    <body>
        <?php
            if(!empty($userMessage)) {
                echo $userMessage;
            }
        ?>
    </body>
</html>

宋嘉禧

2023-03-14

如果您正在寻找一个完全可定制的通用解决方案，它甚至可以在同一页面上处理多个表单，那么我将通过使用render=explicit和onload=affunctionalcallback参数显式呈现reCaptcha小部件。

下面是一个简单的例子：

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
    <input type="text" name="first-name-1"> <br />
    <input type="text" name="last-name-1"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<br /><br />

<form action="" method="post">
    <input type="text" name="first-name-2"> <br />
    <input type="text" name="last-name-2"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<script type="text/javascript">

  var renderGoogleInvisibleRecaptcha = function() {
    for (var i = 0; i < document.forms.length; ++i) {
      var form = document.forms[i];
      var holder = form.querySelector('.recaptcha-holder');
      if (null === holder){
        continue;
      }

      (function(frm){

        var holderId = grecaptcha.render(holder,{
          'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
          'size': 'invisible',
          'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
          'callback' : function (recaptchaToken) {
            HTMLFormElement.prototype.submit.call(frm);
          }
        });

        frm.onsubmit = function (evt){
          evt.preventDefault();
          grecaptcha.execute(holderId);
        };

      })(form);
    }
  };


</script>

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

</body>
</html>

司空瑾瑜

2023-03-14

实现Google新的隐形reCAPTCHA与我们将v2添加到站点的方式非常相似。您可以像普通一样将其添加为自己的容器，也可以使用新方法将其添加到表单提交按钮。我希望这本指南能帮助你走上正确的道路。

实施recaptcha需要做几件事：

- Sitekey
- Class
- Callback
- Bind

这将是你的最终目标。

<div class="g-recaptcha" data-sitekey="<sitekey>" 
   data-bind="recaptcha-submit" data-callback="submitForm"> 
</div>

使用standalone方法时，必须将数据绑定设置为submit按钮的ID。如果您没有此设置，您的验证码将不可见。

还必须使用回调来提交表单。不可见的验证码将取消提交按钮中的所有事件，因此您需要回调来实际传递提交。

<script>
function submitForm() {
    var form = document.getElementById("ContactForm");
    if (validate_form(form)) {
        form.submit();
    } else {
        grecaptcha.reset();
    }
}
</script>

请注意，在示例回调中还存在自定义表单验证。当验证失败时，重置reCAPTCHA非常重要，否则在验证码过期之前，您将无法重新提交表单。

这与上面的独立验证码基本相同，但是没有容器，所有内容都放在提交按钮上。

这将是你的目标。

<button class="g-recaptcha" data-sitekey="<sitekey>" 
   data-callback="submitForm" data-badge="inline" type="submit">
  Submit</button>

这里有新东西，数据徽章。这是一个插入DOM的div，其中包含reCAPTCHA运行所需的输入。它有三个可能的值：左下角、右下角、内联。内联将使它显示在提交按钮的正上方，并允许您控制您希望它的样式。

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>

    <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>

或者

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>

我希望这能帮助你和未来的程序员。随着技术的发展，我会不断更新。

类似资料：

带AngularJS的不可见Google reCaptcha

我正在尝试在我的AngularJS web应用程序中实现不可见的reCAPTCHA。根据他们的文档，我应该在登录表单的提交按钮中添加一个名为“数据回调”的属性。但是，我使用ng click将http请求的函数附加到按钮。那么我应该在“数据回调”属性的值中输入什么呢？另外，我如何知道recaptcha结果是否成功，并获取g-recaptcha-response以使用http请求发送到服务器？ htt
不可见的google Recaptcha和ajax表单

在文档中，它假定表单是普通表单，而不是Ajax。到底应该如何将不可见的reCaptcha集成到我的ajax表单中？例如：特别是，我应该为“数据回调”处理程序指定什么？同样，在文档中，it data-callback提交了一个表单，但是是一个普通的表单，而我的表单是Ajax。我需要“数据回调”吗？我不应该在处理程序中调用recaptcha吗？怎么做？有“render”、“getresponse”
新Google Play隐私政策中的包可见性

我读到了关于Google play新隐私政策的链接。但我不明白。我可以保留下面的行而不向AndroidManifest.xml添加权限，并获得一个设备应用程序的过滤列表吗？我可以保留这一行而不添加权限到androidmanifest.xml，并设置条件在设备上安装android 10及以下版本的应用程序吗？这两个都没有添加任何东西到我的Google Play商店隐私政策。
新建ReCaptcha（不可见）不工作

我正在尝试实现新的不可见的reCaptcha，但它不起作用。首先，事件困难我已经用“隐形”选项创建了一个新的键，在我的应用程序中更改了键，当我在控制台中查看时，我可以看到这个请求：根据医生的说法是对的... 第二，我选择将验证码放在一个div中（根据文档这是可以的）：这是一个验证码解决方案，但不是不可见的解决方案，因为它仍然显示框。我知道我也必须使用execute函数，但由于我仍然看到框，我
定义使imageView可见和不可见的keyPreference

我有三个活动，每个都有一个按钮。Act1与btn1，Act2与btn2，Act3与btn3。我有另一个活动作为主活动，有三个图像视图：ImageView1、imageView2和imageView3，所有这些最初都是不可见的。我希望这样，当我在act1中单击btn1时，MainActivity中的imageView1将可见，而当再次单击btn1，ImageView 1将再次不可见。与imageVi
从Google map可见部分检索距离

我想用在地图上画一个静态圆圈。当用户掐时，地图会放大/缩小。我需要知道地图半径（与圆圈包含的面积相关），并相应地更改底部的seekbar。有没有人知道一个解决方案，如何检索从左到右屏幕边缘的距离？我在谷歌地图API文档中没有找到任何东西。类似于这样：

从Google实现新的不可见的reCaptcha

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档