带有按钮 validate-angularjs 的谷歌验证码

Question

我在我的要求中使用 Google 重新验证码。我想用按钮验证假设如果我选择正确，那么只有按钮会验证，否则它不会验证。我试过但我失败了请帮我解决这个问题提前谢谢 这是我的在线 Google 验证码脚本。

任何帮助将不胜感激。

谢谢。

这是我在网上提供的谷歌验证码脚本

 <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

你可以使用 angular-recaptcha

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

Answer 2

仅在 js 客户端检查是不够的。 您还需要检查后端服务器端。客户端从谷歌验证码服务获取字符串响应。客户端将该字符串发送到您的服务器。您的服务器将带有私钥的字符串发送到谷歌验证码服务，并根据答案做出决定。

更新： 这是与 asp.net web 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 web 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]; }
    } 
}