通過angularjs發送reCaptcha v3響應到PHP API

Question

目前，我正在使用Angle 8.1.2和php 7.2，codeigniter，對於Google Recaptcha，當我提交登錄表單時，登錄表單正在獲取表單詳細信息，但未獲取Google Recaptch響應。 要求您請指導什么是切入點，因為這個原因我看不到重新抓屏

標題

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

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