Лучший способ интегрировать captcha в angularJS

Question

Я относительно новичок в angularJS, и мне интересно, что было бы самым чистым решением для следующей проблемы. Скажем, у меня есть форма, такие как следует

<form name="contactform"> 
    <select id="salutation" name="salutation" required="true" ng-model="contactRequest.salutation"><option value="Herr" selected="">Herr</option><option value="Frau">Frau</option></select> 

    <img width="255" height="70" alt="" src="/website/var/tmp/aed4d639a26c4614cdac2a967381c61c.png" name="captcha[img]"> 

    <captcha-reloader reload-url="/refresh-captcha" img-tag-name="captcha[img]" hidden-field-name="captcha[id]"></captcha-reloader> 

    <input type="text" name="captcha[input]" required="true" ng-model="contactRequest.captcha.input">     

    <input type="text" style="display: none;" ng-model="contactRequest.captcha.id" value="aed4d639a26c4614cdac2a967381c61c" name="captcha[id]"> 
... 

Как вы можете видеть, он использует директиву для отображения кнопки, которая будет перезагрузить CAPTCHA. Он определяется как

myApp.directive('captchaReloader', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      reloadUrl: '@', 
      imgTagName: '@', 
      hiddenFieldName: '@' 
     }, //isolate scope 
     template: '<a href="" ng-click="reloadCaptcha()" class="captcha-reload"></a>', 
     link: function (scope, element, attrs) { 

     }, 
     controller: function ($scope, $element, $attrs, $http) { 
      $scope.reloadCaptcha = function() { 
       $http.get($attrs.reloadUrl).then(function (res) { 
        angular.element('img[name="' + $attrs.imgTagName + '"]').attr('src', res.data.imgSrc); 
        angular.element('input[name="' + $attrs.hiddenFieldName + '"]').val(res.data.id); 
        angular.element('input[name="' + $attrs.hiddenFieldName + '"]').trigger('input'); 
       }); 
      }; 
     } 
    }; 
)}; 

Если я нажму на кнопку, изображение и значение с капчей (скрытое поле) будут обновлены. Пока это работает.

Теперь я хочу обрабатывать представление формы в контроллере (см. Ниже метод). Если есть ошибка (проверка на стороне сервера), необходимо изменить код. Я не знаю, как лучше всего запускать обновленный процесс, определенный в директиве. Может ли кто-нибудь помочь?

myApp.controller('KontaktCtrl', function ($scope, $location, CustomerDataService, CaptchaService) { 
    $scope.contactRequest = { 
     salutation: 'Herr', 
     captcha: { 
      id: initialCaptchaId 
     } 
    }; 
    $scope.errors = {}; 

    $scope.submitAction = function() { 
     CustomerDataService.sendRequest($scope.contactRequest).then(function (res) { 
      var data = res.data; 
      if (res.data.data !== null) { //errors in form. Display them 
       //error handling 
       $scope.reloadCaptcha(); 
      } else { 
       goToHomeView(); 
      } 
     }, function (error) { 
      console.log('An error occurred while updating!', error); 
     }); 
    }; 


    var goToHomeView = function() { 
     $location.path('/'); 
    }; 
}); 

Кроме того, я должен инициализировать значение выбора коробки и искаженным, вызываю в противном случае они не отправляются (потому что не трогает). Есть ли способ избежать этого?

PS: Я нашел директиву reCAPTCHA, но reCAPTCHA не является вариантом из-за ограничений стиля.

Answer 1

Его очень просто следуйте инструкциям ...

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
async defer></script> 

<script> 
    var onloadCallback = function() { 
     widgetId1 = grecaptcha.render('example1', { 
      'sitekey' : 'Site-Key-', 
      'theme' : 'light' 
     }); 
    }; 
</script> 
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
async defer> 

Теперь в форме положить его

<div id="example1"></div> 
<p style="color:red;">{{ captcha_status }}</p> 

Validate с угловой

if(grecaptcha.getResponse(widgetId1)==''){ 
    $scope.captcha_status='Please verify captha.'; 
    return; 
}