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).

barra informativa

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&nbsp;información</b>
                </a>&nbsp;
                <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;
}

Descargas

Página informativa - politica-de-cookies.html

  Compartir


  Nuevo comentario

El campo Comentario es obligatorio.
El campo Nombre es obligatorio.

Enviando ...

  Comentarios

No hay comentarios para este Post.



  Etiquetas

.NET Core .NET Framework .NET MVC .NET Standard AJAX ASP.NET ASP.NET Core ASP.NET MVC Bootstrap Buenas prácticas C# Cookies Entity Framework JavaScript jQuery JSON PDF Pruebas Unitarias Seguridad SEO Sql Server SqLite Swagger Validación Web API Web Forms

  Populares


  Nuevos















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. Más información   Acepto