javascript - 通过 angularjs 将 reCaptcha v3 响应发送到 php api

Question

目前我正在使用 angular 8.1.2 和 php 7.2，codeigniter，当我提交登录表单时用于 google recaptcha，登录表单正在获取表单详细信息，但它没有获取 Google recaptch 响应。求大神指点，看不到recatcha screen的miising point是什么

标题

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

Angular 代码

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
)

Answer 1

从 header 中删除 recaptcha 脚本，并将其放在 Angular 代码中，如下所示。

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