Google reCAPTCHA，405错误和CORS问题 [英] Google reCAPTCHA, 405 error and CORS issue

问题描述

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

I am using AngularJS and trying to work with Google's reCAPTCHA, I am using the "Explicitly render the reCAPTCHA widget" method for displaying the reCAPTCHA on my web page,

HTML代码-

<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的最后一部分是使用" https://www.google.com/recaptcha/api/siteverify "作为网址，并使用 POST 方法，
并向其传递秘密密钥和Google创建的响应，我已经在下面的代码中完成了此操作.

So far, I am able to achieve the needed functionality of whether the user is a Human or a Bot,
As per my code above, I have a Callback function called 'verifyCallback' in my code,
which is storing the response created by Google, in a global variable called 'auth'.

Now, the final part of reCAPCHA is calling the Google API,
with "https://www.google.com/recaptcha/api/siteverify" as the URL and using a POST method,
And passing it the Secret Key and the Response created by Google, which I've done in the code below.

我的控制器-

_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的URL，
以下是我发送的请求和错误的屏幕截图.

So, the Problem I am actually facing is that I am unable to hit the Google's URL,
Following is the screenshot of the request I am sending and the error.

提出的请求-

错误响应-

据我了解，它与CORS和预检请求有关.
那么我在做什么错呢?我该如何解决这个问题?

As far as I understand it is related to CORS and Preflight request.
So what am I doing wrong? How do I fix this problem?

推荐答案

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

本页说明了如何从应用程序后端验证用户对reCAPTCHA挑战的响应.

This page explains how to verify a user's response to a reCAPTCHA challenge from your application's backend.

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

Verification is initiated from the server, not the client.

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

This is an extra security step for the server to ensure requests coming from clients are legitimate. Otherwise a client could fake a response and the server would be blindly trusting that the client is a verified human.

这篇关于Google reCAPTCHA，405错误和CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！