Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le consentement aux cookies dans une application React avec React-Cookie-Consent

Mary-Kate Olsen
Libérer: 2024-11-02 17:18:02
original
552 Les gens l'ont consulté

How to use Cookie Consent in a React App with react-cookie-consent

Introduction
La confidentialité et la protection des données sont des considérations essentielles pour les sites Web modernes, donc l'ajout d'une bannière de consentement aux cookies à votre application React garantit la conformité aux réglementations sur la confidentialité des données, comme le RGPD. Dans ce didacticiel, nous utiliserons la bibliothèque react-cookie-consent pour ajouter facilement une bannière de consentement aux cookies à notre application et la personnaliser pour permettre aux utilisateurs de contrôler les préférences en matière de cookies.

Étape 1 : Configurez votre projet React

Si vous n'avez pas encore configuré de projet React, créez-en un avec les commandes suivantes :

npx create-react-app cookie-consent-demo
cd cookie-consent-demo
Copier après la connexion

Étape 2 : Installer React-Cookie-Consent

La bibliothèque React-Cookie-Consent simplifie l'ajout d'une bannière de consentement aux cookies à votre application. Installez-le en utilisant npm ou fil :

npm install react-cookie-consent
# or
yarn add react-cookie-consent
Copier après la connexion

Étape 3 : Mise en œuvre de base

Une fois la bibliothèque installée, accédez au fichier de votre application principale (généralement App.js ou App.tsx) et ajoutez le composant de consentement aux cookies. Voici une configuration de base :

import React from "react";
import CookieConsent from "react-cookie-consent";

function App() {
  return (
    <div className="App">
      <h1>Welcome to My Website</h1>
      {/* Basic Cookie Consent */}
      <CookieConsent
        location="bottom"
        buttonText="I understand"
        cookieName="myWebsiteCookieConsent"
        style={{ background: "#2B373B" }}
        buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
        expires={150}
      >
        This website uses cookies to enhance your browsing experience.{" "}
        <a href="/privacy-policy" style={{ color: "#f5e042" }}>
          Learn more
        </a>
      </CookieConsent>
    </div>
  );
}

export default App;
Copier après la connexion

Étape 4 : Personnalisation de la bannière de consentement

Pour rendre la bannière de consentement plus attrayante ou ajouter des options telles que « Tout accepter » et « Refuser », vous pouvez étendre le composant.

<CookieConsent
  location="bottom"
  enableDeclineButton
  declineButtonText="Decline"
  buttonText="Accept All"
  cookieName="myWebsiteCookieConsent"
  style={{ background: "#000" }}
  buttonStyle={{ color: "#fff", fontSize: "14px" }}
  declineButtonStyle={{
    color: "#fff",
    background: "#c0392b",
    fontSize: "14px",
  }}
  expires={365}
  onAccept={() => {
    console.log("Cookies accepted");
  }}
  onDecline={() => {
    console.log("Cookies declined");
  }}
>
  We use cookies to improve user experience. By clicking "Accept All," you consent to the use of cookies.
</CookieConsent>
Copier après la connexion

Conclusion
L'ajout d'une bannière de consentement aux cookies est cruciale pour la confidentialité des utilisateurs et la conformité réglementaire, et le consentement aux cookies de réaction facilite sa mise en œuvre. Vous pouvez personnaliser davantage la bannière pour l'aligner sur la conception et la messagerie de votre site Web et répondre aux choix des utilisateurs pour un contrôle amélioré sur les fonctionnalités basées sur les cookies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!