当前位置: 首页 > 面试题库 >

使用AJAX的ReCaptcha 2.0

米丰
2023-03-14
问题内容

我设法在我的网站上运行ReCaptcha 2.0。但是,只有当我不使用AJAX并让表单“自然”提交时,它才起作用。

我要提交带有验证码的表单,并在 不刷新页面的情况下 向用户发送成功提示,以提醒用户。

我尝试了以下代码,但似乎服务器未获得用户响应:

HTML:

<form class="form" action="javascript:void(0)" novalidate>
    <!-- all the inputs... -->

    <!-- captcha -->
    <div class="input-group">
        <div class="g-recaptcha" data-sitekey="6LdOPgYTAAAAAE3ltWQGar80KUavaR-JblgPZjDI"></div>
    </div>

    <div class="errors" id="errors" style="display: none"></div>

    <div class="input-group">
        <input type="button" value="Send" class="btn-default right" id="submit">
        <div class="clear"></div>
    </div>
</form>

JS:

$('#submit').click(function(e) {
    console.log('clicked submit'); // --> works

    var $errors = $('#errors'),
        $status = $('#status'),

        name = $('#name').val().replace(/<|>/g, ""), // prevent xss
        email = $('#email').val().replace(/<|>/g, ""),
        msg = $('#message').val().replace(/<|>/g, "");

    if (name == '' || email == '' || msg == '') {
        valid = false;
        errors = "All fields are required.";
    }

    // pretty sure the problem is here
    console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response:

    if (!errors) {
        // hide the errors
        $errors.slideUp();
        // ajax to the php file to send the mail
        $.ajax({
            type: "POST",
            url: "http://orenurbach.com/assets/sendmail.php",
            data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse()
        }).done(function(status) {
            if (status == "ok") {
                // slide down the "ok" message to the user
                $status.text('Thanks! Your message has been sent, and I will contact you soon.');
                $status.slideDown();
                // clear the form fields
                $('#name').val('');
                $('#email').val('');
                $('#message').val('');
            }
        });
    } else {
        $errors.text(errors);
        $errors.slideDown();
    }
});

PHP:

<?php
    // assemble the message from the POST fields

    // getting the captcha
    $captcha = '';
    if (isset($_POST['g-recaptcha-response']))
        $captcha = $_POST['g-recaptcha-response'];
    echo 'captcha: '.$captcha;

    if (!$captcha)
        echo 'The captcha has not been checked.';
    // handling the captcha and checking if it's ok
    $secret = 'MY_SECRET';
    $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);

    var_dump($response);

    // if the captcha is cleared with google, send the mail and echo ok.
    if ($response['success'] != false) {
        // send the actual mail
        @mail($email_to, $subject, $finalMsg);

        // the echo goes back to the ajax, so the user can know if everything is ok
        echo 'ok';
    } else {
        echo 'not ok';
    }
?>

*PHP页面中 *的结果

captcha: The captcha has not been checked.array(2) { ["success"]=> bool(false) ["error-codes"]=> array(1) { [0]=> string(22) "missing-input-response" } } not ok

最重要的 是,如何在不自动处理其余POST数据的情况下手动获得输入响应?


问题答案:

好的,这很愚蠢。

我做错了几件事:

  • 在PHP文件中,所有字符串都用单引号引起来,这引起了问题。
  • 在整个测试过程中,我在PHP文件中添加了多个打印内容,因此该文件if (status == "ok")永远无法正常工作。我确实收到了电子邮件,但没有得到任何确认,现在我明白了为什么。
  • 当我想要检查遗漏的PHP文件时,我只是转到URL中的地址,并始终出现错误。即使邮件已发送。现在,我知道这不是检查日志的正确方法。

感谢@Samurai帮助我弄清楚了事情。

最终的PHP代码:

<?php
    // assemble the message from the POST fields

    // getting the captcha
    $captcha = "";
    if (isset($_POST["g-recaptcha-response"]))
        $captcha = $_POST["g-recaptcha-response"];

    if (!$captcha)
        echo "not ok";
    // handling the captcha and checking if it's ok
    $secret = "MY_SECRET";
    $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER["REMOTE_ADDR"]), true);

    // if the captcha is cleared with google, send the mail and echo ok.
    if ($response["success"] != false) {
        // send the actual mail
        @mail($email_to, $subject, $finalMsg);

        // the echo goes back to the ajax, so the user can know if everything is ok
        echo "ok";
    } else {
        echo "not ok";
    }
?>


 类似资料:
  • 直到2005年,所有Web应用程序遵循的模式是每页管理一个HTTP请求。 将一个页面导航到另一个页面需要加载整个页面。 这会将性能降低到更高的水平。 因此, rich client applications的数量有所增加,这些rich client applications过去常常嵌入AJAX,XML和JSON。 AJAX 异步JavaScript和XML(AJAX)是一种创建快速动态网页的技术。

  • 底线是,我如何手动地获得输入响应而不自动地与其余的POST数据一起进行呢?

  • 我很难让Omnifaces skipValidators标记用于Primefaces ajax事件。基本上,我需要根据selectOneMenu的选择更新表单中的许多元素,但我还需要保留已输入的任何值,而不是验证表单。然而,我无法让它工作。下面是问题的一个小例子: xhtml: 测试豆: 当页面加载时,它看起来是正确的-reqField中没有星号。选择一个控制台值后,页面会正确更改,并且在请求字段

  • 发送 ajax 请求 AjaxPlugin 插件依赖于 axios,详细 API 文档请查看:axios 版本要求 AjaxPlugin在vux@^2.1.0-rc.20开始支持 引入 main.js 入口文件中引入: import { AjaxPlugin } from 'vux' Vue.use(AjaxPlugin) 兼容性问题 需要注意的是axios是基于Promise的,因此如果你

  • 问题内容: 我正在尝试通过javascript发布到我的 跨域 * 休息服务 *,并且意识到除非我使用此规范,否则这是不可能的; http://www.w3.org/wiki/CORS_Enabled 但是,关于如何实现此功能的文档非常有限,我有几个问题; 1-我使用 Glassfish Jee6 应用服务器,所以我可以简单地在我的web.xml中添加一个 码头 过滤器并完成工作吗? 2-并且对于