谷歌验证码与按钮validate-angularjs

Question

我在我的要求中使用Google重新验证码。我想验证与按钮假设，如果我选择正确，那么只有按钮将验证，否则它不验证。我尝试过，但我没有成功，请帮助我提前解决此问题，谢谢 这是我在线提供的Google captcha脚本。

任何帮助，将不胜感激。

谢谢。

这是在网上

<script src='https://www.google.com/recaptcha/api.js'></script> 


<form data-toggle="validator" role="form" name="myForm">Name: <input type="text" class="form-control" placeholder="Name" style="border: 1px solid #BBDEFB;"id="Name" ng-model="Name" required>Verification code: <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW" required<button class="btn btn-default" style="background-color: #005baa; color: #fff;" ng-click="myForm.$valid && submit()">Submit</button></div></form> 

可我的谷歌验证码脚本，这是我的按钮单击事件

$scope.submit = function() { 
    //alert("hi");submit 
    $scope.Name = ""; 
    var _EeqObj = new Object(); 
    _EeqObj.Name = $("#Name").val(); 
    _EeqObj.Meth = "WX"; 
    var httpreq = $http({ 
     method: 'POST', 
     url: "Home", 
     data: _EeqObj 
    }).success(function (response) { 
     if (response == "success") { 
      alert("Thank You"); 
      $window.location.reload(); 
     } 
     else { 
      alert("not inserted"); 
      window.location.replace("#/"); 
     } 
    }); 
} 

Answer 1

这是不够的只有JS客户端进行检查。 你也需要检查你的后端服务器端。客户端从谷歌验证码服务获取字符串响应。客户端将该字符串发送到您的服务器您的服务器将该字符串与私钥发送到谷歌验证码服务，并根据答案决定。

UPDATE： 这里是码部分与asp.net网页API

角控制器

angular 
    .module('yourApp', ['vcRecaptcha']) 
    .controller('YourController', YourController); 

function YourController($scope, vcRecaptchaService) { 

    var recaptcha = { 
     key: "your recaptcha public key", 
     widgetId: null, 
     response: null, 
     setWidget: function(widgetId) { recaptcha.widgetId = widgetId; }, 
     setResponse: function(response) { recaptcha.response = response; }, 
     cbExpiration: function() { recaptcha.response = null; }, 
     reset: function() { 
      recaptcha.response = null; 
      vcRecaptchaService.reload(recaptcha.widgetId); 
     } 
    }; 

    $scope.recaptcha = recaptcha; 

    $scope.reset = function() { 
     $scope.info = undefined; 
     recaptcha.reset(); 
    }; 


    $scope.sendData = function(form, recaptchaResponse) { 
     if (form.$invalid) return; 
     $http.post('/api/endpoint', { data: ..., recaptchaResponse: recaptchaResponse}) 
      .then(... 

角视图

<form name="yourForm" novalidate ng-submit="sendData(yourForm, recaptcha.response)> 
... 
    <input type="hidden" name="recaptchaResponse" ng-model="recaptcha.response" required/> 
    <div class="recaptcha-container"> 
     <div vc-recaptcha theme="'light'" key="recaptcha.key" 
      on-create="recaptcha.setWidgetId(widgetId)" 
      on-success="recaptcha.setResponse(response)" 
      on-expire="recaptcha.cbExpiration()"></div> 
    </div> 
    <span class="recaptcha-error-info" ng-show="yourForm.$submitted && (yourForm.recaptchaResponse.$invalid || yourForm.$error.recaptcha.length)"> 
     Pass the check, please 
    </span> 
... 

asp.net网页API控制器

使用

[RoutePrefix("api")] 
public class YourApiController : ApiController 
{ 
    [HttpPost] 
    [Route("endpoint")] 
    public async Task<IHttpActionResult> Post([FromBody] YourVm model) 
    { 
     if (!ModelState.IsValid) return BadRequest(ModelState); 

     var remoteIp = Request.GetOwinContext().Request.RemoteIpAddress; 
     var recaptchaVerifyResponse = await VerifyAsync(model.RecaptchaResponse, remoteIp); 

     if (recaptchaVerifyResponse == null || !recaptchaVerifyResponse.Success) return BadRequest("recaptcha error"); 

     ... 
    } 


    // may be exrtracted into service 
    private async Task<RecaptchaVerifyResponse> VerifyAsync(string response, string remoteip) 
    { 
     const string RecaptchaVerifyUrl = "https://www.google.com/recaptcha/api/siteverify"; 

     string responseString; 
     using (var client = new HttpClient()) 
     { 
      var values = new Dictionary<string, string> 
      { 
       {"secret", "your recaptcha private key"}, 
       {"response", response}, 
       {"remoteip", remoteip}, 
      }; 

      var content = new FormUrlEncodedContent(values); 
      var postResponse = await client.PostAsync(RecaptchaVerifyUrl, content); 
      responseString = await postResponse.Content.ReadAsStringAsync(); 
     } 

     if (string.IsNullOrWhiteSpace(responseString)) return null; 

     RecaptchaVerifyResponse result; 
     try 
     { 
      result = JsonConvert.DeserializeObject<RecaptchaVerifyResponse>(responseString); 
     } 
     catch (JsonException) 
     { 
      return null; 
     } 

     return result; 
    } 
} 

public class RecaptchaVerifyResponse 
{ 
    [JsonProperty("success")] 
    private bool? _success = null; 

    public bool Success 
    { 
     get { return _success == true; } 
    } 

    [JsonProperty("error-codes")] 
    private string[] _errorCodes = null; 

    public string[] ErrorCodes 
    { 
     get { return _errorCodes ?? new string[0]; } 
    } 
} 

Answer 2

您可以使用角验证码

https://github.com/VividCortex/angular-recaptcha