通过 angularjs 将 reCaptcha v3 响应发送到 php api答案

【问题标题】：send reCaptcha v3 response by angularjs to php api通过 angularjs 将 reCaptcha v3 响应发送到 php api
【发布时间】：2019-12-04 21:18:02
【问题描述】：

目前我正在使用 angular 8.1.2 和 php 7.2，codeigniter，当我提交登录表单时，对于 google recaptcha，登录表单正在获取表单详细信息，但它没有获取 Google recaptch 响应。请您指导我看不到recatcha屏幕的错误点是什么

标题

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

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

角码

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

结果

Array
(
    [email] => example@gmail.com
    [password] => *******
)

预期

Array
(
    [email] => example@gmail.com
    [password] => *******
    [recaptcha_response] => something
)

【问题讨论】：

标签： javascript php angularjs

【解决方案1】：

从标头中删除 recaptcha 脚本，并将其放在下面的角度代码中。

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

【讨论】：