Créer une simple captcha avec angularJS

Mezgani said _ Fondateur et Développeur du blog

Ajouter par SAID MEZGANI le 29-05-2019

Partager

279 Vues
AngularJs, Captcha
Solutions techniques

Vous développez une application en Angular JS/Web API et vous devez protéger votre application de potentiels bots, spams ou abus ?

index.html

 <div ng-controller="Ctrl">     A simple captcha directive in AngularJS     <br><br>     <simple-captcha valid="captchaValid"></simple-captcha>     <br><br>     <div>valid: {{captchaValid}}</div> </div>

Script.js

 var app = angular.module('app', []);  app.controller('Ctrl', function($scope){      });  app.directive('simpleCaptcha', function() {     return {         restrict: 'E',         scope: { valid: '=' },         template: '<input ng-model="a.value" ng-show="a.input" style="width:2em; text-align: center;"><span ng-hide="a.input">{{a.value}}</span> {{operation}} <input ng-model="b.value" ng-show="b.input" style="width:2em; text-align: center;"><span ng-hide="b.input">{{b.value}}</span> = {{result}}',         controller: function($scope) {                          var show = Math.random() > 0.5;                          var value = function(max){                 return Math.floor(max * Math.random());             };                          var int = function(str){                 return parseInt(str, 10);             };                          $scope.a = {                 value: show? undefined : 1 + value(4),                 input: show             };             $scope.b = {                 value: !show? undefined : 1 + value(4),                 input: !show             };             $scope.operation = '+';                          $scope.result = 5 + value(5);                          var a = $scope.a;             var b = $scope.b;             var result = $scope.result;                          var checkValidity = function(){                 if (a.value && b.value) {                     var calc = int(a.value) + int(b.value);                     $scope.valid = calc == result;                 } else {                     $scope.valid = false;                 }                 $scope.$apply(); // needed to solve 2 cycle delay problem;             };                                       $scope.$watch('a.value', function(){                     checkValidity();             });                          $scope.$watch('b.value', function(){                     checkValidity();             });                                                }     }; });

https://www.nglesson.com

Ajouter par SAID MEZGANI le 29-05-2019

Partager

Solutions techniques

Défilement fluide (scroll) vers un ID

Solutions techniques

Comment installer FOSUserBundle avec Symfony 4

Solutions techniques

Tâches cron

Solutions techniques

Comment démarrer un projet Symfony 4 en 5 minutes

Solutions techniques

Utilisation de JavaScript pour sélectionner du texte

Solutions techniques

Ajouter un Commentaire

Vous voulez donner votre avis ou apporter une précision ? Laisse-moi un commentaire !
Si vous avez un problème particulier à résoudre, laissez un commentaire et attendez une réponse rapide par des professionnelles.

Votre adresse email ne sera pas publiée, tous les champs sont obligatoires.

J’ai lu et j’accepte les Conditions d’utilisation, notamment la mention relative à la protection des données personnelles. Conformément à la loi 09-08, vous disposez d'un droit d'accès, de rectification et d'opposition au traitement de vos données personnelles. Ce traitement est en cours d'autorisation auprès de la CNDP.

Résulat valider Résulat non valider {{ champsoblg }}

0 Commentaire

L'auteur du blog

Créatif
Ingénieur
Freelance

Citation du jour

Dans la vie, rien n'est à craindre, tout est à comprendre.

Formation en développement web compléte

Articles Récentes

Solutions techniques

Défilement fluide (scroll) vers un ID

Contactez-moi

Solutions techniques

Créer une simple captcha avec angularJS