RGPD: Registrar el consentimiento con una interfaz de usuario personalizada

Describe cómo puedes usar auth0.js o las API de Auth0 para recopilar información sobre el consentimiento cuando utilizas tu propia interfaz de usuario de inicio de sesión personalizada.

En este tutorial veremos cómo puede usar auth0.js o las API de Auth0 para solicitar información de consentimiento y guardar la información proporcionada en los metadatos del usuario. Para obtener más información, consulte Comprenda cómo funcionan los metadatos en los perfiles de usuario.

Si, en cambio, desea hacer seguimiento del consentimiento con Lock, consulte GDPR: Hacer seguimiento del consentimiento con Lock.

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

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

​

Descripción general

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

En todos los escenarios, se guardarán las siguientes propiedades en los metadatos del usuario:

• consentGiven (true/false) indica si el usuario ha dado su consentimiento (true) o no (false)
• consentTimestamp (marca de tiempo Unix) indica cuándo el usuario dio su consentimiento

Por ejemplo:

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

Veremos cuatro implementaciones diferentes para esto:

1. una que muestra una casilla, funciona con conexiones de base de datos y usa la biblioteca auth0.js para crear el usuario (la usan las aplicaciones de página única). Para obtener más información, consulta la Referencia de Auth0.js v9.
2. una que muestra una casilla, funciona con conexiones de base de datos y usa la Authentication API para crear el usuario (la usan las aplicaciones web tradicionales)
3. una que muestra una casilla, funciona con conexiones sociales y usa la Management API para actualizar la información del usuario (la usan tanto las aplicaciones de página única como las aplicaciones web tradicionales)
4. una que redirige a otra página donde se pueden revisar los Términos y condiciones y/o la información de la política de privacidad, y proporcionar la información de consentimiento (la usan tanto las aplicaciones de página única como las aplicaciones web tradicionales)

​

Opción 1: Usar auth0.js

En esta sección, usaremos una aplicación de una sola página (SPA) sencilla y personalizaremos el widget de inicio de sesión para agregar una casilla que los usuarios puedan usar para proporcionar información de consentimiento. 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 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.

Esto funciona solo para conexiones de base de datos (usaremos la infraestructura de Auth0, en lugar de configurar nuestra propia base de datos).

1. Vaya a Auth0 Dashboard > Applications > Applications y cree una nueva aplicación. Elija Single Web Page Applications como tipo. Vaya a Settings y establezca Allowed Callback URLs en 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 lo que establecemos este valor.

2. Copie los valores de ID de cliente y dominio. Los necesitará en breve.

3. Vaya a Auth0 Dashboard > Authentication > Database y cree una nueva conexión. Haga clic en Create DB Connection, establezca un nombre para la nueva conexión y haga clic en Save. Vaya a la pestaña Applications de la conexión y asegúrese de que la aplicación que acaba de crear esté habilitada.

4. Descargue el ejemplo de SPA de JavaScript.

5. Establezca los valores de ID de cliente y dominio.

6. Vaya a Auth0 Dashboard > Branding > Universal Login. En la pestaña Login, habilite el interruptor.

7. En el menú desplegable Default Templates, asegúrese de que esté seleccionada la opción Custom Login Form. El código ya aparece rellenado.

8. Establezca el valor de la variable databaseConnection con el nombre de la conexión de base de datos que usa su aplicación.

   //código reducido por simplicidad
   	var databaseConnection = 'test-db';
   	//código reducido por simplicidad
   

9. Para agregar un campo para los metadatos consentGiven, añada una casilla de verificación al formulario. En este ejemplo, configuraremos la casilla para que esté marcada de forma predeterminada y deshabilitada, de modo que el usuario no pueda desmarcarla. Puede ajustar esto según las necesidades de su negocio.

   //código reducido por simplicidad
       <div class="form-group">
         <label for="name">Doy mi consentimiento para el procesamiento de datos</label>
         <input
           type="checkbox"
           id="userConsent"
           checked disabled>
       </div>
       //código reducido por simplicidad
   

10. Edite la función de registro para establecer los metadatos. Tenga en cuenta que establecemos el valor de los metadatos como una cadena con el valor true, y no como un valor booleano, y usamos toString para convertir el número en una cadena. Esto se debe a una restricción del endpoint Signup de la API de autenticación, que solo acepta cadenas como valores.

    //código reducido por simplicidad
        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password,
          user_metadata: { consentGiven: 'true', consentTimestamp: Date.now().toString() }
        }, function(err) {
          if (err) displayError(err);
        });
        //código reducido por simplicidad
    

11. Para ver cómo se verá el widget de inicio de sesión, haga clic en la pestaña Preview.

1. Para probar esta configuración, ejecute la aplicación y vaya a http://localhost:3000. Cree un usuario nuevo. Luego vaya a Auth0 Dashboard > User Management > Users y busque ese usuario. Vaya a User Details y desplácese hacia abajo hasta la sección Metadata. En el área de texto user_metadata, debería ver consentGiven establecido en true.

​

Opción 2: Usar la API (base de datos)

Si publicas la página de inicio de sesión desde tu propio servidor, puedes llamar directamente al endpoint Signup de la Authentication API una vez que el usuario se haya registrado.

Para el mismo escenario que hemos estado analizando hasta ahora, una vez que registres un nuevo usuario, puedes usar el siguiente fragmento para crear el usuario en Auth0 y establecer los metadatos. Recuerda reemplazar el valor del parámetro de solicitud consentTimestamp por la marca de tiempo correspondiente al momento en que el usuario otorgó su consentimiento.

Ten en cuenta que establecemos el valor de los metadatos como una cadena con el valor true y no como un valor booleano, debido a la restricción de la API, que acepta cadenas como valores, no booleanos.

Si necesitas establecer valores booleanos, puedes usar la Management API. En este escenario, registras a tu usuario como de costumbre y luego llamas al endpoint Update User de Management API para establecer los metadatos necesarios después de que se haya creado el usuario. Para ver cómo hacerlo, sigue leyendo; el siguiente párrafo usa ese endpoint.

​

Opción 3: Usar la API (social)

Si usas conexiones sociales, no puedes usar la Authentication API para crear al usuario en Auth0, ya que ese endpoint solo funciona con conexiones de base de datos.

Lo que debes hacer en su lugar es permitir que el usuario se registre con el proveedor social (lo que creará un registro de usuario en Auth0) y luego usar la Management API para actualizar la información del usuario.

Antes de llamar a la Management API, debes obtener un token válido. Para obtener más información, consulta Get Management API Access Tokens for Production.

El artículo enlazado usa el Client Credentials Flow para obtener un token, pero no puedes usarlo desde una aplicación que se ejecuta en el navegador. En su lugar, puedes usar el Implicit Flow. Para obtener más información sobre el Client Credentials Flow, consulta Client Credentials Flow. Para obtener más información sobre el Implicit Flow, consulta Implicit Flow.

Establece el parámetro de solicitud audience en https://YOUR_DOMAIN/api/v2/ y el parámetro scope en create:current_user_metadata. Puedes usar el Token de acceso que recibirás en la respuesta para llamar al endpoint Update User de la Management API.

Una vez que tengas un token válido, usa el siguiente fragmento para actualizar los metadatos del usuario.

Ten en cuenta que, para realizar esta llamada, necesitas conocer el user_id único. Puedes obtenerlo del claim sub del ID Token, si recibiste uno en la respuesta. Para obtener más información, consulta ID Tokens. Como alternativa, si lo único que tienes es el correo electrónico, puedes obtener el id llamando a otro endpoint de la Management API. Para obtener más información, consulta Prácticas recomendadas para la búsqueda de usuarios.

​

Opción 4: Redirigir a otra página

Si desea mostrar más información a su usuario, al registrarse puede redirigirlo a otra página para solicitar su consentimiento y cualquier dato adicional, y luego redirigirlo de vuelta para completar la transacción de autenticación. Esto puede hacerse con reglas de redirección. Esa misma regla puede usarse para guardar la información de consentimiento en los metadatos del usuario, de modo que pueda realizar un seguimiento de esta información y no volver a solicitar el consentimiento en el siguiente inicio de sesión. Para obtener más información, consulte Redirect Users from Within Rules.

Deberá alojar este formulario, y la URL del formulario debe ser accesible públicamente. Más adelante en este tutorial, deberá proporcionar a Auth0 la URL en la que se puede acceder al formulario.

1. Agregue la regla de redirección. Vaya a Auth0 Dashboard > Auth Pipeline > Rules y haga clic en Create Rule. En Rules Templates, seleccione empty rule. Cambie el nombre predeterminado de la regla de empty rule a algo descriptivo (por ejemplo, Redirect to consent form).

2. Agregue el siguiente código JavaScript al editor de scripts y Save 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");
     }
   };
   

3. Vuelva a Auth0 Dashboard > Auth0 Pipeline > Rules y desplácese hasta la parte inferior de la página, donde se encuentra la sección Settings. Cree un par clave/valor de la siguiente manera:

   1. Key: CONSENT_FORM_URL
   2. Value: your-consent-form-url.com

Asegúrese de proporcionar la URL de acceso público en la que se encuentra su formulario de consentimiento.

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

Si necesita una pantalla de consentimiento especializada, por ejemplo, consentimiento parental, deberá crear su propio formulario de consentimiento personalizado. Tenga en cuenta que las leyes varían según el país.

Hemos terminado con la parte de configuración. ¡Vamos a probarla!

​

Pruebe la configuración

1. Ejecute la aplicación y vaya a https://localhost:3000.
2. Registre un nuevo usuario. Se le redirigirá al formulario de consentimiento.
3. Marque la casilla I agree y haga clic en Submit.
4. Vaya a Auth0 Dashboard > User Management > Users y busque el usuario nuevo.
5. Vaya a User Details y desplácese hacia abajo hasta la sección Metadata.
6. En el área de texto user_metadata, debería ver que el metadato consentGiven está establecido en true y que consentTimestamp está establecido en la marca de tiempo Unix del momento en que el usuario dio su consentimiento.

¡Eso es todo!