Согласие на использование файлов cookie GDPR в Django

Привет, ребята, сегодня я надеюсь, что речь пойдет быстро и конкретно о Согласии на использование файлов cookie GDPR в Django. Как разработчик Wordpress, я также создавал интернет-магазины и многое другое, мне нужно было найти правильный плагин, который отвечал бы за принятие политик конфиденциальности на созданных мной веб-сайтах. Конечно, мне пришлось это сделать из-за юридических вопросов, которые требуют магазины и другие сайты, собирающие пользовательские данные в куки.

Точно то же самое мы хотим сделать в нашем плагине в нашем приложении Django, но вместо левого нижнего мы хотим поместить наш MODAL в середину приложения и добавить темный фон вокруг модального окна.

Давайте начнем!

В нашей папке «components», где мы храним наши компоненты, создайте новый файл с именем «cookie_modal.html» и поместите внутрь код:

<!-- cookie_modal.html -->
<div id="cookieModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">We value your privacy</h5>
            </div>
            <div class="modal-body">
                <p>We use cookies on this website to enhance your user experience. By clicking "I agree", you are giving your consent for us to set cookies.</p>
                <p>For more information on what data is contained in the cookies, please see our <a href="/privacy-policy/">Privacy Policy</a> page.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="rejectCookies">I decline</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="acceptCookies">I agree</button>
            </div>
        </div>
    </div>
</div>

Предоставленный блок кода определяет модальное окно Bootstrap с идентификатором «cookieModal». Это модальное окно служит всплывающим окном согласия на использование файлов cookie, которое отображается пользователю при первом посещении сайта.

Модальное окно имеет заголовок «Мы ценим вашу конфиденциальность».
Внутри тела модального окна есть краткое объяснение политики использования файлов cookie веб-сайта и ссылка на полную страницу Политики конфиденциальности по адресу /privacy-policy/.
Модальный футер содержит две кнопки: «Я отказываюсь» и «Я согласен». Эти кнопки позволяют пользователю отказаться или принять использование файлов cookie.
Если пользователь нажимает кнопку «Я отказываюсь», срабатывает кнопка с идентификатором rejectCookies, и модальное окно закрывается.
Если пользователь нажимает кнопку «Я согласен», срабатывает кнопка с идентификатором acceptCookies, и модальное окно закрывается.

Внешний вид и функциональность модального окна контролируются JavaScript и CSS (не показаны в этом коде). JavaScript устанавливает файл cookie в зависимости от выбора пользователя, что предотвращает повторное отображение модального окна, если пользователь не очистит свои файлы cookie или срок действия файла cookie не истечет.

Добавьте JavaScript

Нам нужно реализовать некоторые поведения в нашем модальном файле cookie.

<script>
  $(document).ready(function(){
    // Cookie consent functions
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    // Show cookie consent modal if not accepted yet
    if(getCookie('cookiesAccepted') === null){
        $('#cookieModal').modal('show');
    }

    // Handle cookie consent choices
    $('#acceptCookies').on('click', function(){
        setCookie('cookiesAccepted', 'true', 365);
    });

    $('#rejectCookies').on('click', function(){
        setCookie('cookiesAccepted', 'false', 365);
    });
  });
</script>

Приведенный выше сценарий обрабатывает работу модального окна согласия на использование файлов cookie. Вот краткое описание того, что он делает:

функция setCookie: эта функция создает новый файл cookie с заданным именем, значением и датой истечения срока действия. Если указана дата истечения срока действия (в днях), он вычисляет будущую дату истечения срока действия файла cookie.

2. Функция getCookie. Эта функция извлекает значение файла cookie с заданным именем. Он просматривает все файлы cookie, существующие на странице, и, если находит запрошенный файл cookie, возвращает его значение.

3. Проверка состояния согласия на использование файлов cookie: если файл cookie «cookiesAccepted» не существует (это означает, что пользователь еще не сделал выбор в отношении согласия на использование файлов cookie), сценарий показывает модальное окно согласия на использование файлов cookie.

4. Обработка выбора пользователя: когда пользователь нажимает кнопку «Я согласен» (с идентификатором «acceptCookies»), скрипт создает файл cookie «cookiesAccepted» со значением «true» и датой истечения срока действия. 365 дней в будущем. Если пользователь нажимает кнопку «Я отказываюсь» (с идентификатором «rejectCookies»), создается файл cookie «cookiesAccepted» со значением «false» и той же датой истечения срока действия.

Таким образом, этот сценарий используется для управления согласием пользователя на использование файлов cookie. Когда пользователь посещает страницу в первый раз, появится модальное окно с запросом согласия на использование файлов cookie. Затем их выбор сохраняется в файле cookie, что предотвращает появление модального окна при будущих посещениях (если только файл cookie не удален или не истечет срок его действия).

Весь код файла cookie_modal.html.

<!-- cookie_modal.html -->
<div id="cookieModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">We value your privacy</h5>
            </div>
            <div class="modal-body">
                <p>We use cookies on this website to enhance your user experience. By clicking "I agree", you are giving your consent for us to set cookies.</p>
                <p>For more information on what data is contained in the cookies, please see our <a href="/privacy-policy/">Privacy Policy</a> page.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="rejectCookies">I decline</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="acceptCookies">I agree</button>
            </div>
        </div>
    </div>
</div>

<script>
  $(document).ready(function(){
    // Cookie consent functions
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    // Show cookie consent modal if not accepted yet
    if(getCookie('cookiesAccepted') === null){
        $('#cookieModal').modal('show');
    }

    // Handle cookie consent choices
    $('#acceptCookies').on('click', function(){
        setCookie('cookiesAccepted', 'true', 365);
    });

    $('#rejectCookies').on('click', function(){
        setCookie('cookiesAccepted', 'false', 365);
    });
  });
</script>

Хорошо, братцы, наш cookie_modal.html готов к работе, и его ждут добавления в другие наши представления или компоненты. В нашем случае мы хотим добавить его, чтобы он появлялся во всем нашем приложении, если кто-то новый заходит на наш сайт.

base.html

моя база.html

<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
</head>

<body>
  {% include 'components/header.html' %}
  
  {% block content %}{% endblock %}

  {% include 'components/footer.html' %}
  
  <!-- Import the necessary JS libraries -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <!-- Include the cookie modal here -->
  {% include 'components/cookie_modal.html' %}
  
  <!-- Custom JavaScript -->
  {% block javascript %}{% endblock %}
</body>
</html>

Файл base.html — это шаблон Django, который обеспечивает базовую структуру для всех страниц вашего веб-сайта. Это помогает избежать повторения кода за счет включения общих элементов, используемых несколькими страницами. Вот разбивка того, что он делает:

Тип документа HTML. Он начинается с объявления типа документа HTML, который устанавливает версию HTML.

2. Заголовок HTML. Раздел заголовка HTML-документа начинается с тега title, который определяется как блок, поэтому его можно переопределить дочерними шаблонами. Раздел head также содержит ссылки на Bootstrap CSS и значки, которые используются для оформления и визуальных элементов страниц.

3. HTML body: в разделе body он включает общие компоненты, такие как заголовок и нижний колонтитул, с использованием тегов {% include 'components/header.html' %} и {% include 'components/footer.html' %} соответственно. Он также определяет блок контента {% block content %}{% endblock %}, куда будет вставляться уникальный контент для каждой страницы.

4. Библиотеки JavaScript: импортирует необходимые библиотеки JavaScript, такие как jQuery, Popper.js и Bootstrap.

5. Cookie Modal: включает компонент cookie_modal, который предположительно показывает пользователям всплывающее окно с согласием на использование файлов cookie.

6. Пользовательский код JavaScript. Он определяет блок JavaScript {% block javascript %}{% endblock %}, позволяющий дочерним шаблонам включать код JavaScript для конкретной страницы.

Таким образом, этот базовый шаблон определяет общий макет веб-сайта и включает в себя общие элементы, такие как верхний и нижний колонтитулы, библиотеки JavaScript и модальное окно cookie. Он также предоставляет заполнители (блоки), в которые можно вставить уникальный контент и JavaScript для каждой отдельной страницы.

Хорошо, чуваки, давайте сделаем так, чтобы модальные куки отображались в нашем приложении, но давайте также будем следовать политике DRY, что очень важно, если мы хотим следовать правилам и этике программирования.

Как видите, мы импортировали в наш base.html " {% include 'components/cookie_modal.html' %} ", так что теперь, где бы мы ни добавляли "base.html" в наши представления или компоненты, он будет также отображать модальное окно cookie для вновь прибывших пользователей.

В этом-то и дело! В нашем файле home.html мы реализуем ‘{% extends ‘bases/base.html’ %} ‘ и теперь он должен работать хорошо! давай попробуем!

Эй, чуваки, это хорошо работает! Как вы можете видеть, «Политика конфиденциальности» на синем фоне перенаправляет вас на мою политику конфиденциальности.

После нажатия на «политику конфиденциальности»:

Да, но помните, что вам нужно добавить представление политики конфиденциальности и соответствующим образом настроить его в urls.py и т. д.

А здесь выше в cookie_modal.html вы выбираете прямое из представлений Политики конфиденциальности.

Это все братцы!

# немного саморекламы

Привет! Меня зовут Дориан, и я управляю небольшой компанией по разработке программного обеспечения. Мое предложение для вас.

— Интернет-магазины и сайты
— Веб и мобильные приложения
— Компьютерная графика
— Автоматизация процессов
— Боты, API и инфраструктура
— Брендинг
> — Внедрение искусственного интеллекта (ИИ)
— Плагины WordPress и PrestaShop и др.
— Смарт-контракты / Запуск собственной криптовалюты / NFT.
— Внедрение технологии WEB3 / Блокчейн в бизнесе.

Вы хотите создать свой собственный криптопроект на основе какого-либо приложения или просто хотите создать свою криптовалюту или NFT?
Хотите внедрить технологии WEB3 и блокчейн в свой бизнес?

— Веб-сайт: www.travilabs.com
Свяжитесь с нами:
Facebook: https://www.facebook.com/profile. php?id=100091601081883
Электронная почта: [email protected]