同一页面中多个表单上的 Google 隐形 ReCaptcha - PHP

2024-05-12

我正在我的 php 网站上关注这个 Invisible ReCaptcha 文档:http://www.pinnacleinternet.com/installing-invisible-recaptcha/ http://www.pinnacleinternet.com/installing-invisible-recaptcha/一切正常。但是,虽然在同一页面中的多个表单上实现,但验证码仅适用于第一个表单,不确定第二个表单发生了什么,我很好奇它如何在单个页面中的多个表单上工作。 或者有人建议多种表单的工作文档吗?

//this is @Geordy's javascript portion modified according to jquery.validate
    <script type="text/javascript">

    $().ready(function() {
    var demo1Call = 0;
    var demo2Call = 0;

        // validate and submit 1st form
        $("#demo-form1").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo1Call++;
                if(demo1Call==1){
                    widgetId1 = grecaptcha.render('recaptcha1', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit1,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId1);
                grecaptcha.execute(widgetId1);
            },
        });

        //validate and submit 2nd form
        $("#demo-form2").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo2Call++;
                if(demo2Call==1){
                    widgetId2 = grecaptcha.render('recaptcha2', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit2,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId2);
                grecaptcha.execute(widgetId2);
            },
        });



    });

    $.validator.addMethod("pwcheck", function(value) {
       var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%])[0-9A-Za-z!@#$%]{8,24}$/;
       return pattern.test(value);
    });

function onSubmit1(token){
        document.getElementById("demo-form1").submit();
};

function onSubmit2(token){
        document.getElementById("demo-form2").submit();
};

</script>

下面的代码对我有用

<?php
$config = require('config.php');
?>
<html>
  <head>
    <title>reCAPTCHA demo</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Boostrap Validator --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>

    <script type="text/javascript">
    $(document).ready(function(){
        var demo1Call = 0;
        var demo2Call = 0;

        $('#demo-form1').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo1Call++;

            e.preventDefault();         
            console.log("validation success");

            if(demo1Call==1)
            {
                widgetId1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit1,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId1);

            grecaptcha.execute(widgetId1);          
          }
        });

        $('#demo-form2').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo2Call++;

            e.preventDefault();
            console.log("validation success");

            if(demo2Call==1)
            {
                widgetId2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit2,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId2);

            grecaptcha.execute(widgetId2);

          }
        });

    });

    function onSubmit1(token){
            document.getElementById("demo-form1").submit();
    };

    function onSubmit2(token){
            document.getElementById("demo-form2").submit();
    };

    </script>


  </head>
  <body>
    <div class="container">
    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form1" data-toggle="validator" role="form"  action="admin.php" method="POST" >
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
                    </div>
                    <div id='recaptcha1' ></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>

    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form2" data-toggle="validator" role="form"  action="admin2.php" method="POST" >
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
                    </div>
                    <div id='recaptcha2' ></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>  
    </div>
    <script src="https://www.google.com/recaptcha/api.js" async defer ></script>
  </body>
</html>

我在此程序中使用了非官方 Google Invisible reCAPTCHA PHP 库,您可以从以下位置下载它https://github.com/geordyjames/google-Invisible-reCAPTCHA https://github.com/geordyjames/google-Invisible-reCAPTCHA。如果此方法不适合您,请在下面评论。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

同一页面中多个表单上的 Google 隐形 ReCaptcha - PHP 的相关文章

随机推荐

  • 仅使用 GRPC 连接到对话流 StreamingDetectIntent,卡在等待 responseStream.MoveNext

    我正在尝试将 DialogFlow API v2 与 Unity 结合使用 由于 Unity 还没有官方 SDK 所以我使用了 Grpc beta unity SDK 以及使用 Grpc 工具中的 Protobuf 和 protoc 创建的
  • 从底部工作表对话框片段中获取值

    我从片段A开始bottomSheetDialogFragment 我想从该bottomSheetDialogFragment中选择日期 然后将其设置在片段A中 选择日期已经完成 我只想将其获取到片段A中以在某些字段中设置它 我怎样才能得到这
  • git:如何查明某个分支是否有拉取请求?

    我在 git 分支上 有没有办法查看该分支是否有拉取请求 在这种特殊情况下 Atlassian Stash 用于管理拉取请求 当然我可以使用Stash的Web界面来搜索拉取请求 但我也可以仅使用 git 命令行工具从脚本执行此操作吗 Cor
  • Gradle 无法在新的 Android Studio 2.0 中同步我的项目

    我刚刚将 Android Studio 从 1 5 升级到 2 0 即安装了全新版本 升级似乎进行得很顺利 但是当我打开项目时 当 Gradle 同步我的项目时 我遇到了问题 Gradle 同步运行几分钟后 我收到此错误 Failed to
  • 使用 Byte Buddy 拦截对 Java 8 lambda 表达式的调用

    我尝试使用 Byte Buddy 拦截对方法的调用和对 Java 8 lambda 表达式的调用AgentBuilder如下 static final Instrumentation inst ByteBuddyAgent install
  • 求 matplotlib 中绘制的两条曲线之间的面积(fill_ Between area)

    我有一个清单x and y两条曲线的值 两者都有奇怪的形状 而且我没有它们中任何一个的函数 我需要做两件事 绘制它并对曲线之间的区域进行着色 如下图所示 求曲线之间阴影区域的总面积 我可以绘制这些曲线之间的区域并对其进行着色fill bet
  • 如何使用 jQuery 在第二次单击时反转 CSS 动画

    我制作了以下菜单图标 CSS 动画 当我点击它时会触发它 当我使用 jQuery 第二次单击它时 我想使其反向动画 path1 stroke dasharray 33px stroke dashoffset 33px animation l
  • 如何以最佳方式传递元组参数?

    如何以最佳方式传递元组参数 Example def foo Int Int def bar a Int b Int 现在我想传递的输出foo to bar 这可以通过以下方式实现 val fooResult foo bar fooResul
  • 如何在 NodeJS 中允许表单数据

    我最近创建了一个接受文件的 API 我正在尝试使用 Postman 测试 API 如果我使用发出帖子请求x wwww form urlencoded身体类型 一切正常 我得到了所有预期的数据 唯一的问题是它不允许发送文件 如果我使用form
  • 关于文件 file = new File(路径)

    The Java iO 文件 http docs oracle com javase 6 docs api java io File html File 28java lang String 29文档说了以下关于其构造函数的内容 该构造函数
  • xml 拉解析器资产 xml

    如何使用拉解析器解析资产文件夹中的本地 XML 文件 我无法让拉解析器工作 它总是抛出 io 异常 我想我无法获取文件的路径或连接到该文件 mixm 我正在尝试各种方法来从 资产 和 资源 加载本地文件 但要按要求回答您的问题 因为其他人似
  • 在 java 8 中找不到 AnnotationProcessorFactory 类

    我有一个项目是建立在java 1 6 and 现在我将java版本升级到1 8 and构建项目 这里我使用 gradle 来构建项目 这是等级代码 task wsgen dependsOn compileJava doLast ant ta
  • asp.net core 1 appsettings.product.json 不更新连接字符串

    我在生产环境中有一个应用程序 使用在 IIS 上运行的 net core RC1 我重新编写了该应用程序 因为该公司希望将其放在 net core1 上 因为那是正式版本 在我的 net core RC1 应用程序中 我有 config j
  • Nodejs:在哪里或如何编写复杂的业务逻辑?

    最近我接触到了node js 和一些很酷的包 比如express 和jade 我一直有几个问题不断地敲我的门 如果我选择 Node js 来构建我的下一个网站 我将使用 JavaScript 来编写服务器端复杂的逻辑 但我不认为你可以将 J
  • 具有灵活数组成员的结构的大小

    Given struct Foo uint32 t a uint32 t b What is sizeof Foo 它是实现定义的行为还是未定义的行为 C 和 C 的答案是否不同 编译器将忽略灵活数组成员 因为它不存在 C11 6 7 2
  • 找不到模块“@angular/platform-b​​rowser/animations”

    我收到错误 ts 找不到模块 angular platform b rowser animations 我已经安装了以下内容 npm install save Angular Material Angular cdk npm install
  • 从 Java 运行 MATLAB 函数

    我在 MATLAB 中有一个 m 文件 我想从 Java 调用该文件 并以字符串或 Java 中的任何形式获取解决方案 这听起来很简单 但由于某种原因我无法让它发挥作用 我试过这个 matlab nosplash wait nodeskto
  • java设置图像的分辨率和打印尺寸

    我编写了一个程序 生成一个 BufferedImage 以显示在屏幕上 然后打印 图像的一部分包括 1 像素宽的网格线 即 一行为1个像素 行与行之间大约有10个像素 由于屏幕分辨率的原因 图像显示得比这大得多 每行有几个像素 我想将其绘制
  • 检索除指定一列之外的所有 DataFrame [重复]

    这个问题在这里已经有答案了 有没有办法选择 pandas DataFrame 对象中除一列之外的所有列 我已经看到了删除列的方法 但我不想这样做 use drop method df drop column name axis 1
  • 同一页面中多个表单上的 Google 隐形 ReCaptcha - PHP

    我正在我的 php 网站上关注这个 Invisible ReCaptcha 文档 http www pinnacleinternet com installing invisible recaptcha http www pinnaclei