Google reCAPTCHA, 405 error and CORS issue

Question

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 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>

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.

My Controller -

_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
        });
    }

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.

Request made -

Error Response -

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?

I added 'Açcess-Control-Allow-Origin' : '*' , as header in my request? What am I missing ? Please help — Dev1ce, May 01 '16 at 16:00
So this has to handled by serverside? It's confusing me more, :'( Can this be solved on Client side through the code I've written? — Dev1ce, May 01 '16 at 16:16
No, this has to be handled on the server. There is no way around that. — marvinhagemeister, May 01 '16 at 16:21
You can't put the secret at the client and create requests from there. That would be against the security. — Wiktor Zychla, May 01 '16 at 16:22
Oh ok, so I should make the request from a server side script, instead of what I was trying from Client side? — Dev1ce, May 01 '16 at 16:24

Trevor Daniels · Answer 1 · 2016-05-16T05:19:16.077

As stated in google's docs https://developers.google.com/recaptcha/docs/verify

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.

score -3 · Answer 2 · answered Jun 02 '22 at 04:29

-3

If you get a cors error when trying to sign in with recaptcha, it could be that your backend server deployment is down.

answered Jun 02 '22 at 04:29

Joel Rajesh

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 02 '22 at 05:52
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31921923) – Zach Jensz Jun 04 '22 at 13:55

Google reCAPTCHA, 405 error and CORS issue

2 Answers2

Related