Recaptcha for .NET在AJAX請求中不起作用

Question

我想在ASP.NET MVC 4應用程序中使用'Recaptcha for .NET'。我做了指示here。我用AJAX請求，通過下面的腳本登錄用戶：

$(".@loginGuid button[type=button]").click(function() { 
     var wrapper = $(this).parents(".@loginGuid"); 
     wrapper.find(".has-error").removeClass("has-error"); 
     var dto = { 
     Valid: true, 
     UserName: wrapper.find(".user-name").val(), 
     Password: wrapper.find(".password").val(), 
     Remember: wrapper.find(".remember").is(":checked"), 
     }; 

     if (!validateUserName(dto.UserName)) { 
     dto.Valid = false; 
     wrapper.find(".user-name").addClass("has-error"); 
     } 
     if (dto.Password.length < 6) { 
     dto.Valid = false; 
     wrapper.find(".password").addClass("has-error"); 
     } 

     if (dto.Valid) { 

     $.ajax({ 
      url: "/Account/AjaxLogin", 
      type: "post", 
      data: JSON.stringify(dto), 
      context: dto, 
      dataType: "json", 
      contentType: "application/json;charset=UTF-8", 
      cache: false, 
      statusCode: { 
      404: function() { 
       alert("page not found"); 
      }, 
      200: function() { 
      } 
      } 
     }).done(function (result) { 
      if (result) { 
      if (result.Succeed) { 
       window.location.reload(); 
      } else { 
       $.map(result.Messages, function (item, index) { 
       alert(item); 
       }); 
      } 
      } 
     }).fail(function() { 
     }).always(function() { 

     }); 
     } 
     return false; 
    }); 

這裏是我的操作方法：

[HttpPost] 
    [AllowAnonymous] 
    public ActionResult AjaxLogin(string username, string password, bool remember) 
    { 
     ScriptResult scriptResult = new ScriptResult() { Succeed = true }; 

     RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper(); 
     RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse(); 
     if (recaptchaResult != RecaptchaVerificationResult.Success) 
     { 
      scriptResult.Messages.Add("Incorrect captcha answer."); 
      scriptResult.Succeed = false; 
     } 
     else 
     { 
      var user = UserManager.Find(username, password); 
      if (user != null) 
      { 
       user.UserName = user.UserName.ToLower(); 
       SignIn(user, remember); 
      } 
      else 
      { 
       scriptResult.Messages.Add(LocalizeHelper.GetLocalizeString("Invalid username or password.")); 
       scriptResult.Succeed = false; 
      } 
     } 

     return Json(scriptResult); 
    } 

當我填寫登錄表單（用戶名，密碼和驗證碼字段），然後點擊登錄按鈕，然後我得到了以下錯誤：

An exception of type 'System.InvalidOperationException' occurred in Recaptcha.Web.dll but was not handled in user code

Additional information: Recaptcha challenge field cannot be empty.

Answer 1

您聯繫假定一個標準格式後這樣的ReCaptcha形式值可能從拉的文檔其中x是來自Recaptcha控件的特定表單域。 你正在做一個AJAX請求，所以你需要自己明確地傳遞這些值。

如果您檢查呈現的Recaptcha控件的html，您將看到兩個輸入字段。

<input id="recaptcha_challenge_field" ... /> 
<input id="recaptcha_response_field" ... /> 

這些值將需要在你的AJAX請求傳遞這樣你的JavaScript是：

$.ajax({ 
    url: "/Account/AjaxLogin", 
    type: "post", 
    data: { 
     recaptcha_challenge_field: $("#recaptcha_challenge_field").val(), 
     recaptcha_response_field: $("#recaptcah_response_field").val(), 
     ... 
    } 
}) 

你的控制器動作簽名不改變

public ActionResult AjaxLogin(string username, string password, bool remember) 

你可以驗證這些值如果您檢查控制器內部的動作，則通過

var challenge = Request.Form["recaptcha_challenge_field"]; 
var answer = Request.Form["recaptcha_response_field"]; 

從實際source code我們看到RecaptchaVerificationHelper的值從請求採取：

HttpRequest request = HttpContext.Current.Request; 
... 
this._Challenge = request.Form["recaptcha_challenge_field"]; 
this.Response = request.Form["recaptcha_response_field"]; 

你不需要做任何事情比POST更值到你的動作然後調用recaptchaHelper.VerifyRecaptchaResponse()。由於您沒有進行標準表單提交，因此上面的JavaScript將通過AJAX帖子發送值。