2016-06-08 33 views
2

即时通讯将reCaptcha从Google添加到我的表单中。问题是,即使我已经按照谷歌的指示。我仍然可以按提交按钮,而不需要进行恢复。任何想法请heres相关的代码片段。提交按钮发送电子邮件即使如果reCaptcha已完成

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>webpage title</title> 
<link rel="stylesheet" type="text/css" href="view.css" media="all"> 
<script type="text/javascript" src="view.js"></script> 
<script src='https://www.google.com/recaptcha/api.js'></script> 
</head> 

而且这个片段在网页中

<div class="g-recaptcha" data-sitekey="xxxxxxmyapikeyxxxxxxx_xxxxxxmyapikeyxxxxxxx"></div> 
        <li class="buttons"> 
       <input type="hidden" name="form_id" value="1136056" /> 

       <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> 
     </li> 
      </ul> 

     </form> 

的组成部分至于我知道我已经把代码在我的网页的特定区域。一个在HTML模板上的结束标记之前,另一个在我想要reCAPTCHA小部件出现的地方结束。

我已经把提交按钮之前的recaptcha。有一部分关于我不明白的服务器端集成。

[QUOTE] 
When your users submit the form where you integrated reCAPTCHA, you'll  
get as part of the payload a string with the name "g-recaptcha-response". 
In order to check whether Google has verified that user, 
send a POST request with these parameters: 

URL: https://www.google.com/recaptcha/api/siteverify 
secret (required) xxxxxmysecretkeyxxxxxxx 
response (required) The value of 'g-recaptcha-response'. 
remoteip The end user's ip address. 
[/QUOTE] 

任何人都可以请摆脱这个请点此。 Thankyou

回答

1

因此,我们设置了表单并确保您的库已包含在内,防止在recaptcha未完成时单击提交按钮并显示工具提示以通知用户需要继续。然后在使用回调方法完成后启用它。

的login.php

<div class="formContainer"> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
    <form action="loginHandler.php" method="post" name="login_form" id="loginForm" class="loginForm"> 
     <h2>Login</h2> 
     <p><input type="text" required placeholder="Email" name="email"></p> 
     <p><input type="password" required placeholder="Password" name="password" id="password"></p> 
     <div class="g-recaptcha" data-callback="captcha_filled" 
       data-expired-callback="captcha_expired" 
       data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"> 
     </div> 
     <div> 
      <p class="show-tt" data-toggle="tooltip" title="Complete the reCAPTCHA to login." data-placement="bottom"> 
       <input id="submitLogin" type="submit" value="Login"> 
      </p> 
     </div> 
    </form> 
</div> 

<script> 
    //prevent submit and show tooltip until captch is complete. 
    var submit = false; 
    $("#submitLogin").prop('disabled', true); 

    function captcha_filled() { 
     submit = true; 
     $("#submitLogin").prop('disabled', false); 
     $(".show-tt").tooltip('destroy'); 
    } 
    function captcha_expired() { 
     submit = false; 
     $("#submitLogin").prop('disabled', true); 
     showTooltip(); 
    } 
    function showTooltip() { 
     $(".show-tt").tooltip('show'); 
    } 
</script> 

现在我们张贴到loginHandler.php,或任何你的表单提交过再有,我们将分配你的密钥,然后验证与谷歌的请求。

loginHandler.php

$secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; 

if (isset($_POST["g-recaptcha-response"])) { 

    $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret) . 
      '&response=' . urlencode($_POST['g-recaptcha-response']) . '&remoteip=' . urlencode($_SERVER['REMOTE_ADDR']); 
    //ip address is optional 
    $result = json_decode(file_get_contents($url), true); 

    if ($result != null && $result['success'] === true) { 

     //success, handle login/submit data or whatever 

    } else { 
     //response is bad, handle the error 
     header('Location: login.php?error=4'); 
    } 
} else { 
    //captcha response is not set, handle error 
    header('Location: login.php?error=5'); 
} 
相关问题