谷歌驗證碼與按鈕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