Google INVISIBLE reCaptcha + Bootstrap 4验证器

问题描述 投票:4回答:1

我一直在使用基于以下网站的Google Invisible reCapture在线表格,PHP Bootstrap 4 beta 2验证器。

https://shareurcodes.com/blog/google%20invisible%20recaptcha%20integration%20with%20php

但不知何故,我得到错误消息说“错误发生,错误代码是:缺少输入”

我不知道出了什么问题。

这是我的代码......

signup.php

<? $config = require("config.php"); ?>

<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap-v4.0.0-beta.2.css">

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#needsValidation').validator().on('submit', function (e) {
      if (e.isDefaultPrevented()) {
        // handle the invalid form...
        console.log("validation failed");
      } else {
        // everything looks good!
        e.preventDefault();
        console.log("validation success");
        grecaptcha.execute();
      }
    });
}); 

function onSubmit(token){
    document.getElementById("needsValidation").submit();
};

</script>

</head>

<body>

<form class="container" method="post" action="signup_01.php" id="needsValidation" name="a_form" novalidate>

<div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="name1">Your Name</label> <span class="red">*</span>
                        <input type="text" class="form-control" id="name1" name="name1" placeholder="Please enter Your Name *" required />

                        <div class="invalid-feedback">Your Name is required.</div>
                    </div>
</div>

<div id='recaptcha' class="g-recaptcha"
                      data-sitekey="<?php echo $config['client-key']; ?>"
                      data-callback="onSubmit"
                      data-size="invisible"></div>
                <button class="btn btn-block btn-custom" type="submit" onclick="return check_compare(); return true;">SIGNUP NOW!</button>

</form>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

</body>
</html>

signup_01.php

<?php
require 'recaptcha.php';

$recaptcha = $_POST['g-recaptcha-response'];

$object = new Recaptcha();
$response = $object->verifyResponse($recaptcha);

if(isset($response['success']) and $response['success'] != true) {
    echo "An Error Occured and Error code is :".$response['error-codes'];
}else {
    echo "Correct Recaptcha";
}

recaptcha.php

<?php
class Recaptcha{

public function __construct(){
    $this->config = require('config.php');
}

public function verifyResponse($recaptcha){

    $remoteIp = $this->getIPAddress();

    // Discard empty solution submissions
    if (empty($recaptcha)) {
        return array(
            'success' => false,
            'error-codes' => 'missing-input',
        );
    }

    $getResponse = $this->getHTTP(
        array(
            'secret' => $this->config['secret-key'],
            'remoteip' => $remoteIp,
            'response' => $recaptcha,
        )
    );

    // get reCAPTCHA server response
    $responses = json_decode($getResponse, true);

    if (isset($responses['success']) and $responses['success'] == true) {
        $status = true;
    } else {
        $status = false;
        $error = (isset($responses['error-codes'])) ? $responses['error-codes']
            : 'invalid-input-response';
    }

    return array(
        'success' => $status,
        'error-codes' => (isset($error)) ? $error : null,
    );
}


private function getIPAddress(){
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) 
    {
    $ip = $_SERVER['HTTP_CLIENT_IP'];
    } 
    elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) 
    {
     $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } 
    else 
    {
      $ip = $_SERVER['REMOTE_ADDR'];
    }

    return $ip;
}

private function getHTTP($data){

    $url = 'https://www.google.com/recaptcha/api/siteverify?'.http_build_query($data);
    $response = file_get_contents($url);

    return $response;
    }
}

我知道我可以看到我的客户密钥的价值,

我认为这个领域“g-recaptcha-response”有空的价值,但我不知道如何以及如何。

$recaptcha = $_POST['g-recaptcha-response'];

你能告诉我如何使它工作吗?

谢谢!

validation bootstrap-4 recaptcha invisible-recaptcha
1个回答
0
投票

用以下代码替换您的signup.php页面。这个对我有用。

<? $config = require("config.php"); ?>

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


</head>

<body>

<form class="container" method="post" action="signup_01.php" id="needsValidation" name="a_form" novalidate>

<div class="form-row">
                    <div class="col-md-6 mb-3">
                        <label for="name1">Your Name</label> <span class="red">*</span>
                        <input type="text" class="form-control" id="name1" name="name1" placeholder="Please enter Your Name *" required />

                        <div class="invalid-feedback">Your Name is required.</div>
                    </div>
</div>

<div id='recaptcha' class="g-recaptcha"
                      data-sitekey="<?php echo $config['client-key']; ?>"
                      data-callback="onSubmit"
                      data-size="invisible"></div>
                <button class="btn btn-block btn-custom" type="submit" >SIGNUP NOW!</button>

</form>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

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

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#needsValidation').validator().on('submit', function (e) {
      if (e.isDefaultPrevented()) {
        // handle the invalid form...
        alert("validation failed");
      } else {
        // everything looks good!
        e.preventDefault();
        console.log("validation success");
        grecaptcha.execute();
      }
    });
}); 

function onSubmit(token){
    document.getElementById("needsValidation").submit();
};

</script>

</body>
</html>

您没有将bootstrap验证器添加到您的页面。我也添加了它的CDN链接。记住,当你开发的东西总是打开开发者控制台来检查javascript错误。并且还建议使用CDN以获得更好的性能,并将js代码按其依赖顺序移至底部。

© www.soinside.com 2019 - 2024. All rights reserved.