RGPD: Registrar el consentimiento con Lock

Describe cómo puedes personalizar Lock para recopilar información de consentimiento

En este tutorial, veremos cómo puedes usar Lock para solicitar información de consentimiento y luego guardar esta información en los metadatos del usuario. Para obtener más información, consulta Comprende cómo funcionan los metadatos en los perfiles de usuario.

Si en su lugar deseas registrar el consentimiento con una interfaz de usuario personalizada, consulta RGPD: Registrar el consentimiento con una interfaz de usuario personalizada.

El contenido de este documento no pretende ofrecer asesoramiento legal ni debe considerarse un sustituto de la asistencia legal. La responsabilidad final de comprender y cumplir el RGPD recae en ti, aunque Auth0 te ayudará a cumplir los requisitos del RGPD siempre que sea posible.

El contenido de estos documentos no pretende ofrecer asesoramiento legal ni debe considerarse un sustituto de la asistencia legal. La responsabilidad final de comprender y cumplir el RGPD recae en ti, aunque Auth0 te ayudará a cumplir los requisitos del RGPD siempre que sea posible.

​

Descripción general

Configuraremos una aplicación JavaScript de página única sencilla y una conexión de base de datos (usaremos la infraestructura de Auth0 en lugar de configurar nuestra propia base de datos).

En lugar de crear una aplicación desde cero, usaremos el ejemplo de Quickstart de JavaScript de Auth0. También usaremos las páginas de Universal Login de Auth0 para implementar una experiencia de Universal Login, en lugar de integrar el inicio de sesión en nuestra aplicación. Para obtener más información sobre Universal Login, consulte Auth0 Universal Login. Para obtener más información sobre las diferencias entre Universal Login y el inicio de sesión integrado, consulte Centralized Universal Login vs. Embedded Login.

Recopilaremos información de consentimiento en varios escenarios y la guardaremos en los metadatos del usuario.

Todos los escenarios guardarán las siguientes propiedades en los metadatos del usuario:

• una propiedad consentGiven, con valores true/false, que indica si el usuario ha dado su consentimiento (true) o no (false)
• una propiedad consentTimestamp, que contiene la marca de tiempo Unix de cuándo el usuario dio su consentimiento

Por ejemplo:

{
  "consentGiven": "true"
  "consentTimestamp": "1525101183"
}

Veremos tres implementaciones diferentes para esto:

• una que muestra enlaces a otras páginas donde se pueden consultar los Términos y Condiciones y/o la información de la política de privacidad
• una que añade campos personalizados al widget de registro y funciona con conexiones de base de datos
• una que redirige a otra página donde el usuario puede otorgar su consentimiento y funciona con conexiones sociales

​

Configura la aplicación

1. Ve a Auth0 Dashboard > Applications > Applications y crea una nueva aplicación. Elige Single Web Page Applications como tipo.

2. Ve a Settings y configura Allowed Callback URLs como http://localhost:3000.

   Este campo contiene el conjunto de URL a las que Auth0 puede redirigir a los usuarios después de autenticarse. Nuestra aplicación de ejemplo se ejecutará en http://localhost:3000, por eso configuramos este valor.

3. Copia los valores de ID de cliente y dominio. Los necesitarás en breve.

4. Ve a Auth0 Dashboard > Authentication > Database y crea una nueva conexión. Haz clic en Create DB Connection, asigna un nombre a la nueva conexión y haz clic en Save. También puedes habilitar una conexión social en Auth0 Dashboard > Authentication > Social (vamos a habilitar el inicio de sesión con Google para este tutorial).

5. Ve a la pestaña Applications de la conexión y asegúrate de que tu aplicación recién creada esté habilitada.

6. Descarga el ejemplo de SPA de JavaScript.

​

Opción 1: Mostrar el enlace de Términos y condiciones

En esta sección, personalizaremos el widget de inicio de sesión para agregar una casilla que los usuarios deberán marcar para poder registrarse. La etiqueta de la casilla incluirá enlaces a páginas que muestran los Términos y condiciones y la política de privacidad.

Esto funciona tanto para conexiones de base de datos como para inicios de sesión sociales.

1. Ve a Auth0 Dashboard > Branding > Universal Login.

2. Selecciona la vista Login y habilita el interruptor Customize Login Page.

3. Busca el menú desplegable Default Templates y selecciona Lock. El bloque de código se completará automáticamente.

4. Para agregar un campo para el metadato consentGiven, usa la opción mustAcceptTerms. Para incluir enlaces a tus páginas de Términos y condiciones y/o política de privacidad, usa la opción languageDictionary. Para obtener más información, consulta Lock Configuration Options. En el siguiente ejemplo, se muestra el texto I agree to the terms of service and privacy policy (incluidos enlaces a ambas páginas) junto a la casilla:

   //código reducido por simplicidad
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //código reducido por simplicidad
         },
         languageDictionary: {
           signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
         },
         mustAcceptTerms: true,
         //código reducido por simplicidad
       });
   

   Para ver cómo quedará, selecciona la vista Preview y, cuando se cargue Lock, selecciona Sign Up.

5. Esta casilla obliga a los usuarios a aceptar los términos antes de poder registrarse, pero no establece ningún metadato. Para guardar la selección del usuario en la propiedad de metadatos consentGiven, crea una nueva Action. Introduce un nombre descriptivo para tu Action (por ejemplo, Set consent flag upon signup), selecciona el trigger Login / Post Login porque vas a agregar la Action al flujo Login y, a continuación, selecciona Create.

6. La siguiente pantalla es el editor de código de Actions. Copia en él el siguiente código JavaScript y, a continuación, selecciona Save Draft para guardar los cambios:

   exports.onExecutePostLogin = async (event, api) => {
     const { consentGiven } = event.user.user_metadata || {};
   
     // omitir si el usuario ya se registró
     if ( consentGiven ) {
       return;
     }
   
     // primer inicio de sesión/registro
     api.user.setUserMetadata("consentGiven", true);
     api.user.setUserMetadata("consentTimestamp", Date.now());
     return;
   }
   

   Este código establece el metadato consentGiven en true si todavía no está establecido (lo que significa que es el primer inicio de sesión después del registro).

7. En la barra lateral del editor de código de Actions, selecciona Test (icono de reproducción) y, a continuación, selecciona Run para probar tu código.

8. Cuando estés listo para implementar la Action, selecciona Deploy.

Por último, agrega la Action que creaste al Login Flow. Para obtener información sobre cómo adjuntar Actions a Flows, consulta la sección “Attach the Action to a flow” en Write Your First Action.

​

Opción 2: Agregue campos personalizados para conexiones de base de datos

En esta sección, personalizaremos el widget de inicio de sesión para agregar una casilla que los usuarios marcarán si aceptan el procesamiento de su información.

Esto solo funciona para conexiones de base de datos (si usa inicios de sesión sociales, consulte el siguiente párrafo).

1. Vaya a Auth0 Dashboard > Branding > Universal Login.

2. Seleccione la vista Login y active el interruptor Customize Login Page.

3. Busque el menú desplegable Default Templates y seleccione Lock. El bloque de código se completará automáticamente.

4. Para agregar un campo para los metadatos consentGiven, use la opción additionalSignUpFields. Para obtener más información, consulte Lock Configuration Options. En el siguiente ejemplo, el tipo se establece en checkbox (para mostrar una casilla), la etiqueta en I consent to data processing y el valor predeterminado en checked.

   //código reducido por simplicidad
       var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
         auth: {
           //código reducido por simplicidad
         },
         additionalSignUpFields: [{
           type: "checkbox",
           name: "consentGiven",
           prefill: "true",
           placeholder: "I consent to data processing"
         }],
         //código reducido por simplicidad
       });
   

5. Para ver cómo se mostrará, seleccione la vista Preview y, cuando se cargue Lock, seleccione Sign Up.

Tenga en cuenta que, en esta opción, solo establecemos la casilla y no la marca de tiempo. Mostrar la hora actual en el widget de inicio de sesión no es lo ideal; por eso no agregamos un campo de registro adicional. Lo que debe hacer es establecer la marca de tiempo en segundo plano, con una regla que compruebe el valor de consentGiven y establezca el metadato adicional consentTimestamp con la marca de tiempo actual.

​

Opción 3: Redirigir a otra página

Si usa inicios de sesión sociales, no es posible agregar campos personalizados, pero puede redirigir al usuario a otra página para solicitar el consentimiento y cualquier información adicional, y luego redirigirlo de nuevo para completar la transacción de autenticación. Esto puede hacerse con Redirect Actions. Para obtener más información, consulte Redirect with Actions. Usaremos esta misma Action para guardar la información de consentimiento en los metadatos del usuario, de modo que podamos hacer un seguimiento de esta información y no volver a solicitar el consentimiento en el siguiente inicio de sesión.

Para simplificar, usaremos un formulario de consentimiento de ejemplo. Tendrá que alojar este formulario y su URL debe ser de acceso público. En el Paso 2, deberá proporcionar a Auth0 la URL en la que se puede acceder al formulario. Si necesita una pantalla de consentimiento especializada (por ejemplo, consentimiento parental), debe crear su propio formulario de consentimiento personalizado. Tenga en cuenta que las leyes varían según el país.

1. Cree una nueva Action. Introduzca un Nombre descriptivo para su Action (por ejemplo, Redirect to consent form), seleccione el trigger Login / Post Login porque va a agregar la Action al flujo de Login y, a continuación, seleccione Create.

2. Localice el editor de código de Actions y seleccione el icono de Secrets (llave) en la barra lateral. Agregue la URL del formulario de consentimiento como un Secret creando un par clave/valor:

   • Key: CONSENT_FORM_URL
   • Value: your-consent-form-url.com (Asegúrese de proporcionar la URL de acceso público donde se encuentra su formulario de consentimiento).

3. Copie el siguiente código JavaScript en el editor de código de Actions y seleccione Save Draft para guardar los cambios:

   exports.onExecutePostLogin = async (event, api) => {
       const { consentGiven } = event.user.user_metadata || {};
   
       // redirigir al formulario de consentimiento si el usuario aún no ha dado su consentimiento
       if (!consentGiven && api.redirect.canRedirect()) {
         const options = {
           query: {
             auth0_domain: `${event.tenant.id}.auth0.com`,
           },
         };
         api.redirect.sendUserTo(event.secrets.CONSENT_FORM_URL, options);
       }
   };
   
   // si el usuario hace clic en 'I agree' en el formulario de consentimiento, guárdelo en su perfil para que no se le vuelva a solicitar
   exports.onContinuePostLogin = async (event, api) => {
     if (event.request.body.confirm === "yes") {
       api.user.setUserMetadata("consentGiven", true);
       api.user.setUserMetadata("consentTimestamp", Date.now());
       return;
     } else {
       return api.access.deny("User did not consent");
     }
   };
   

4. En la barra lateral del editor de código de Actions, seleccione Test (icono de reproducción) y, a continuación, seleccione Run para probar su código.

5. Cuando esté listo para que la Action entre en producción, seleccione Deploy.

Por último, agregue la Action que creó al flujo de Login. Para obtener información sobre cómo adjuntar Actions a los flujos, consulte la sección “Attach the Action to a flow” en Write Your First Action.

Al configurar la redirección a su formulario de consentimiento para usarlo en un entorno de producción, asegúrese de revisar Trusted Callback URLs y Data Integrity en relación con cuestiones de seguridad.

Hemos terminado con la parte de configuración; ¡vamos a probarla!

​

Pruebe la configuración

1. Vaya a la carpeta donde descargó la aplicación y ejecútela.

   npm install
       npm run
   

2. Vaya a http://localhost:3000. Haga clic en Login. Cuando se muestre Lock, haga clic en Sign Up. La página de inicio de sesión estará disponible de forma predeterminada en YOUR_DOMAIN/login. Para obtener información sobre cómo usar su propio dominio, consulte Custom Domains.

3. Si siguió la primera opción de implementación, debería ver la casilla para aceptar los términos de servicio y la política de privacidad. Tenga en cuenta que el botón Sign up permanece deshabilitado hasta que marque la casilla. Siga los enlaces para comprobar que funcionen. Introduzca un correo electrónico y una contraseña, acepte los términos y haga clic en Sign Up. Como alternativa, si usa una conexión social, acepte los términos y elija Sign Up with Google.

4. Si siguió la segunda opción de implementación, debería ver el nuevo campo personalizado que agregamos. Introduzca un correo electrónico y una contraseña, y deje marcada la casilla I consent to data processing. Haga clic en Sign Up.

5. Si siguió la tercera opción de implementación, elija Sign Up with Google. Se le redirigirá al formulario de consentimiento. Marque la casilla I agree y haga clic en Submit.

   Si no marca la casilla I agree antes de hacer clic en Submit, verá un error emergente Unauthorized. Check the console for details.. En la consola verá este JSON:

   {
         error: "unauthorized", 
         errorDescription: "User did not consent!", 
         state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3"
       }
   

   Tenga en cuenta que el usuario se crea, pero no podrá iniciar sesión. Si lo intenta, se le volverá a pedir que dé su consentimiento.

6. Vaya a Auth0 Dashboard > User Management > Users y busque el nuevo usuario.

7. Vaya a User Details y desplácese hacia abajo hasta la sección Metadata. En el área de texto user_metadata debería ver lo siguiente:

   {
         "consentGiven": "true"
         "consentTimestamp": "1525101183"
       }
   

¡Eso es todo; ha terminado!