Saltar al contenido principal

Antes de comenzar

Asegúrese de tener:
La experiencia Keep Me Signed In ofrece a los usuarios la opción de permanecer conectados en un dispositivo de confianza.
Imagen de inicio de sesión
  • Si la casilla Keep Me Signed In está seleccionada, se establece una sesión persistente que se mantiene aunque se reinicie el navegador.
  • Si la casilla Keep Me Signed In no está seleccionada, se establece una sesión no persistente que caduca cuando se cierra el navegador.
Con sesiones no persistentes (efímeras) y Actions, el servidor gestiona esta lógica de forma segura sin exponer tokens de actualización al frontend. Con Custom Prompts, Auth0 CLI y sesiones efímeras mediante Actions, puede implementar un flujo de “Keep Me Signed In” moderno y seguro, sin tokens de actualización, sin soluciones alternativas de sesión del lado del cliente y con control total desde el backend. Esta solución es ideal para clientes que priorizan:
  • Gestión de sesiones del navegador con enfoque de confianza cero
  • Persistencia mínima de la sesión
  • Excepciones para dispositivos de confianza

​
1. Configure una página de Universal Login y añada una pantalla personalizada

Para recopilar la preferencia Keep Me Signed In del usuario, debe personalizar Universal Login configurando una plantilla de página y agregando una pantalla personalizada mediante Auth0 CLI.

​
Opcional: habilite la plantilla de página de Universal Login

Este paso solo es necesario si su inquilino no tiene configurada una plantilla de Universal Login.
Use el siguiente comando para crear o actualizar la plantilla de la página: 
auth0 universal-login templates update
El editor de personalización abre la plantilla de la página de inicio de sesión. Puede usar cualquier estructura HTML que se adapte a su marca. Aquí tiene una plantilla de ejemplo mínima con un fondo y un widget integrado: 
<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1643916861364-02e63ce3e52f");
        background-size: cover;
        background-position: center;
      }
      .prompt-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>
  </head>
  <body class="_widget-auto-layout">
    {% if prompt.name == "login" or prompt.name == "signup" %}
      <div class="prompt-wrapper">
        {%- auth0:widget -%}
      </div>
    {% else %}
      {%- auth0:widget -%}
    {% endif %}
  </body>
</html>
Guarde y cierre el editor; la CLI de Auth0 le pedirá que confirme: 
Do you want to save the template? Yes

▸ Successfully updated the template for the New Universal Login Experience!

​
2. Agrega una casilla «Keep Me Signed In» con Auth0 CLI

Para agregar una casilla de verificación a la pantalla de Universal Login, sigue estos pasos:

​
Abra el editor de personalización

  1. Abra el editor de personalización para la pantalla login-id o login, según la configuración de su inquilino:
auth0 universal-login customize -p login-id
  1. Selecciona standard como modo de renderizado
Rendering Mode: standard
El editor de personalización se abre en una dirección local: 
http://localhost:52649
Si no sabe con certeza si su inquilino usa login o login-id, consulte la personalización de pantallas de Auth0.

​
Configura la casilla de verificación

Abre la opción Partials en el editor de personalización:
  1. Establece Prompt en: login-id (o login)
  2. Establece Screen en: login-id (o login)
  3. Establece Partial en: form-content-end
Partials de Auth0 CLI
Agrega el siguiente fragmento de HTML: 
<div class="ulp-field">
  <input type="checkbox" name="ulp-remember-me" id="remember-me">
  <label for="remember-me">Stay signed in on this device?</label>
</div>
Esto muestra la casilla de verificación debajo del formulario de inicio de sesión.

​
Implementa los cambios

Selecciona Deploy Changes en la esquina superior derecha para guardar y aplicar la personalización.

​
Punto de control

Inicia sesión con Universal Login. La pantalla de inicio de sesión incluye una casilla Keep Me Signed In.
Imagen de inicio de sesión

​
3. Crear una Action de post-login con Auth0 CLI

Cree un archivo llamado set-session-persistence.js para usarlo con Auth0 CLI y agregue el siguiente código: 
exports.onExecutePostLogin = async (event, api) => {

  // Aplicar el cambio solo cuando el parámetro esté disponible
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode('persistent');
  }
};
Esta Action hace que la cookie de sesión se mantenga entre reinicios del navegador cuando el usuario marca la casilla. Para ampliar también la duración de la sesión en dispositivos de confianza, consulte Establecer la duración de la sesión para dispositivos de confianza más abajo. Use Auth0 CLI para crear o actualizar su Action de post-login con el archivo set-session-persistence.js: 
auth0 actions create --name kmsi --trigger post-login --code "$(cat set-session-persistence.js)"
La CLI de Auth0 devuelve el id de la Action: 
ID             f54c4aae-431f-4290-a7e0-cfc6a3f28386
NAME           kmsi
TYPE           post-login
STATUS         pending
DEPLOYED       ✗
LAST DEPLOYED
LAST UPDATED   0 seconds ago
CREATED        0 seconds ago
CODE           exports.onExecutePostLogin = async (event, api) => {
                   if (event.request.body['ulp-remember-me']) {
                     api.session.setCookieMode("persistent");
                   } else {
                     api.session.setCookieMode("non-persistent");
                   }
                 };
Implementa tu Action usando su id: 
auth0 actions deploy <id>
Navegue hasta Auth0 Dashboard > Actions > Triggers > Post-Login para añadir la nueva Action al flujo actual y seleccione Apply.
Dashboard Actions Triggers Post Login

​
Establezca la duración de la sesión para dispositivos de confianza

setCookieMode() solo controla cómo se envía la cookie de sesión al navegador. Una cookie persistente se mantiene incluso si se reinicia el navegador, mientras que una cookie no persistente (de sesión) se elimina al cerrar el navegador. No cambia el tiempo de expiración de la sesión en el backend. Si quiere que los dispositivos de confianza tengan una sesión de mayor duración, debe establecer explícitamente la expiración con api.session.setExpiresAt() o api.session.setIdleExpiresAt().
Para que los dispositivos de confianza tengan una sesión de mayor duración, use api.session.setExpiresAt() o api.session.setIdleExpiresAt() junto con setCookieMode(): 
exports.onExecutePostLogin = async (event, api) => {
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode("persistent");

    const now = Date.now();
    api.session.setExpiresAt(now + 7 * 24 * 60 * 60 * 1000); // 7 días
  } else {
    api.session.setCookieMode("nonpersistent");
  }
};

​
4. Pruebe la implementación

Para verificar el comportamiento de la sesión, puede: Inicie sesión con Universal Login y seleccione la casilla Keep Me Signed In.
  • En los registros del inquilino, busque (tipos de evento s o ssa)
    • cookie: { mode: "non-persistent" }
    • cookie: { mode: "persistent" }
  • Busque event.session.cookie.mode en sus Actions