Question

我正在使用AngularJS并尝试使用Google的reCAPTCHA，我正在使用“显式呈现reCAPTCHA小部件”方法在我的网页上显示reCAPTCHA，

HTML code -

<script type="text/javascript">
    var onloadCallback = function() 
    {
        grecaptcha.render('loginCapcha', {
            'sitekey' : 'someSiteKey',
            'callback' : verifyCallback,
            'theme':'dark'

        });
    };

    var auth='';
    var verifyCallback = function(response) 
    {
       //storing the Google response in a Global js variable auth, to be used in the controller
        auth = response;

        var scope = angular.element(document.getElementById('loginCapcha')).scope();
        scope.auth();
    };
</script>

<div id="loginCapcha"></div>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

到目前为止，我能够实现用户是人还是机器人所需的功能根据我上面的代码，我的代码中有一个名为'verifyCallback'的回调函数，
将Google创建的响应存储在名为“auth”的全局变量中。

现在，reCAPCHA的最后一部分是调用Google API，使用“ https://www.google.com/recaptcha/api/siteverify ”作为网址并使用 POST 方法，密钥和响应，我在下面的代码中完成了这项工作。

我的控制器 -

_myApp.controller('loginController',['$rootScope','$scope','$http',
 function($rootScope,$scope,$http){

    var verified = '';

    $scope.auth = function()
    {
        //Secret key provided by Google
        secret = "someSecretKey";

       /*calling the Google API, passing it the Secretkey and Response,
       to the specified URL, using POST method*/

        var verificationReq = {

            method: 'POST',
            url: 'https://www.google.com/recaptcha/api/siteverify',
            headers: {
                 'Access-Control-Allow-Origin':'*'
             },
            params:{
                secret: secret,
                response: auth
            }

        }


        $http(verificationReq).then(function(response) 
        {
            if(response.data.success==true)
            {
                console.log("Not a Bot");
                verified = true;
            }
            else
            {
                console.log("Bot or some problem");
            }

        }, function() {
           // do on response failure
        });
    }

所以，我实际面临的问题是我无法点击Google的网址，以下是我发送的请求的屏幕截图和错误。

提出请求 -

错误回复 -

据我所知，它与CORS和预检请求相关。
那么我做错了什么？我该如何解决这个问题？

Answer 1

正如谷歌文档中所述https://developers.google.com/recaptcha/docs/verify

此页面介绍了如何从应用程序的后端验证用户对reCAPTCHA质询的响应。

验证是从服务器而不是客户端启动的。

这是服务器的额外安全步骤，以确保来自客户端的请求是合法的。否则，客户端可以伪造响应，服务器将盲目地相信客户端是经过验证的人员。

谷歌reCapcha，与AngularJS的CORS问题

1 个答案: