Home » Php » javascript – Recaptcha Missing input response using Angularjs and PHP

javascript – Recaptcha Missing input response using Angularjs and PHP

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am having trouble with recaptcha requests. I am using the vc Recaptcha service for Angular JS with PHP validation. I receive the error ‘missing-input-reponse’ from the reCaptcha object when submitting the form.

The site is built with AngularJS and PHP, I am using a data factory to send requests to the server using the $http object. I am implementing password reset functionality and I want to use reCaptcha on the reset form. This is where I’m having trouble.

The backend is all working properly, it definitely seems to be a problem with the Captcha request. My reCaptcha API codes are working elsewhere on the site but without the AngularJS implementation.

My controller looks like this:

MySite.controller('passwordResetController', function($rootScope, $scope, $window, $location, $routeParams, Data, vcRecaptchaService) {
    $rootScope.showControls = false;
    $scope.response = null;
    $scope.widgetId = null;
    $scope.form = {email: '', id: '', response: ''};
    $scope.model = {
        key: // MY SITE KEY //
    };
    $scope.setResponse = function (response) {
        console.info('Response available');
        $scope.response = response;
    };
    $scope.setWidgetId = function (widgetId) {
        console.info('Created widget ID: %s', widgetId);
        $scope.widgetId = widgetId;
    };
    $scope.cbExpiration = function() {
        console.info('Captcha expired. Resetting response object');
        vcRecaptchaService.reload($scope.widgetId);
        $scope.response = null;
     };
    $scope.sendReset = function(form) {
        var valid;
        $scope.form.response = $scope.response;
        console.log($scope.form.response);
        Data.post('/sendreset', {form:form})
        .then(function(results) {
            console.log(results);
            if (results.status === 'success') {
                valid = true;
            } else {
                valid = false;
            }
            Data.toast(results);
        });
        console.log('sending the captcha response to the server', $scope.response);
        if (valid) {
            console.log('Success');
            Data.post('/createRequest', {
                form: form
            }).then(function(results) {
                if (results.status === 'success') {
                    $scope.sendMail(form);
                }
            });
        } else {
            console.log('Failed validation');
            vcRecaptchaService.reload($scope.widgetId);
        }
    }
    $scope.sendMail = function(form) {
        Data.post('/sendPasswordReset', {
            form: form
        }).then(function(results) {
            Data.toast(results);
            if (results.status === 'success') {
                $location.path('login');
            }
        });
    }
});

My PHP validation is:

$app->post('/sendreset', function() use ($app) {
    $r = json_decode($app->request->getBody());
    $post = [
        'secret' => //== MY SECRET KEY ==//,
        'response' => $r->form->response
    ];
    $ch = curl_init('https://www.google.com/recaptcha/api/siteverify');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
    $response = curl_exec($ch);
    curl_close($ch);
    var_dump($response);
    $response = json_decode($response, true);
    // check result
    if (isset($response['success']) && $response['success'] == true) {
        $response['status'] = 'success';
        echoResponse(200, $response);
    } else {
        $response['status'] = 'error';
        $response['message'] = 'Captcha test failed';
        echoResponse(201, $response);
    }
});

The Data functionality is all working properly.
Any help would be hugely appreciated.

How to&Answers:

The response from the server is a string not an array. I changed the controller to search for ‘true’ in the string, works fine now.