send reCaptcha v3 response by angularjs to php api

Question

currently I am using angular 8.1.2 with php 7.2, codeigniter, For google recaptcha when I am submitting the login form, The login form is pickingup the form details but it is not picking up the Google recaptch response. Request you to please guide what is the miising point because of which I am unable to see the recatcha scren

HEADER

<script src="https://www.google.com/recaptcha/api.js?render=KEY____"></script>
    <script>
    grecaptcha.ready(function() {
        grecaptcha.execute('KEY____', {action: 'loginpage'}).then(function(token) {
          var recaptchaResponse = document.getElementById('recaptchaResponse');
          recaptchaResponse.value = token;
          recaptchaResponse.setAttribute("ng-model", "log.recaptcha_response='"+token+"'");
        });
    });
    </script>

HTML CODE

<div ng-app="seller_Reg" class="w-100">
   <form name="sellerLogin" ng-submit="loginData()" ng-controller="sellerLoginCtrl" novalidate>
      <div class="form-group">
        <label for="email">Email Address *</label>
        <input type="email" name="email" class="form-control" ng-model="log.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" ng-required="true" required>
        <span class="text-danger small" ng-show="sellerLogin.email.$error.pattern">Email address is invalid</span>
        <span class="text-danger small" ng-show="sellerLogin.email.$touched && sellerLogin.email.$error.required">Please Enter Email Address</span>
                                </div>
         <div class="form-group">
           <label for="password">Password *</label>
           <input type="password" name="password" class="form-control" ng-model="log.password"  ng-minlength="5" required>
           <span class="text-danger small" ng-show="sellerLogin.password.$touched && sellerLogin.password.$error.required">Please Enter Password</span>
           <span class="text-danger small" ng-if="sellerLogin.password.$error.minlength">Passwords must be at least 6 characters.</span>
           </div>
        <p class="small text-right"><a href="'.base_url('seller/forgot-password/').'" class="text-primary">Forgot Password</a></p>
    <div class="form-group">
        <input type="text" name="recaptcha_response" ng-model="log.recaptcha_response" ng-show="false" id="recaptchaResponse">
        <input type="submit" class="md-btn md-btn-success" ng-disabled="sellerLogin.$invalid" name="" value="Login Now">
    </div>
   </form>
</div>

ANGULAR CODE

app.controller("sellerLoginCtrl", function($scope, $http) {
  $scope.log = {};
  $scope.loginData = function(){
    $http({
      method: 'POST',
      url: 'login/login-verify',
      data: $scope.log,
    }).then(function(result){
      if (result.data.status == true) {
        window.location.href = result.data.url;
      }else {
        document.getElementById('result').innerHTML = '<div class="alert alert-danger">' + result.data.text + '</div>';
      }
    });
  }
});

RESULT

Array
(
    [email] => [email protected]
    [password] => *******
)

EXPECTED

Array
(
    [email] => [email protected]
    [password] => *******
    [recaptcha_response] => something
)

Piyush Akotkar · Accepted Answer · 2019-07-27 10:24:57Z

2

Remove recaptcha script from header, and put it on angular code like below.

app.controller("sellerLoginCtrl", function($scope, $http) {
 grecaptcha.ready(function() {
  grecaptcha.execute('KEY____', {action: 'loginpage'}).then(function(token) {
   $scope.log.recaptcha_response = token;
  });
 });
 $scope.log = {};
  $scope.loginData = function(){
    $http({
      method: 'POST',
      url: 'login/login-verify',
      data: $scope.log,
    }).then(function(result){
      if (result.data.status == true) {
        window.location.href = result.data.url;
      }else {
        document.getElementById('result').innerHTML = '<div class="alert alert-danger">' + result.data.text + '</div>';
      }
    });
  }
});

answered Jul 27, 2019 at 10:24

Piyush Akotkar

361 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

send reCaptcha v3 response by angularjs to php api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related