RGPD y política de cookies en sitios Web ASP.NET
El 25 de Mayo de 2018 entra en vigor la nueva regulación del Reglamento General de Protección de Datos (RGPD), que obliga a cualquier sitio Web publicado en Internet a cumplir de manera taxativa con esta reglamentación. En caso de no ceñirse a la normativa, las Webs podrían ser demandadas por la AEPD (Agencia Española de Protección de Datos).
Uno de los puntos más importantes de esta normativa (además de la Política de Privacidad y los Avisos Legales) es la Política de Cookies. Cuando un usuario entra en nuestro sitio Web, debemos informarle (y solicitar su consentimiento) de la posibilidad de instalar Cookies en su dispositivo móvil u ordenador.
A continuación veremos cómo integrar en nuestros sitios Web ASP.NET una 'barra informativa' que permita a los usuarios consultar y aceptar la Política de Cookies establecida por el Reglamento General de Protección de Datos (RGPD).
El código HTML
La 'barra informativa' para la Política de Cookies debe ser visible en todas las páginas del sitio Web. Es por esto que debemos colocarla en la 'página maestra' de nuestra aplicación ASP.NET, al final de la sección <body> o en el <footer> de la página.
<div id="barra-informativa">
<div class="inner">
<div>
Utilizamos cookies propias y de terceros para mejorar
nuestros servicios y ofrecerle una mejor experiencia de navegación.
Si continúa navegando consideramos que acepta su uso.
<a href="/politica-de-cookies" class="info" target="_blank">
<b>Más información</b>
</a>
<a href="javascript:void(0);" class="label label-info ok" onclick="PutCookie();">
<b>Acepto</b>
</a>
</div>
</div>
</div>Al final del Post está disponible para descargar un ejemplo de página informativa de Política de Cookies (la misma que se utiliza en este Blog).
El código JavaScript
El proceso de 'aceptación' de la Política de Cookies es relativamente sencillo. Cuando se pulsa en el botón 'Acepto', se descarga una Cookie (_COOKIESAUTH) al navegador del usuario (mediante JavaScript). En los posteriores accesos al sitio Web se comprueba si esta Cookie existe, si es así, la 'barra informativa' ya no se vuelve a mostrar. Es necesario tener instalado jQuery en nuestro proyecto Web.
// Script jQuery
<script>
$(document).ready(function () {
if (getCookie('_COOKIESAUTH') != "1") {
document.getElementById("barra-informativa").style.display = "block";
}
else {
document.getElementById("barra-informativa").style.display = "none";
}
});
</script>
// Script JavaScript
<script>
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start, c_end));
}
return c_value;
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ?
"" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
if (getCookie('_COOKIESAUTH') != "1") {
document.getElementById("barra-informativa").style.display = "block";
}
function PutCookie() {
setCookie('_COOKIESAUTH', '1', 365);
document.getElementById("barra-informativa").style.display = "none";
}
</script>Los estilos CSS
Mediante estilos CSS definiremos la posición y el aspecto de la 'barra informativa'. En este caso la hemos 'anclado' a la parte inferior de la pantalla de forma fija (position:fixed) de tal manera que siempre sea visible para el usuario.
#barra-informativa {
display: none;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: auto;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 99999;
padding: 6px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
padding-left: 5px;
font-size: 0.95em;
top: 30%;
}
.inner a.info {
padding-left: 5px;
text-decoration: underline !important;
color: #fff;
font-size: 0.90em;
font-weight: bold;
}
.inner a.ok {
padding: 5px;
margin: 0px;
min-width: 0px;
color: #ffffff;
text-decoration: none;
padding-left: 7px;
padding-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: none;
font-size: 0.90em !important;
}
Nuevo comentario
Comentarios
No hay comentarios para este Post.