Protéger votre application Angular JS/Web API des bots !

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

De nombreuses solutions existent, Notamment la très populaire reCAPTCHA !

reCAPTCHA

Qu'est ce que c'est ?

C'est un service proposé et fourni par la célèbre firme Américaine Google. Comme son nom l'indique, le service repose sur un captcha.

Un captcha est un ensemble de test "défi-réponse" utilisé en informatique, dans le but de s'assurer qu'une réponse n'est pas générée par un ordinateur.

Comment l'intégrer ?

  1. Rendez-vous sur le site de l'API : https://www.google.com/recaptcha/intro/index.html
  2. Cliquez sur le bouton "Get reCAPTCHA" en haut à droite de la page
  3. Enregistrez votre site
  4. Récupérez la clé publique (Clé du site) ainsi que la clé privé (Clé secrète)

Je vous conseille de générer un couple clé publique/privé par environnement.
En effet, un module de statistique est disponible pour chaque couple. Vous pourrez alors visualiser les informations d'utilisation de votre captcha par environnement.

À noter que la clé publique sera utilisée côté client afin d’appeler le service reCAPTCHA, et la clé privé va nous permettre de vérifier la réponse de l'utilisateur côté serveur.

Intégration dans votre application

Maintenant que vous avez activé le service reCAPTCHA, vous allez pouvoir utiliser dans votre application.

Afin de l'intégrer côté client, vous allez utiliser la librairie angular-recatpcha qui va vous permettre de faciliter l'intégration du service reCAPTCHA dans votre application Angular JS.

Intégration côté client

Avant de pouvoir utiliser la librairie angular-recaptcha, ajoutez la ligne suivante dans votre index.html :

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

La ligne de code précédente nous permet d'intégrer le service reCAPTCHA dans votre application.

Il ne vous reste plus qu'à utiliser la librairie angular-recaptcha. Ci-dessous les étapes à suivre :

  1. Ajoutez la librairie
    bower install --save angular-recaptcha
  2. Ajoutez les scripts
    <script type="text/javascript" src="angular-recaptcha.js"></script>

     

  3. Ajoutez le module
    var app = angular.module('myApp', ['vcRecaptcha']);

     

  4. Ajoutez le captcha dans votre page
        <div
            vc-recaptcha
            ng-model="gRecaptchaResponse"
            on-create="setWidgetId(widgetId)"
            on-success="setResponse(response)"
            on-expire="cbExpiration()"
            theme="---- light or dark ----"
            size="---- compact or normal ----"
            type="'---- audio or image ----'"
            key="'---- YOUR PUBLIC KEY GOES HERE ----'"
            lang="---- language code ----"
        ></div>

    Attention à bien garder le widgetId de votre captcha (à vous de redéfinir la fonction setWidgetId() ). En effet la validation de la réponse du captcha (côté serveur) ne peut être vérifié qu'une seule fois. La librairie permet de recharger un nouveau captcha très simplement

    vcRecaptchaService.reload(vm.widgetId);

     

  5. vcRecaptchaServiceProvider
        myApp.config(captcha);
    
        function captcha(vcRecaptchaServiceProvider, env) {
            vcRecaptchaServiceProvider.setSiteKey(env.siteKeyCaptcha);
            vcRecaptchaServiceProvider.setTheme('light');
            vcRecaptchaServiceProvider.setSize('normal');
            vcRecaptchaServiceProvider.setType('image');
            vcRecaptchaServiceProvider.setLang('fr');
        }

    Tous vos captchas dans votre application auront par défaut les informations définies. Ainsi vous n'aurez pas à réécrire à chaque fois la clé publique à utiliser, de plus si vous utilisez plusieurs captchas, vous êtes sûr qu'ils utiliseront bien tous la même clé !

Intégration côté serveur

C'est ici que nous allons protéger notre Web Service.

En effet, à l'aide de la réponse récupérer à la résolution du captcha par l'utilisateur et de notre clé privé, nous allons pouvoir interroger l'API de google et ainsi pouvoir vérifier que l'utilisateur a correctement répondu.

Pour cela une simple requête POST avec les paramètres suivants :

URL : https://www.google.com/recaptcha/api/siteverify?

secret (obligatoire) Votre clé privé
response (obligatoire) La valeur de la réponse (ng-model)
remoteip (optionel) Adresse IP de l'utilisateur final

Conclusion

Le service proposé par Google est vraiment très simple à utiliser et à intégrer dans une application Angular JS.  De plus le module de statistiques, disponible depuis la page d'administration de l'API apporte des métriques supplémentaires à notre application (rapport réussites/échecs du captcha, etc...) ainsi que la possibilité de faire évoluer le niveau de sécurité (Rubrique Paramètres avancés -> Préférences en matière de sécurité).

Cette technologie est utilisée par Google lui-même, mais aussi par Facebook et bien d’autres sites Web.

Cette technologie est vraiment une trés bonne solution afin de se protéger contre les spams et les abus

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *