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

Posted 2023-05-09

【中文标题】带有按钮 validate-angularjs 的谷歌验证码

【英文标题】：google captcha with button validate-angularjs

【发布时间】：2016-08-04 06:13:37

【问题描述】：

我在我的要求中使用 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("#/");
        
    );

【参考方案1】：

你可以使用 angular-recaptcha

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

【讨论】：

我也想要按钮验证

【参考方案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]; 
     

【讨论】：

请告诉我该怎么做

你们的服务器技术是什么？

asp.net 与 web api 使用 angularjs。这些用于我的要求

我尝试验证但失败了。请帮帮我阿里