Construye un área de miembros

En este tutorial le das a tu sitio sus propios miembros. Los visitantes crean una cuenta, inician sesión con una contraseña o con un enlace de acceso y llegan a una página cerrada para todos los demás. También agregas un rol y muestras contenido extra a los visitantes que lo tienen. Necesitas un sitio con una página de inicio; las cuentas de visitantes viven en la propia base de datos del sitio.

Agrega las páginas

1. Crea tres páginas

   Abre la pestaña Pages en la barra lateral izquierda y presiona + (Add page) tres veces. Llama a las páginas Sign up, Log in y Members.

2. Define sus rutas

   Abre cada página, haz clic en un espacio vacío del lienzo para que no haya nada seleccionado y define Path en los ajustes de la página: /signup, /login y /members.

Construye el formulario de registro

1. Inserta un formulario

   En la página Sign up, presiona + en la pestaña Layers y elige Form. Viene con un input Email, un área de texto para el mensaje, un botón Send y dos frames de estado.

2. Desactiva los envíos integrados

   Selecciona el formulario y pon Action en Do nothing en la sección Form. Tu flujo de trabajo se encarga del envío en lugar de la bandeja de Forms.

3. Da forma a los campos

   Elimina el área de texto del mensaje. Inserta dos elementos Input en el formulario: uno con Name name y Label Tu nombre, y otro con Name password, Label Contraseña y Type Password. Selecciona el botón y cambia su Text a Crear cuenta.

4. Conecta los campos a variables

   Selecciona cada input y presiona + (Create variable) junto a Value en la sección Field. El input y la nueva variable de página se mantienen sincronizados, así que los valores del formulario quedan listos como vars.email, vars.password y vars.name.

Registra al visitante

1. Agrega un flujo de trabajo de envío

   Selecciona el formulario, abre Events en el inspector, deja Submit seleccionado y presiona Add workflow. El espacio de trabajo Logic se abre en el nuevo flujo de trabajo.

2. Crea la cuenta

   Presiona Add step y elige Sign up visitor en Visitor auth. Para Email, presiona el botón ƒ (Use an expression) y escribe vars.email. Haz lo mismo para Password con vars.password y para Name con vars.name.

3. Ve a la página de miembros

   Presiona Add step, elige Go to page y elige Members como Destination. El paso solo se ejecuta cuando el registro funcionó.

4. Muestra qué salió mal

   En On error, presiona Add error handler, luego Add error step y elige Show toast. Pon Message en la expresión error.message y Variant en Error. Ahora un visitante que usa un email que ya tiene cuenta ve el motivo.

Construye la página de inicio de sesión

1. Copia el formulario

   Copia el formulario de registro con ⌘C, abre la página Log in y pégalo con ⌘V. Elimina el input del nombre y cambia el texto del botón a Iniciar sesión. Conecta los inputs de email y contraseña a nuevas variables en esta página, como antes.

2. Inicia la sesión del visitante

   Agrega un flujo de trabajo Submit al formulario. Agrega Log in visitor con Email vars.email y Password vars.password, y luego Go to page con Members. Agrega el mismo aviso de error en On error.

3. Ofrece un enlace de acceso

   Agrega un Button debajo del formulario con el texto Envíame un enlace de acceso y pon su Type en Button, para que no envíe el formulario. En Events, agrega un flujo de trabajo Click con Send sign-in link (Email vars.email) y un Show toast que diga Revisa tu bandeja de entrada.

Cierra la página de miembros

1. Restringe la página

   Abre la página Members y haz clic en un espacio vacío del lienzo. En la sección Access, activa Restrict. La Rule empieza como user.isLoggedIn, que es justo lo que quieres aquí.

2. Lleva a los visitantes a la página de inicio de sesión

   Pon Otherwise en la página Log in. Los visitantes que no han iniciado sesión se redirigen allí; sin una página de redirección reciben un 404.

3. Saluda al visitante

   Agrega un elemento Text. En Typography, presiona el botón de llaves junto a Content (Bind Text) y escribe 'Welcome, ' + user.name.

4. Agrega un botón para cerrar sesión

   Agrega un Button con el texto Cerrar sesión. Dale un flujo de trabajo Click con Log out visitor y luego Go to page con tu página de inicio.

Agrega un rol premium

1. Crea el rol

   Abre el espacio de trabajo Tables desde la parte inferior de la barra lateral izquierda y elige Visitors. Escribe premium en New role y presiona Add role. Los nombres de rol usan letras minúsculas, dígitos, _ y -.

2. Muestra contenido solo a los miembros premium

   En la página Members, agrega un frame con un mensaje premium corto. En Visibility, enlaza Show when a user.roles.includes('premium').

3. Aplica los cambios de rol sin recargar

   Agrega un Button con el texto Actualizar mi acceso y un flujo de trabajo Click con Refresh user. Vuelve a cargar user desde el servidor, así que un rol que asignas mientras el visitante está en la página aparece de inmediato.

Publica y prueba

1. Publica en staging

   Presiona Publish en la barra de herramientas, deja Staging seleccionado y confirma.

2. Prueba la página cerrada

   Abre /members en la dirección de staging. Llegas a la página de inicio de sesión, porque no has iniciado sesión.

3. Regístrate

   Abre /signup, crea una cuenta y comprueba que la página de miembros te salude por tu nombre. Presiona Cerrar sesión e inicia sesión otra vez en /login.

4. Hazte premium

   De vuelta en el editor, abre Tables → Visitors. Tu cuenta está en la lista. Haz clic en ella, marca premium en el panel lateral y luego presiona Actualizar mi acceso en la página de staging. Aparece el mensaje premium.

Lo que aprendiste

• Los pasos de cuentas de visitantes registran a los visitantes, inician y cierran su sesión, envían enlaces de acceso y actualizan user.
• Una regla de acceso de página se ejecuta en el servidor en cada solicitud y redirige a los visitantes que no la cumplen.
• user siempre es un objeto; comprueba user.isLoggedIn y user.roles.includes(…).
• Los roles se definen y se asignan en Tables → Visitors.

Sigue con los próximos tutoriales o lee las guías en las que se basa este: