Les cookies et le RGPD sur Angular : Tutoriel pour être au top

Dans l’univers numérique d’aujourd’hui, la gestion des cookies et le respect du RGPD sont des aspects cruciaux pour toute application web.

Avec Angular, il est essentiel de mettre en place des solutions robustes pour assurer la conformité aux réglementations en matière de confidentialité des données tout en offrant une expérience utilisateur optimale.

Dans ce tutoriel, nous explorerons l’utilisation de ngx-cookieconsent, un module spécialement conçu pour Angular, pour gérer le consentement aux cookies.

Dépendances

Angular (voir Matrice de compatibilité ci-dessous)
Cookie Consent (requiert Cookie Consent 3 ou supérieur, testé avec 3.1.0)

Début de l’installation la librairie cookies rgpd angular

Installez la dépendance Cookie Consent :

npm install --save cookieconsent

// ou

yarn add cookieconsent

Maintenant, installez ngx-cookieconsent via :

npm install --save ngx-cookieconsent

// ou

yarn add ngx-cookieconsent

Remarque : Si vous utilisez Angular CLI ou Nx CLI pour construire votre application, assurez-vous que cookieconsent est correctement répertorié en tant que bibliothèque globale et en tant que style global.

Pour ce faire, modifiez votre angular.json (ou project.json pour les applications basées sur Nx CLI) comme ceci :

      "scripts": [
        "node_modules/cookieconsent/build/cookieconsent.min.js"
      ],

      "styles": [
        "node_modules/cookieconsent/build/cookieconsent.min.css"
      ],

Configuration

Préparez la configuration :

import {NgcCookieConsentConfig} from 'ngx-cookieconsent';

const cookieConfig:NgcCookieConsentConfig = {
  cookie: {
    domain: 'localhost' // ou 'votre.domaine.com' // il est obligatoire de définir un domaine, pour que les cookies fonctionnent correctement (voir https://goo.gl/S2Hy2A)
  },
  palette: {
    popup: {
      background: '#000'
    },
    button: {
      background: '#f1d600'
    }
  },
  theme: 'edgeless',
  type: 'opt-out'
};

Pour les applications Angular autonomes basées sur l’API

Si vous utilisez l’API autonome Angular pour démarrer votre application, vous pouvez configurer la bibliothèque en tirant parti du nouvel assistant provideNgcCookieConsent(config) (ajouté depuis v5.x.x), comme ceci :

import {provideNgcCookieConsent} from 'ngx-cookieconsent';

//...

bootstrapApplication(AppComponent, {
  providers: [
    provideNgcCookieConsent(cookieConfig),
    // ...
  ]
});

Pour les applications basées sur les modules Angular (ng)

Pour une application Angular traditionnelle basée sur les modules ng, vous devez importer le module de la bibliothèque dans votre module d’application, comme ceci:

import {NgcCookieConsentModule} from 'ngx-cookieconsent';

//...

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Les autres modules de votre application peuvent simplement importer NgcCookieConsentModule :

import {NgcCookieConsentModule} from 'ngx-cookieconsent';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgcCookieConsentModule, ...], 
})
export class OtherModule {
}

Utilisation

Injectez le service NgcCookieContentService dans votre composant principal (c’est-à-dire AppComponent) pour afficher la fenêtre contextuelle de consentement aux cookies après le chargement du composant. Vous n’avez pas besoin d’appeler explicitement sa méthode init() (fait automatiquement lorsque le constructeur du service est appelé lors de l’instanciation par Angular).

De plus, vous pouvez utiliser le service injecté NgcCookieContentService pour mettre à jour la configuration (en utilisant init()), vous abonner aux événements et faire des choses comme désactiver les cookies ou autres.

Voici comment ça fonctionne :

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgcCookieConsentService } from 'ngx-cookieconsent';
import { Subscription }   from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  // Gardez des références aux abonnements pour pouvoir vous désabonner plus tard
  private popupOpenSubscription!: Subscription;
  private popupCloseSubscription!: Subscription;
  private initializingSubscription!: Subscription;
  private initializedSubscription!: Subscription;
  private initializationErrorSubscription!: Subscription;
  private statusChangeSubscription!: Subscription;
  private revokeChoiceSubscription!: Subscription;
  private noCookieLawSubscription!: Subscription;

  constructor(private ccService: NgcCookieConsentService){}

  ngOnInit() {
    // abonnez-vous aux observables cookieconsent pour réagir aux principaux événements
    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
      () => {
        // vous pouvez utiliser this.ccService.getConfig() pour faire des choses...
      });

    this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
      () => {
        // vous pouvez utiliser this.ccService.getConfig() pour faire des choses...
      });

    this.initializingSubscription = this.ccService.initializing$.subscribe(
      (event: NgcInitializingEvent) => {
        // le cookieconsent est en cours d'initialisation... Pas encore sûr d'appeler des méthodes comme `NgcCookieConsentService.hasAnswered()`
        console.log(`initializing: ${JSON.stringify(event)}`);
      });
    
    this.initializedSubscription = this.ccService.initialized$.subscribe(
      () => {
        // le cookieconsent a été initialisé avec succès.
        // Il est maintenant sûr d'utiliser des méthodes sur NgcCookieConsentService qui le nécessitent, comme `hasAnswered()` par exemple...
        console.log(`initialized: ${JSON.stringify(event)}`);
      });

    this.initializationErrorSubscription = this.ccService.initializationError$.subscribe(
      (event: NgcInitializationErrorEvent) => {
        // le cookieconsent n'a pas réussi à s'initialiser... 
        console.log(`initializationError: ${JSON.stringify(event.error?.message)}`);
      });

    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {
        // vous pouvez utiliser this.ccService.getConfig() pour faire des choses...
      });

    this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
      () => {
        // vous pouvez utiliser this.ccService.getConfig() pour faire des choses...
      });

      this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
      (event: NgcNoCookieLawEvent) => {
        // vous pouvez utiliser this.ccService.getConfig() pour faire des choses...
      });
  }

  ngOnDestroy() {
    // désabonnez-vous des observables cookieconsent pour éviter les fuites de mémoire
    this.popupOpenSubscription.unsubscribe();
    this.popupCloseSubscription.unsubscribe();
    this.initializingSubscription.unsubscribe();
    this.initializedSubscription.unsubscribe();
    this.initializationErrorSubscription.unsubscribe();
    this.statusChangeSubscription.unsubscribe();
    this.revokeChoiceSubscription.unsubscribe();
    this.noCookieLawSubscription.unsubscribe();
  }
}

Consultez la Documentation sur le consentement aux cookies pour en savoir plus sur la personnalisation de l’interface utilisateur ou l’interaction avec les utilisateurs.

Support de l’internationalisation (i18n)

Les messages affichés dans la barre de consentement aux cookies peuvent facilement être traduits en utilisant des bibliothèques comme ngx-translate. En gros, cela implique les étapes suivantes (en utilisant ngx-translate + Anglar CLI) :

Installez et configurez ngx-translate
Fournissez les fichiers JSON de traduction dans src/assets/, par exemple : en.json, fr.json, …

{
    "cookie": {
        "header": "Cookies utilisés sur le site Web !",
        "message": "Ce site Web utilise des cookies pour garantir que vous obtenez la meilleure expérience sur notre site Web.",
        "dismiss": "D'accord !",
        "allow": "Autoriser les cookies",
        "deny": "Refuser",
        "link": "En savoir plus",
        "policy": "Politique de cookies"
    }
}

Configurez votre composant principal AppComponent

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private ccService: NgcCookieConsentService, private translateService:TranslateService) {
  }

  ngOnInit() {
    // Support pour les messages de cookies traduits
    this.translateService.addLangs(['en', 'fr']);
    this.translateService.setDefaultLang('en');

    const browserLang = this.translateService.getBrowserLang();
    this.translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');

    this.translateService//
      .get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link', 'cookie.policy'])
      .subscribe(data => {

        this.ccService.getConfig().content = this.ccService.getConfig().content || {} ;
        // Remplacez les messages par défaut par les messages traduits
        this.ccService.getConfig().content.header = data['cookie.header'];
        this.ccService.getConfig().content.message = data['cookie.message'];
        this.ccService.getConfig().content.dismiss = data['cookie.dismiss'];
        this.ccService.getConfig().content.allow = data['cookie.allow'];
        this.ccService.getConfig().content.deny = data['cookie.deny'];
        this.ccService.getConfig().content.link = data['cookie.link'];
        this.ccService.getConfig().content.policy = data['cookie.policy'];

        this.ccService.destroy(); // supprimez la barre de cookies précédente (avec des messages par défaut)
        this.ccService.init(this.ccService.getConfig()); // mettez à jour la configuration avec les messages traduits
      });
  }
}

Support de la mise en page personnalisée

Cookie Consent prend en charge les mises en page personnalisées, tout comme ngx-cookieconsent. Si vous n’êtes pas satisfait de l’apparence par défaut de la barre de cookies, vous pouvez la personnaliser totalement pour mieux répondre à vos besoins. Cela implique de remplacer quelques options :

NgcCookieConsentConfig.layout : pour définir le nom de votre mise en page personnalisée à utiliser. my-custom-layout
NgcCookieConsentConfig.layouts : pour définir votre mise en page HTML personnalisée. Les éléments entre {{ et }} seront remplacés par leur contenu (voir dans [NgcCookieConsentConfig.content ci-dessous)
NgcCookieConsentConfig.elements : éléments HTML référencés dans la mise en page personnalisée (entre {{ et }})
NgcCookieConsentConfig.content : contenu des éléments référencés dans les éléments personnalisés ci-dessus (entre {{ et }})

Voici un exemple d’une mise en page personnalisée, inspirée de la mise en page par défaut ‘basic’, mais modifie simplement le message et les liens affichés dans la barre.

import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';

const cookieConfig:NgcCookieConsentConfig = {
  cookie: {
    domain: 'localhost'// il est recommandé de définir votre domaine, pour que les cookies fonctionnent correctement
  },
  palette: {
    popup: {
      background: '#000'
    },
    button: {
      background: '#f1d600'
    }
  },
  theme: 'edgeless',
  type: 'opt-out',
  layout: 'my-custom-layout',
  layouts: {
    "my-custom-layout": '{{messagelink}}{{compliance}}'
  },
  elements:{
    messagelink: `
    <span id="cookieconsent:desc" class="cc-message">{{message}} 
      <a aria-label="en savoir plus sur les cookies" tabindex="0" class="cc-link" href="{{cookiePolicyHref}}" target="_blank" rel="noopener">{{cookiePolicyLink}}</a>, 
      <a aria-label="en savoir plus sur notre politique de confidentialité" tabindex="1" class="cc-link" href="{{privacyPolicyHref}}" target="_blank" rel="noopener">{{privacyPolicyLink}}</a> et notre 
      <a aria-label="en savoir plus sur nos conditions de service" tabindex="2" class="cc-link" href="{{tosHref}}" target="_blank" rel="noopener">{{tosLink}}</a>
    </span>
    `,
  },
  content:{
    message: 'En utilisant notre site, vous reconnaissez avoir lu et compris notre ',
    
    cookiePolicyLink: 'Politique de cookies',
    cookiePolicyHref: 'https://cookie.com',

    privacyPolicyLink: 'Politique de confidentialité',
    privacyPolicyHref: 'https://privacy.com',

    tosLink: 'Conditions d\'utilisation',
    tosHref: 'https://tos.com',
  }
};


@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgcCookieConsentModule.forRoot(cookieConfig), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Compatibilité avec Angular cookies rgpd angular

Chaque plugin Nx dépend de l’espace de travail Nx/DevKit sous-jacent sur lequel il s’exécute. Ce tableau fournit la matrice de compatibilité entre les versions majeures de l’espace de travail Nx et ce plugin.

Version de la bibliothèque	Version d’Angular
`>=v6.0.0`	`>=v16.x.x`
`>=v5.0.0`	`>=v15.x.x`
`>=v4.0.1`	`>=v14.x.x`
`v3.0.1`	`>=v12.x.x`
`>=v2.2.3`	`>=v6.x.x`
`v1.1.0`	`<v6.x.x`

Conclusion : « cookies rgpd angular » ces mots clés n’ont plus de secret pour vous

La conformité au RGPD est une composante essentielle de tout projet web moderne, et Angular ne fait pas exception. En intégrant ngx-cookieconsent sur Angular, nous avons franchi une étape importante vers la protection de la vie privée des utilisateurs.

Merci d’avoir suivi ce tuto sur la conformité aux cookies et du respect du RGPD pour vos projets Angular.

Non classé