Implementierte GDPR-konforme Cookie-Zustimmungsmechanik

- Integrierte die 'bootstrap-cookie-consent-settings' Bibliothek für Cookie-Zustimmungsdialoge
- Hinzugefügt mehrsprachige Unterstützung für Cookie-Dialoge
- Konfigurierte Anwendungseinstellungen in 'appsettings.json'
- Erstellt Datenschutz- und Cookie-Richtlinien mit TermsFeed
- Angepasste sprachbasierte Einstellungen in './wwwroot/cookie-consent-content'
This commit is contained in:
Developer 02
2024-04-16 10:32:39 +02:00
parent 87c839549a
commit 1c55c4aa99
24 changed files with 297 additions and 498 deletions

View File

@@ -1,4 +0,0 @@
src/bootstrap-cookie-consent-settings.js linguist-vendored=false
index.html linguist-documentation
demo/legal-notice.html linguist-documentation
demo/privacy-policy.html linguist-documentation

View File

@@ -1,2 +0,0 @@
/.idea
/node_modules

View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 Stefan Haack
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -1,121 +0,0 @@
# bootstrap-cookie-consent-settings
A modal dialog (cookie banner) and framework to handle the EU law (as written by EuGH, 1.10.2019 C-673/17)
about cookies in a website. Needs Bootstrap 5.
- [Demo page](https://shaack.com/projekte/bootstrap-cookie-consent-settings)
- [GitHub Repository](https://github.com/shaack/bootstrap-cookie-consent-settings)
- [npm package](https://www.npmjs.com/package/bootstrap-cookie-consent-settings)
## Usage
### Construct
Initialize the cookie consent framework with the constructor
```js
var cookieSettings = new BootstrapCookieConsentSettings(props)
```
You should configure the framework with the `props` object, at least the properties `privacyPolicyUrl`, `legalNoticeUrl`
and `contentURL`. The default configuration is
```js
this.props = {
privacyPolicyUrl: undefined, // the URL of your privacy policy page
legalNoticeUrl: undefined, // the URL of you legal notice page (Impressum)
contentURL: "/cookie-consent-content", // this folder must contain the language-files in the needed languages (`[lang].js`)
buttonAgreeClass: "btn btn-primary", // the "Agree to all" buttons class
buttonDontAgreeClass: "btn btn-link text-decoration-none", // the "I do not agree" buttons class
buttonSaveClass: "btn btn-secondary", // the "Save selection" buttons class
autoShowModal: true, // disable autoShowModal on the privacy policy and legal notice pages, to make these pages readable
alsoUseLocalStorage: true, // if true, the settings are stored in localStorage, too
postSelectionCallback: undefined, // callback function, called after the user has saved the settings
lang: navigator.language, // the language, in which the modal is shown
defaultLang: "en", // default language, if `lang` is not available as translation in `cookie-consent-content`
categories: ["necessary", "statistics", "marketing", "personalization"], // the categories for selection, must be contained in the language files
cookieName: "cookie-consent-settings", // the name of the cookie in which the configuration is stored as JSON
cookieStorageDays: 365, // the duration the cookie configuration is stored on the client
modalId: "bootstrapCookieConsentSettingsModal" // the id of the modal dialog element
}
```
### Show dialog
On a new visit the dialog is shown automatically.
To allow the user a reconfiguration you can show the Dialog again with
```js
cookieSettings.showDialog()
```
### Read the settings in JavaScript
Read all cookie settings with
```js
cookieSettings.getSettings()
```
It should return some JSON like
```json
{
"necessary": true,
"statistics": true,
"marketing": true,
"personalization": true
}
```
or `undefined`, before the user has chosen his cookie options.
Read a specific cookie setting with
```js
cookieSettings.getSettings('statistics')
```
for the `statistics` cookie settings. Also returns `undefined`, before the user has chosen his cookie options.
### Read the settings from the backend
You can read the settings with all server languages, you just have to read the cookie `cookie-consent-settings`.
The content of the cookie is encoded like a http query string.
```
necessary=true&statistics=false&marketing=true&personalization=true
```
#### PHP helper class
I provide a PHP helper class that you can use to read and write the settings from a PHP backend.
It is located in `php/Shaack/BootstrapCookieConsentSettings.php`.
You can use it as described in the following example.
```PHP
$cookieSettings = new \Shaack\BootstrapCookieConsentSettings();
// read all settings
$allSettings = $cookieSettings->getSettings();
// read a specific setting
$statisticsAllowed = $cookieSettings->getSetting("statistics");
// write a specific setting
$cookieSettings->setSetting("statistics", false);
```
### Internationalization
You find the language files in `./cookie-consent-content`. You can add here language files or modify the existing. If
you add language files please consider a pull request to also add them in this repository. Thanks.
## Disclaimer
You can use this banner for your website free of charge under the [MIT-License](./LICENSE).
The banner and framework was designed in cooperation with data protection officers and lawyers. However, we can not
guarantee whether the banner is correct for your website and assume no liability for its use.
bootstrap-cookie-consent-settings is a project of [shaack.com](https://shaack.com).

View File

@@ -1,31 +0,0 @@
{
"title": "Privatsphäre Einstellungen",
"body": "Wir nutzen Cookies und ähnliche Technologien, die zum Betrieb der Website erforderlich sind. Zusätzliche Cookies werden nur mit Ihrer Zustimmung verwendet. Es steht Ihnen frei, Ihre Zustimmung jederzeit zu geben, zu verweigern oder zurückzuziehen, indem Sie den Link \"Cookie-Einstellungen\" unten auf jeder Seite nutzen. Sie können der Verwendung von Cookies durch uns zustimmen, indem Sie auf \"Einverstanden\" klicken. Für weitere Informationen darüber, welche Daten gesammelt und wie sie an unsere Partner weitergegeben werden, lesen Sie bitte unsere --privacy-policy--.",
"privacyPolicy": "Datenschutzerklärung",
"legalNotice": "Impressum",
"mySettings": "Meine Einstellungen",
"buttonNotAgree": "Ich bin nicht einverstanden",
"buttonAgree": "Einverstanden",
"buttonSaveSelection": "Auswahl speichern",
"buttonAgreeAll": "Allen zustimmen",
"categories": {
"necessary": {
"title": "Notwendig",
"description": ["Zum Betrieb der Website erforderlich"]
},
"statistics": {
"title": "Statistik",
"description": ["Beobachtung der Website-Nutzung und Optimierung der Benutzererfahrung"]
},
"marketing": {
"title": "Marketing",
"description": ["Bewertung von Marketingaktionen"]
},
"personalization": {
"title": "Personalisierung",
"description": ["Speicherung Ihrer Präferenzen aus früheren Besuchen",
"Sammeln von Benutzer-Feedback zur Verbesserung unserer Website",
"Erfassung Ihrer Interessen, um maßgeschneiderte Inhalte und Angebote anzubieten"]
}
}
}

View File

@@ -1,31 +0,0 @@
{
"title": "Privacy Settings",
"body": "We use cookies and similar technologies that are necessary to operate the website. Additional cookies are only used with your consent. You are free to give, deny, or withdraw your consent at any time by using the \"cookie settings\" link at the bottom of each page. You can consent to our use of cookies by clicking \"Agree\". For more information about what information is collected and how it is shared with our partners, please read our --privacy-policy--.",
"privacyPolicy": "Data Protection Statement",
"legalNotice": "Legal Notice",
"mySettings": "My Settings",
"buttonNotAgree": "I do not agree",
"buttonAgree": "Agree",
"buttonSaveSelection": "Save selection",
"buttonAgreeAll": "Agree to all",
"categories": {
"necessary": {
"title": "Necessary",
"description": ["Required to run the website"]
},
"statistics": {
"title": "Statistics",
"description": ["Monitoring website usage and optimizing the user experience"]
},
"marketing": {
"title": "Marketing",
"description": ["Evaluation of marketing actions"]
},
"personalization": {
"title": "Personalization",
"description": ["Storage of your preferences from previous visits",
"Collecting user feedback to improve our website",
"Recording of your interests in order to provide customised content and offers"]
}
}
}

View File

@@ -1,31 +0,0 @@
{
"title": "Paramètres de confidencialitat",
"body": "Utilizam de cookies e de tecnologias similaras que fan mestièr pel foncionament del site web. De cookies addicionals son sonque utilizats amb vòstre acòrd. Sètz liure de donar, refusar o tirar vòstre acòrd a tot moment en utilizant lo ligam «Paramètres de cookies» enbàs de cada pagina. Podètz consentir a nòstra utilizacion dels cookies en clicant «Acceptar». Per mai d'informacions tocant quina informacion es collectada e partejada amb nòstre socis, vejatz nòstra --privacy-policy--.",
"privacyPolicy": "declaracion de proteccion de las donadas",
"legalNotice": "Mencions legalas",
"mySettings": "Mos paramètres",
"buttonNotAgree": "Soi pas d'acòrd",
"buttonAgree": "Acceptar",
"buttonSaveSelection": "Enregistrar la seleccion",
"buttonAgreeAll": "Tot acceptar",
"categories": {
"necessary": {
"title": "Necessaris",
"description": ["Requerits pel foncionament del site"]
},
"statistics": {
"title": "Estatisticas",
"description": ["Per susvelhar l'utilizacion del site e melhorar l'experiéncia dels utilizaires"]
},
"marketing": {
"title": "Marketing",
"description": ["Estudi de las accions de marketing"]
},
"personalization": {
"title": "Personalizacion",
"description": ["Gardar las preferéncias de visitas precedentas",
"Reculhir los comentaris dels utilizaire per melhorar nòstre site web",
"Enregistrar vòstres interesses per vos fornir de contenguts e publicitats personalizats<"]
}
}
}

View File

@@ -1,79 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>bootstrap-cookie-banner demo page</title>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-4"><a href="../">bootstrap-cookie-consent-settings</a> demo page</h1>
<p>This is a modal dialog (cookie banner) and framework to handle the German and EU law (as written by EuGH,
1.10.2019 C-673/17) about cookies in a website. This banner requires Bootstrap.</p>
<h2>Usage</h2>
<h3>Construct</h3>
<p>Initialize the cookie consent framework with the constructor</p>
<p><code>var cookieSettings = new BootstrapCookieConsent()</code></p>
<h3>Show the Dialog</h3>
<p>On a new visit the dialog is shown automatically. For reconfiguration
show the Dialog again with <code>cookieSettings.showDialog()</code>.
</p>
<p>
<a href="javascript:showSettingsDialog()" class="btn btn-primary">Cookie Settings</a>
</p>
<h3>Read the settings</h3>
<p>Read all cookie settings with <code>cookieSettings.getSettings()</code></p>
<div class="card mb-4">
<div class="card-body">
<pre class="mb-0" id="settingsOutput"></pre>
</div>
</div>
<p>Read a specific cookie setting with <code>cookieSettings.getSettings('statistics')</code></p>
<div class="card">
<div class="card-body">
<pre class="mb-0" id="settingsAnalysisOutput"></pre>
</div>
</div>
<h2 class="mt-4">The code of this banner</h2>
<div class="card">
<div class="card-body">
<pre><code>var cookieSettings = new BootstrapCookieConsentSettings({
contentURL: "../cookie-consent-content",
privacyPolicyUrl: "privacy-policy.html",
legalNoticeUrl: "legal-notice.html",
postSelectionCallback: function () {
location.reload() // reload after selection
}
})</code></pre>
</div>
</div>
<h2 class="mt-4">More documentation</h2>
<p class="mb-5"><a href="https://github.com/shaack/bootstrap-cookie-consent-settings">Find more documentation and
the sourcecode on GitHub</a></p>
</div>
<script src="../src/bootstrap-cookie-consent-settings.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<script>
const cookieSettings = new BootstrapCookieConsentSettings({
contentURL: "../cookie-consent-content",
privacyPolicyUrl: "privacy-policy.html",
legalNoticeUrl: "legal-notice.html",
postSelectionCallback: function () {
location.reload() // reload after selection
}
})
function showSettingsDialog() {
cookieSettings.showDialog()
}
document.getElementById("settingsOutput").innerText = JSON.stringify(cookieSettings.getSettings())
document.getElementById("settingsAnalysisOutput").innerText = cookieSettings.getSettings("statistics")
</script>
</body>
</html>

View File

@@ -1,17 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>bootstrap-cookie-banner demo page</title>
</head>
<body>
<div class="container">
<h1><a href="../">bootstrap-cookie-consent-settings</a></h1>
<p>This is the legal notice dummy page.</p>
<p>You have to set the legal notice URL in your content files.</p>
</div>
</body>
</html>

View File

@@ -1,17 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>bootstrap-cookie-banner demo page</title>
</head>
<body>
<div class="container">
<h1><a href="../">bootstrap-cookie-consent-settings</a></h1>
<p>This is the privacy policy dummy page.</p>
<p>You have to set the privacy policy URL in your content files.</p>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -1,34 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>bootstrap-cookie-consent-settings demo page</title>
</head>
<body>
<div class="container mt-5">
<h1>bootstrap-cookie-consent-settings demo page</h1>
<p>This is a modal dialog (cookie banner) and framework to handle the German and EU law (as written by EuGH,
1.10.2019 C-673/17) about cookies in a website. <b>This banner requires Bootstrap.</b></p>
<p>We also have <b>another</b>, smaller cookie banner, <b>without dependencies</b>, which
does not offer the user an advanced configuration. You can find it in GitHub as
<a href="https://github.com/shaack/cookie-consent-js">cookie-consent-js</a>.</p>
<h2>Example</h2>
<ul>
<li><a href="examples/cookie-banner-example.html">Cookie consent banner with reload after selection</a></li>
</ul>
<h2>Further Information</h2>
<ul>
<li>
<a href="https://github.com/shaack/bootstrap-cookie-consent-settings">GitHub Repository and
Documentation</a>
</li>
<li>
<a href="https://www.npmjs.com/package/bootstrap-cookie-consent-settings">npm package</a>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -1,13 +0,0 @@
{
"name": "bootstrap-cookie-consent-settings",
"version": "4.1.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "bootstrap-cookie-consent-settings",
"version": "4.1.4",
"license": "MIT"
}
}
}

View File

@@ -1,28 +0,0 @@
{
"name": "bootstrap-cookie-consent-settings",
"version": "4.1.4",
"description": "Settings dialog in Bootstrap 5 and framework to handle the EU law (may 2020) about cookies in a website",
"browser": "./src/bootstrap-cookie-banner.js",
"scripts": {
"test": "echo \"No test specified\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/shaack/bootstrap-cookie-banner.git"
},
"keywords": [
"bootstrap",
"cookie",
"consent",
"eu",
"gdpr",
"dsgvo"
],
"author": "Stefan Haack (shaack.com)",
"license": "MIT",
"bugs": {
"url": "https://github.com/shaack/bootstrap-cookie-banner/issues"
},
"homepage": "https://shaack.com",
"main": "src/bootstrap-cookie-consent-settings.js"
}

View File

@@ -1,64 +0,0 @@
<?php
namespace Shaack;
/**
* Helper class, to handle the `bootstrap-cookie-content-settings` from a PHP backend.
* @author Stefan Haack (https://shaack.com)
*/
class BootstrapCookieConsentSettings {
private string $cookieName;
private int $cookieStorageDays;
public function __construct(string $cookieName = "cookie-consent-settings", int $cookieStorageDays = 365)
{
$this->cookieName = $cookieName;
$this->cookieStorageDays = $cookieStorageDays;
}
/**
* Read the whole consent cookie into an array.
* @return array
*/
public function getSettings() : array {
parse_str(@$_COOKIE[$this->cookieName], $array);
return array_map(function($value) {
return $value === "true";
}, $array);
}
/**
* Write a value to the consent cookie.
* @param string $optionName
* @return bool
*/
public function getSetting(string $optionName) : bool {
return !!$this->getSettings()[$optionName];
}
/**
* Write an array of values to the consent cookie.
* @param array $settings
* @return void
*/
public function setSettings(array $settings) : void {
$settings["necessary"] = true;
$encoded = http_build_query(array_map(function($value) {
return $value ? "true" : "false";
},$settings), "", "&");
setrawcookie($this->cookieName, $encoded, time() + (86400 * $this->cookieStorageDays), "/");
}
/**
* Read a value from the consent cookie.
* @param string $optionName
* @param bool $value
* @return void
*/
public function setSetting(string $optionName, bool $value) : void {
$settings = $this->getSettings();
$settings[$optionName] = $value;
$this->setSettings($settings);
}
}