2016-11-28 128 views
0

我正在嘗試將reCaptcha添加到我在我的網站上的回執表單中。我已經跟隨了一個關於如何去做的視頻教程,但是我正努力使它適應我的表單,它使用ajax調用一個PHP文件,而實際上並沒有提交表單。我已經嘗試了幾個在以前的問題中提出的建議,但沒有一個能夠得到預期的結果,而是在註冊頁面顯示「我不喜歡機器人」。如果你能想到任何的話,一些提示/建議將會很好。Ajax&Google reCaptcha

<div class="g-recaptcha" data-sitekey="6LcXMg0UAAAAABmlDlOGa6onxqqzERZ483XOJbFm"></div> 

的Javascript

function Register(){ 
     var Forename = $("#txtForename").val(); 
     var Surname = $("#txtSurname").val(); 
     var Password = $("#txtPassword").val(); 
     var PasswordR = $("#txtPasswordR").val(); 
     var response = $("#g-recaptcha").val(); 
      $.post('functions/php/fncregister.php', {Forename: Forename, Surname: Surname, Password: Password, PasswordR: PasswordR, response: response}, function(data) { 
       var returnValue = JSON.parse(data); 
       if (returnValue['data'] == 0){ 
        $('#mdlInfo').html('<p>Your account has been created under the username: <strong><span id="spnUsername">'+returnValue['username']+'</span></strong>. You <strong>must</strong> remember this as you will require it to log into your account.</p><p>Your account has also been added to a moderation que. <strong>You must wait until a member of staff activates your account!</strong></p>'); 
        $("#mdlRegister").modal("show"); 
       } 
       else if (returnValue['data'] == 1){ 
        $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">Passwords did not match!</p>'); 
       } 
       else if (returnValue['data'] == 3){ 
        $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">An error occured when adding your details to the Database!</p>'); 
       } 
       else if (returnValue['data'] == 4){ 
        $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">I don\'t like Robots!</p>'); 
       } 
      }); 
    } 

PHP

<?php 
//Retrieves variables from Javascript. 
$Forename = $_POST["Forename"]; 
$Surname = $_POST["Surname"]; 
$Password = $_POST["Password"]; 
$PasswordR = $_POST["PasswordR"]; 

//reCaptcha 
$Url = "https://www.google.com/recaptcha/api/siteverify"; 
$SecretKey = "---KEY---"; 
$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']); 
$Robot = json_decode($response); 

$data = 0; 

if(isset($Robot->success) AND $Robot->success==true){ 
    //OTHER CODE 
} 

else{ 
    //This code always runs (though this is only meant to happen if reCaptcha detects a robot. 
    $data = 4; 
     echo json_encode(["data"=>"$data"]); 
?> 
+0

顯然我在測試中使用了我的實際密鑰,但是出於安全原因,我在此刪除了它。 –

+1

我建議嘗試將示例簡化爲更少的代碼。這個問題當然不需要完整的代碼審查來複制或理解。如果該例子更臨牀且更少tldr,您將獲得更多的專家建議。 – WEBjuju

+0

@WEBjuju,你的代碼對於手頭的問題有點過分了。我已經把它煮沸了,所以希望這會更容易理解。 –

回答

0

不太清楚我是如何得到它的工作,但我做到了。

首先,我在Javascript中添加了一個新的變量「Response」,並使用文檔中列出的函數來檢索當用戶證明他們不是機器人時返回的密鑰值。我加入這個變量到我的AJAX調用了,所以它傳遞到PHP文件,像這樣:

function Register(){ 
    var Forename = $("#txtForename").val(); 
    var Surname = $("#txtSurname").val(); 
    var Password = $("#txtPassword").val(); 
    var PasswordR = $("#txtPasswordR").val(); 
    var Response = grecaptcha.getResponse(); 
     $.post('functions/php/fncregister.php', {Forename: Forename, Surname: Surname, Password: Password, PasswordR: PasswordR, Response: Response}, function(data) { 
      var returnValue = JSON.parse(data); 
      if (returnValue['data'] == 0){ 
       $('#mdlInfo').html('<p>Your account has been created under the username: <strong><span id="spnUsername">'+returnValue['username']+'</span></strong>. You <strong>must</strong> remember this as you will require it to log into your account.</p><p>Your account has also been added to a moderation que. <strong>You must wait until a member of staff activates your account!</strong></p>'); 
       $("#mdlRegister").modal("show"); 
      } 
      else if (returnValue['data'] == 1){ 
       $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">Passwords did not match!</p>'); 
      } 
      else if (returnValue['data'] == 3){ 
       $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">An error occured when adding your details to the Database!</p>'); 
      } 
      else if (returnValue['data'] == 4){ 
       $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">I don\'t like Robots!</p>'); 
      } 
     }); 
} 

在我的PHP文件,我刪除從URL後,用戶的IP地址,因爲它根據文件是可選(不知道這樣做的好處)。谷歌隨後會返回有關請求的信息,如果成功,則該項目的「成功」在我的代碼是正確的,因此進行到生成的帳戶:

$Url = "https://www.google.com/recaptcha/api/siteverify"; 
$SecretKey = "---KEY---"; 
$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['Response']); 
$Robot = json_decode($Response); 

$data = 0; 

if(isset($Robot->success) AND $Robot->success==true){ 

我沒有到底使用POST,但使用取而代之。我相信有一些安全方面的好處,因爲它會隱藏祕密密鑰,所以我會盡快研究它。

感謝@WEBjuju和我的隊友「Bridge Troll」的幫助。沒有他們中的任何一個,我都做不到。

1

這裏,看你的變量的外殼是很重要的:

$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']); 
// because variables are case sensitive... 
$Robot = json_decode($Response); // it is $Response, not $response 

如果不解決這個問題,請用這個p的輸出更新你的問題roduces:

$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']); 
die('Response file: <pre>'.$Response); 
$Robot = json_decode($Response); 

也嘗試一定要進行urlencode()您要發送的增值經銷商,以谷歌:

$Response = file_get_contents($Url."?secret=".urlencode($SecretKey)."&response=".urlencode($_POST['response'])."remoteip=".urlencode($_SERVER['REMOTE_ADDR'])); 

,但到目前爲止,你必須

$Robot = json_decode($Response); // and NOT $response 

這裏是截圖顯示如何從ajax調用中得到輸出,在你的php處理中你死()說ajax調用:

enter image description here

最佳解決方案

Review this guide on how to install Google reCAPTCHA with PHP

+0

我已經更新了變量大小寫,但我認爲在發佈問題後我可能已經嘗試過了。然後,我嘗試了另一段代碼,但是,在Chrome控制檯中出現錯誤:'位置0處的未捕獲的SyntaxError:JSON中的意外的令牌R',但日誌文件中沒有錯誤。我相信這與reCaptcha無關,但您想要創建錯誤的方式已返回。 –

+1

您只需在調試過程中放入die(),並獲得調試的輸出結果,您需要檢查javascript控制檯以查看ajax調用的結果(以便您可以通過該輸出對我們來說,請致電 – WEBjuju

+0

我已經試過你的編輯到你的口水。輸出的錯誤是'VM552:1 Uncaught SyntaxError:位置0的JSON中的意外標記R(匿名函數)@ login.js:34l @ jquery.min.js:4fireWith @ jquery.min.js:4k @ jquery.min。 js:6(匿名函數)@ jquery.min.js:6'。或者,您可以在我的頁面上查看控制檯:http://thomas-smyth.co.uk/register.php感謝您的幫助。 –