Файлы cookie — это не что иное, как способ запомнить вас веб-сайту. Вы когда-нибудь пытались добавить товары в корзину, даже не войдя в систему? Когда вы, наконец, войдете в систему, вы увидите, что ваши предметы добавлены в вашу учетную запись. Это волшебство файлов cookie!
Во многих странах веб-сайты обязаны содержать баннер с согласием на использование файлов cookie и прикрепленную страницу политики использования файлов cookie для тех, кто впервые посещает веб-сайт.
Одним из способов добавления баннера cookie является использование реагирующих библиотек, таких как react-cookie-consent.
Здесь я задокументировал, как добавить пользовательский баннер cookie в ваше реагирующее приложение с помощью Material UI.
- Давайте сначала создадим простое приложение для реагирования.
2. Загляните внутрь своего приложения.
3. Мы начнем с нуля.
Удалите все файлы по умолчанию в папке src.
Кроме того, удалите все кроме index.html из общей папки.
4. Обязательно добавьте в приложение Material UI и react-router-dom
5. Давайте теперь добавим базовую Домашнюю страницу
В папку src- добавьте следующие базовые файлы App.js и файл index.js.
Так как мы будем использовать Routes react-router-dom, обязательно добавьте ‹BrowserRouter› в файл index.js.
6. Следующие файлы добавляются в папку компонентов внутри папки src
import {Link, Typography} from '@mui/material';
import {Box} from '@mui/system';
import React from 'react';
import cookies from '../../assets/cookies-image.jpg';
const WelcomeCard = () => {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
}}
>
<Typography variant="h4"> Demo Application</Typography>
<Typography variant="h6">Cookies to a react app</Typography>
<Typography variant="body2">
{' '}
This is a tutorial on how to add{' '}
<Link
href="https://en.wikipedia.org/wiki/HTTP_cookie"
target="_blank"
rel="noopener"
>
cookies
</Link>{' '}
to your application
</Typography>
<img
src={cookies}
alt="cookies"
width={'50%'}
/>
</Box>
);
};
export default WelcomeCard;
Добавьте изображение в папку с ресурсами
7. Разработайте логику для всплывающих окон с файлами cookie
Мы можем работать с файлами cookie с помощью файла DOM «document.cookie».
Мы будем создавать функции для:
- открыть баннер cookie
- закрыть баннер cookie
- получить печенье
- принять куки
- отклонить куки
Булева функция состояния реакции [open, setOpen] также потребуется для баннера cookie.
Внутри файла App.js:
import { Box, CssBaseline } from "@mui/material";
import React, { useState } from "react";
import CookieBanner from "./components/app.cookie.banner";
import AppRoutes from "./routes";
function App() {
const [open, setOpen] = useState(false);
const handleCookieClose = () => {
setOpen(false);
};
const handleCookieOpen = () => {
let cookieName = getCookie('cookiePolicy');
if (cookieName !== '') {
//if cookie is present: dont show banner
setOpen(false);
} else {
setOpen(true);
}
};
const getCookie = (cookieName) => {
let name = cookieName + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let total = decodedCookie.split(';');
for (let i = 0; i < total.length; i++) {
let cookie = total[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(name) === 0) {
return cookie.substring(name.length, cookie.length);
}
}
return '';
};
const handleCookieAccepted = () => {
const expiry = new Date();
//let us save the cookie for 1 month
expiry.setTime(expiry.getTime() + (30 * 24 * 60 * 60 * 1000));
let expires = 'expires=' + expiry.toUTCString();
document.cookie = 'cookiePolicy=accepted;' + expires;
setOpen(false);
};
const handleCookieDeclined = () => {
setOpen(false);
//let us save the cookie for the current session only
//use the default expiry : session
document.cookie = "cookiePolicy=declined";
}
return (
<Box onLoad={handleCookieOpen} sx={{ margin: 0 }}>
<CssBaseline />
<Box sx={{ flexGrow: 1 }}>
<AppRoutes />
</Box>
<CookieBanner open={open} handleCookieAccepted={handleCookieAccepted}
handleCookieClose={handleCookieClose} handleCookieDeclined={handleCookieDeclined} />
</Box>);
}
export default App;
- Если пользователь принимает файлы cookie, файл cookie (cookiePolicy) сохраняется в течение 1 месяца [30 (дней) * 24 (часа) * 60 (минут) * 60 (секунд) * 1000 (миллисекунд)]
- Если пользователь отклоняет файлы cookie, файл cookie (cookiePolicy) по умолчанию сохраняется только для сеанса.
- Баннер cookie должен появляться каждый раз при загрузке файла App.js.
8. Добавление компонента баннера cookie
import {Check, Close} from '@mui/icons-material';
import {Box, Button, Modal, Typography} from '@mui/material';
import React from 'react';
const style = {
padding: 2,
margin: 2,
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
backgroundColor: 'whitesmoke',
position: 'absolute',
bottom: 0,
maxHeight: 'fit-content',
width: '100%',
};
const CookieBanner = ({
open,
handleCookieClose,
handleCookieAccepted,
handleCookieDeclined,
}) => {
return (
<Modal
open={open}
onClose={handleCookieClose}
disableScrollLock
>
<Box style={style}>
<Box>
<Typography
variant="body2"
sx={{display: 'flex', justifyContent: 'center', margin: 0.5}}
>
We use cookies on our website to provide you with a more
personalized digital experience.
</Typography>
<Typography variant="caption">
You can read about our cookie policy <a href="/cookies">here</a>
</Typography>
</Box>
<Box sx={{padding: 0, maxWidth: 'fit-content'}}>
<Button
onClick={handleCookieDeclined}
color="error"
variant="outlined"
sx={{padding: '3px', margin: 1}}
startIcon={<Close />}
>
Decline
</Button>
<Button
onClick={handleCookieAccepted}
color="success"
variant="contained"
sx={{padding: '3px', margin: 1}}
startIcon={<Check />}
>
Accept
</Button>
</Box>
</Box>
</Modal>
);
};
export default CookieBanner;
Обязательно добавьте файл index.js, как в случае с приветственной карточкой.
9. Добавьте домашнюю страницу и страницу политики использования файлов cookie.
import {Box, Link, Typography} from '@mui/material';
const CookiePage = () => {
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
margin: 5,
backgroundColor: 'bisque',
padding: 2,
}}
>
<Typography
variant="h5"
color={'primary'}
>
Cookies
</Typography>
<Link
href="/"
sx={{color: 'green'}}
variant="caption"
>
Home
</Link>
<Typography
variant="body1"
fontSize={10}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
<br />
Quam elementum pulvinar etiam non quam lacus suspendisse. Ultricies leo
integer malesuada nunc vel. Risus pretium quam vulputate dignissim
suspendisse in est ante in. Est sit amet facilisis magna. Ut tellus
elementum sagittis vitae et leo duis ut. Massa tincidunt nunc pulvinar
sapien et ligula ullamcorper malesuada. In metus vulputate eu
scelerisque felis imperdiet proin fermentum leo. Etiam erat velit
scelerisque in dictum non consectetur a. Massa eget egestas purus
viverra accumsan in nisl nisi scelerisque. Odio facilisis mauris sit
amet. Eget aliquet nibh praesent tristique magna sit amet. Adipiscing
elit ut aliquam purus. Urna id volutpat lacus laoreet non curabitur
gravida arcu. Nullam ac tortor vitae purus. In metus vulputate eu
scelerisque felis imperdiet. Viverra justo nec ultrices dui sapien eget
mi. Sed blandit libero volutpat sed cras ornare arcu dui. Aliquam etiam
erat velit scelerisque in. Vestibulum lorem sed risus ultricies
tristique nulla aliquet enim. Mattis enim ut tellus elementum sagittis
vitae et leo duis.
</Typography>
</Box>
);
};
export default CookiePage;
Обязательно добавьте соответствующие файлы index.js, как это было сделано для приветственной карты.
10. Добавьте нужные маршруты
И вуаля!!!
У вас есть готовый баннер cookie
Вот ссылка на репозиторий Github
Спасибо!!! Удачного кодирования.
