Add reCaptcha (issue #56)

Leonardo Merlin · Evandro Junior
1 parent 1bd18994
Showing 12 changed files with 153 additions and 131 deletions Show diff stats
bower.json
src/app/components/proposal-box/proposal-box.directive.js
src/app/components/proposal-box/proposal-box.html
src/app/index.constants.js
src/app/index.module.js
src/app/pages/auth/auth.controller.js
src/app/pages/auth/recover.html
src/app/pages/auth/resend-confirmation.html
src/app/pages/auth/signin.html
src/app/pages/duvidas/duvidas.controller.js
src/app/pages/duvidas/duvidas.html
src/index.html
@@ -7,6 +7,7 @@
     "angular-breadcrumb": "~0.4.1",
     "angular-cookies": "~1.4.0",
     "angular-messages": "ng-messages#*",
+    "angular-recaptcha": "~2.2.5",
     "angular-sanitize": "~1.4.0",
     "angular-slugify": "~1.0.1",
     "angular-socialshare": "angularjs-socialshare#~0.1.13",
@@ -9,21 +9,23 @@
   function proposalBox() {
     /** @ngInject */
-    function ProposalBoxController($scope, $location, $rootScope, $state, $timeout, $interval, $window, VOTE_STATUS, VOTE_OPTIONS, AuthService, DialogaService, $log) {
+    function ProposalBoxController($scope, $location, $rootScope, $state, $timeout, $interval, $window, APP, VOTE_STATUS, VOTE_OPTIONS, AuthService, DialogaService, vcRecaptchaService, $log) {
       $log.debug('ProposalBoxController');
       var vm = this;
       vm.$scope = $scope;
+      vm.$location = $location;
       vm.$rootScope = $rootScope;
       vm.$state = $state;
       vm.$timeout = $timeout;
       vm.$interval = $interval;
       vm.$window = $window;
+      vm.APP = APP;
       vm.VOTE_STATUS = VOTE_STATUS;
       vm.VOTE_OPTIONS = VOTE_OPTIONS;
       vm.AuthService = AuthService;
+      vm.vcRecaptchaService = vcRecaptchaService;
       vm.$log = $log;
-      vm.$location = $location;
       vm.init();
       vm.addListeners();
@@ -39,6 +41,8 @@
       vm.STATE = null;
       vm.errorOnSkip = false;
       vm.showCaptchaForm = null;
+      vm.recaptchaWidgetId = null;
+      vm.recaptchaResponse = null;
       vm.voteProposalRedirectURI = null;
       vm.proposalsImg = null;
@@ -86,20 +90,27 @@
         vm.messageCode = data.code;
       });
-      // Load captcha
-      var stop = null;
-      stop = vm.$interval(function() {
-        var $el = angular.element('#serpro_captcha');
-
-        if ($el && $el.length > 0) {
-          vm.$window.initCaptcha($el[0]);
-          vm.$interval.cancel(stop);
-          stop = undefined;
-        }else {
-          vm.$log.debug('captcha element not found.');
-        }
-
-      }, 10);
+      // reCaptcha Listeners
+      vm.setWidgetId = function(widgetId) {
+        // store the `widgetId` for future usage.
+        // For example for getting the response with
+        // `recaptcha.getResponse(widgetId)`.
+        vm.$log.info('Created widget ID:', widgetId);
+        vm.recaptchaWidgetId = widgetId;
+        
+      };
+
+      vm.setResponse = function(response) {
+        
+        // Update local captcha response
+        vm.$log.debug('Response available', response);
+        vm.recaptchaResponse = response;
+      };
+
+      vm.cbExpiration = function() {
+        // reset the 'response' object that is on scope 
+        vm.$log.debug('cbExpiration');
+      };
     };
     ProposalBoxController.prototype.canVote = function() {
@@ -113,12 +124,10 @@
       var target = $event.target;
       var $target = angular.element(target);
-      var $captcha = $target.find('[name="txtToken_captcha_serpro_gov_br"]');
       vm.sendingCaptcha = true;
       vm.AuthService.loginCaptcha({
-        captcha_text: captchaForm.captcha_text.$modelValue,
-        txtToken_captcha_serpro_gov_br: $captcha.val()
+        recaptcha_response: vm.recaptchaResponse
       }).then(function(data) {
         // SUCCESS
         vm.$log.debug('register success.data', data);
@@ -131,22 +140,23 @@
         // hide captcha form
         vm.showCaptchaForm = false;
-      }, function(data) {
+      })
+      .catch(function(data) {
         // ERROR
         vm.$log.debug('register error.data', data);
-        vm.sendingCaptchaError = {
-          code: data.status,
-          message: data.message || ('Erro (' + data.status + '). Já estamos trabalhando para resolver o problema.<br/>Por favor, tente novamente mais tarde')
-        };
+        // In case of a failed validation you need to reload the captcha
+        // because each response can be checked just once
+        vm.vcRecaptchaService.reload(vm.recaptchaWidgetId);
+
+        vm.sendingCaptchaError = {};
+        vm.sendingCaptchaError.code = data.status;
+        vm.sendingCaptchaError.message = data.message || ('Erro (' + data.status + '). Já estamos trabalhando para resolver o problema.<br/>Por favor, tente novamente mais tarde');
         if (angular.equals(vm.sendingCaptchaError.message, 'Internal captcha validation error')) {
           vm.sendingCaptchaError.message = 'Erro interno ao tentar validar captcha.<br/><br/>Já estamos trabalhando para resolver o problema.<br/>Por favor, tente novamente mais tarde.';
         }
-      }, function(data) {
-        // UPDATE
-        vm.$log.debug('register update.data', data);
       }).finally(function() {
         vm.sendingCaptcha = false;
       });
@@ -161,11 +171,10 @@
       vm.message = null;
       // reload new captcha
-      var $el = angular.element('#serpro_captcha');
-      vm.$window.reloadCaptcha($el[0]);
+      vm.vcRecaptchaService.reload(vm.recaptchaWidgetId);
       // focus on input
-      angular.element('#captcha_text').val('').focus();
+      // angular.element('#captcha_text').val('').focus();
     };
     ProposalBoxController.prototype.vote = function(value) {
@@ -93,12 +93,14 @@
                   <div ng-hide="vm.sendingCaptchaError">
                     <form name="captchaForm" ng-submit="vm.submitCaptcha($event, captchaForm)">
                       <div class="form-group">
-                        <div id="serpro_captcha" class="captcha"></div>
-                        <div class="captcha">Digite os caracteres acima:</div>
-                        <div class="captcha">
-                          <input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="vm._captcha_text" ng-minlength="" ng-maxlength="" required>
-                          <validation-messages field="captchaForm.captcha_text"></validation-messages>
-                        </div>
+                        <div
+                          vc-recaptcha
+                          theme="'light'"
+                          key="vm.APP.recaptcha_key"
+                          on-create="vm.setWidgetId(widgetId)"
+                          on-success="vm.setResponse(response)"
+                          on-expire="vm.cbExpiration()"
+                        ></div>
                       </div>
                       <div class="form-group">
                         <button  type="submit" class="btn btn-lg btn-block btn-submit">Enviar</button>
@@ -11,6 +11,7 @@
     .constant('APP', {
       facebook_app_id: '1',
       google_app_id: '4',
+      recaptcha_key: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
     })
     .constant('API', {
       token: null,
@@ -2,6 +2,6 @@
   'use strict';
   angular
-    .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'ngStorage', '720kb.socialshare', 'slugifier', 'ncy-angular-breadcrumb', 'ngMessages']);
+    .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'ngStorage', '720kb.socialshare', 'slugifier', 'ncy-angular-breadcrumb', 'ngMessages', 'vcRecaptcha']);
 })();
@@ -6,7 +6,7 @@
     .controller('AuthPageController', AuthPageController);
   /** @ngInject */
-  function AuthPageController($scope, $rootScope, $window, $location, $state, $timeout, $interval, APP, AUTH_EVENTS, AuthService, DialogaService, Session, $log) {
+  function AuthPageController($scope, $rootScope, $window, $location, $state, $timeout, $interval, APP, AUTH_EVENTS, AuthService, DialogaService, Session, vcRecaptchaService, $log) {
     var vm = this;
     vm.$scope = $scope;
@@ -21,6 +21,7 @@
     vm.AuthService = AuthService;
     vm.DialogaService = DialogaService;
     vm.Session = Session;
+    vm.vcRecaptchaService = vcRecaptchaService;
     vm.$log = $log;
     vm.init();
@@ -42,6 +43,8 @@
     vm.loadingTerms = null;
     vm.delay = 3; // segundos
     vm.countdown = 0;
+    vm.recaptchaResponse = null;
+    vm.recaptchaWidgetId = null;
     vm.search = vm.$location.search();
     var redirect = vm.search.redirect_uri || '';
@@ -62,7 +65,6 @@
     vm.$scope.$on(vm.AUTH_EVENTS.logoutSuccess, function() {
       vm.clearMessages();
       vm.currentUser = vm.Session.getCurrentUser();
-      vm._attachCaptcha();
     });
   };
@@ -104,7 +106,7 @@
       var private_token = response.data.private_token;
       // Garante que o 'user' sempre terá a propriedade 'private_token'
-      if(response.data.user && !response.data.user.private_token){
+      if (response.data.user && !response.data.user.private_token) {
         response.data.user.private_token = private_token;
       }
@@ -117,23 +119,27 @@
       }
     });
-    vm._attachCaptcha();
-  };
-
-  AuthPageController.prototype._attachCaptcha = function() {
-    var vm = this;
-
-    var stop = null;
-    stop = vm.$interval(function() {
-      var $el = angular.element('#serpro_captcha');
+    // reCaptcha Listeners
+    vm.setWidgetId = function(widgetId) {
+      // store the `widgetId` for future usage.
+      // For example for getting the response with
+      // `recaptcha.getResponse(widgetId)`.
+      vm.$log.info('Created widget ID:', widgetId);
+      vm.recaptchaWidgetId = widgetId;
+      
+    };
-      if ($el && $el.length > 0) {
-        vm.$window.initCaptcha($el[0]);
-        vm.$interval.cancel(stop);
-        stop = undefined;
-      }
+    vm.setResponse = function(response) {
+      
+      // Update local captcha response
+      vm.$log.debug('Response available', response);
+      vm.recaptchaResponse = response;
+    };
-    }, 200);
+    vm.cbExpiration = function() {
+      // reset the 'response' object that is on scope 
+      vm.$log.debug('cbExpiration');
+    };
   };
   AuthPageController.prototype.onClickLogout = function() {
@@ -145,8 +151,8 @@
   AuthPageController.prototype.submitSignup = function($event, credentials) {
     var vm = this;
-    credentials.txtToken_captcha_serpro_gov_br = getCaptchaValFromEvent($event);
-
+    credentials.recaptcha_response = vm.recaptchaResponse;
+    
     vm.AuthService.register(credentials)
     .then(function(/*response*/) {
       // SUCCESS
@@ -154,14 +160,12 @@
       vm.signupSuccess = true;
       // vm._startRedirect();
-    }, function(response) {
-      // ERROR
-
-      // TODO: mensagens de erro
-      // TODO: tratar multiplos erros
-
-      // javascript_console_message: "Unable to reach Serpro's Captcha validation service"
-      // message: "Internal captcha validation error"
+    })
+    .catch(function(response) {
+      
+      // In case of a failed validation you need to reload the captcha
+      // because each response can be checked just once
+      vm.vcRecaptchaService.reload(vm.recaptchaWidgetId);
       vm.signupError = true;
       vm.signupErrorTitle = 'Erro!';
@@ -179,6 +183,9 @@
       if (response.status >= 500 && response.status < 600) {
         vm.internalError = true;
       }
+    })
+    .finally(function(){
+      // vm.loadingSubmit = false;
     });
   };
@@ -220,8 +227,7 @@
     // get form data
     var data = {
       login: recoverForm.login.$modelValue,
-      captcha_text: recoverForm.captcha_text.$modelValue,
-      txtToken_captcha_serpro_gov_br: getCaptchaValFromEvent($event)
+      recaptcha_response: vm.recaptchaResponse
     };
     var promiseRequest = vm.AuthService.forgotPassword(data);
@@ -265,12 +271,10 @@
     // get form data
     var data = {
       login: confirmationForm.login.$modelValue,
-      captcha_text: confirmationForm.captcha_text.$modelValue,
-      txtToken_captcha_serpro_gov_br: getCaptchaValFromEvent($event)
+      recaptcha_response: vm.recaptchaResponse
     };
     // get captcha token
-
     vm.AuthService.resendConfirmation(data)
     .then(function(response) {
       vm.$log.debug('resendConfirmation success.response', response);
@@ -287,7 +291,8 @@
         vm.resendConfirmationSuccessMessage = 'Em instantes você receberá em seu e-mail um link para confirmar o seu cadastro.';
       }
-    }, function(response) {
+    })
+    .catch(function(response) {
       vm.$log.debug('resendConfirmation error.response', response);
       vm.resendConfirmationError = true;
@@ -300,8 +305,9 @@
       if (response.status >= 500 && response.status < 600) {
         vm.internalError = true;
       }
-    }).catch(function(error) {
-      vm.$log.debug('resendConfirmation catch.error', error);
+    })
+    .finally(function() {
+      
     });
   };
@@ -382,8 +388,4 @@
     var url = 'http://login.dialoga.gov.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=' + vm.APP.google_app_id;
     vm.$window.oauthClientAction(url);
   };
-
-  function getCaptchaValFromEvent($event) {
-    return angular.element($event.target).find('[name="txtToken_captcha_serpro_gov_br"]').val();
-  }
 })();
@@ -48,15 +48,14 @@
 										<validation-messages field=" recoverPassForm.login"></validation-messages>
 									</div>
 									<div class="form-group">
-										<div id="serpro_captcha" class="captcha">
-										</div>
-										<div class="captcha">
-											Digite os caracteres acima:
-										</div>
-										<div class="captcha">
-											<input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="pageAuth.signup.captcha_text" ng-minlength="" ng-maxlength="" required>
-											<validation-messages field="recoverPassForm.captcha_text"></validation-messages>
-										</div>
+				                        <div
+				                          vc-recaptcha
+				                          theme="'light'"
+				                          key="pageAuth.APP.recaptcha_key"
+				                          on-create="pageAuth.setWidgetId(widgetId)"
+				                          on-success="pageAuth.setResponse(response)"
+				                          on-expire="pageAuth.cbExpiration()"
+				                        ></div>
 									</div>
 									<div class="form-group">
 										<button class="btn btn-lg btn-submit" type="submit">Solicitar alteração de senha</button>
@@ -60,14 +60,14 @@
 										<validation-messages field=" confirmationForm.login"></validation-messages>
 									</div>
 									<div class="form-group">
-										<div id="serpro_captcha" class="captcha"></div>
-										<div class="captcha">
-											Digite os caracteres acima:
-										</div>
-										<div class="captcha">
-											<input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="pageAuth.signup.captcha_text" ng-minlength="" ng-maxlength="" required>
-											<validation-messages field="confirmationForm.captcha_text"></validation-messages>
-										</div>
+										<div
+											vc-recaptcha
+											theme="'light'"
+											key="pageAuth.APP.recaptcha_key"
+											on-create="pageAuth.setWidgetId(widgetId)"
+											on-success="pageAuth.setResponse(response)"
+											on-expire="pageAuth.cbExpiration()"
+										></div>
 									</div>
 									<div class="form-group">
 										<button class="btn btn-lg btn-submit" type="submit">Solicitar novo e-mail de confirmação</button>
@@ -247,15 +247,14 @@
                   <validation-messages field="signupForm.user_terms_accepted"></validation-messages>
                 </div>
                 <div class="form-group">
-                  <div id="serpro_captcha" class="captcha">
-                  </div>
-                  <div class="captcha">
-                    Digite os caracteres acima:
-                  </div>
-                  <div class="captcha">
-                    <input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="pageAuth.signup.captcha_text" ng-minlength="" ng-maxlength="" required>
-                    <validation-messages field="signupForm.captcha_text"></validation-messages>
-                  </div>
+                  <div
+                    vc-recaptcha
+                    theme="'light'"
+                    key="pageAuth.APP.recaptcha_key"
+                    on-create="pageAuth.setWidgetId(widgetId)"
+                    on-success="pageAuth.setResponse(response)"
+                    on-expire="pageAuth.cbExpiration()"
+                  ></div>
                 </div>
                 <div class="form-group">
                   <button  type="submit" class="btn btn-lg btn-block btn-submit" ng-class=" {'disabled' : !pageAuth.signup.user_terms_accepted }">Cadastrar</button>
@@ -6,14 +6,16 @@
     .controller('DuvidasPageController', DuvidasPageController);
   /** @ngInject */
-  function DuvidasPageController(DialogaService, $interval, $window, $log) {
+  function DuvidasPageController(DialogaService, APP, $interval, $window, vcRecaptchaService, $log) {
     $log.debug('DuvidasPageController');
     var vm = this;
     vm.DialogaService = DialogaService;
+    vm.APP = APP;
     vm.$interval = $interval;
     vm.$window = $window;
+    vm.vcRecaptchaService = vcRecaptchaService;
     vm.$log = $log;
     vm.init();
@@ -28,6 +30,8 @@
     vm.error = false;
     vm.sendingContactForm = false;
     vm.questions = [];
+    vm.recaptchaResponse = null;
+    vm.recaptchaWidgetId = null;
   };
@@ -51,23 +55,27 @@
   DuvidasPageController.prototype.attachListeners = function () {
     var vm = this;
-    vm._attachCaptcha();
-  };
-
-  DuvidasPageController.prototype._attachCaptcha = function() {
-    var vm = this;
-
-    var stop = null;
-    stop = vm.$interval(function(){
-      var $el = angular.element('#serpro_captcha');
+    // reCaptcha Listeners
+    vm.setWidgetId = function(widgetId) {
+      // store the `widgetId` for future usage.
+      // For example for getting the response with
+      // `recaptcha.getResponse(widgetId)`.
+      vm.$log.info('Created widget ID:', widgetId);
+      vm.recaptchaWidgetId = widgetId;
+      
+    };
-      if ($el && $el.length > 0 ){
-        vm.$window.initCaptcha($el[0]);
-        vm.$interval.cancel(stop);
-        stop = undefined;
-      }
+    vm.setResponse = function(response) {
+      
+      // Update local captcha response
+      vm.$log.debug('Response available', response);
+      vm.recaptchaResponse = response;
+    };
-    }, 200);
+    vm.cbExpiration = function() {
+      // reset the 'response' object that is on scope 
+      vm.$log.debug('cbExpiration');
+    };
   };
   DuvidasPageController.prototype.submitContactForm = function ($event, contactForm) {
@@ -82,11 +90,8 @@
       subject: contactForm.inputSubject.$modelValue,
       message: contactForm.inputMessage.$modelValue
     };
-    
-    var target = $event.target;
-    var $target = angular.element(target);
-    var $captcha = $target.find('[name="txtToken_captcha_serpro_gov_br"]');
-    data.txtToken_captcha_serpro_gov_br = $captcha.val();
+
+    data.recaptcha_response = vm.recaptchaResponse;
     vm.DialogaService.sendContactForm(data)
     .then(function(response){
@@ -89,12 +89,14 @@
 								<div class="col-sm-4 form-group pull-right">
 									<div class="form-group">
-										<div id="serpro_captcha" class="captcha"></div>
-										<div class="captcha">Digite os caracteres acima:</div>
-										<div class="captcha">
-											<input type="text" name="captcha_text" id="captcha_text" aria-label="Escreva os caracteres do captcha aqui" ng-model="pageSignin.signup.captcha_text" ng-minlength="" ng-maxlength="" required>
-											<validation-messages field="contactForm.captcha_text"></validation-messages>
-										</div>
+				                        <div
+				                          vc-recaptcha
+				                          theme="'light'"
+				                          key="pageDuvidas.APP.recaptcha_key"
+				                          on-create="pageDuvidas.setWidgetId(widgetId)"
+				                          on-success="pageDuvidas.setResponse(response)"
+				                          on-expire="pageDuvidas.cbExpiration()"
+				                        ></div>
 									</div>
 									<div class="row" ng-show="pageDuvidas.sendingContactForm">
@@ -25,6 +25,9 @@
     <!-- css files will be automatically insert here -->
     <!-- endinject -->
     <!-- endbuild -->
+
+    <!-- Google reCaptcha -->
+    <script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
   </head>
   <body ng-cloak>
@@ -72,7 +75,6 @@
     <!-- endinject -->
     <!-- endbuild -->
     <script defer="defer" src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>
-    <script defer="defer" src="http://captcha2.servicoscorporativos.serpro.gov.br/js/captcha.serpro.gov.br.js"></script>
     <!-- INJECT-GOOGLE-ANALYTICS -->
   </body>
	@@ -2,6 +2,6 @@		@@ -2,6 +2,6 @@
2	'use strict';	2	'use strict';
3		3
4	angular	4	angular
5	- .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'ngStorage', '720kb.socialshare', 'slugifier', 'ncy-angular-breadcrumb', 'ngMessages']);	5	+ .module('dialoga', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router', 'ngStorage', '720kb.socialshare', 'slugifier', 'ncy-angular-breadcrumb', 'ngMessages', 'vcRecaptcha']);
6		6
7	})();	7	})();