Dibujar su propia página de inicio de sesión

Objetivo

Hacer que la entrada a su portal se parezca al resto de su sitio: una página Sign in, una página Create account y una página Forgot password dibujadas por usted, con sus páginas de inicio y de precios abiertas a cualquiera que todavía no haya iniciado sesión.

Antes de empezar

• Un portal configurado como Personas que inician sesión. Consulte Pedir a los visitantes que inicien sesión.
• Quien administra su instalación de Parsware ha configurado el envío de correo electrónico. Crear una cuenta y restablecer una contraseña envían ambos un correo.

1. Dibujar las pantallas

En la aplicación de Studio de su portal, dibuje tres pantallas. Póngales el nombre que quiera; estos nombres son solo ejemplos (se dejan en inglés porque son los que esperan las tarjetas del kit de inicio de sesión; consulte el paso 7):

Pantalla	Qué contiene
Sign in	Un cuadro de correo electrónico, un cuadro de contraseña, un cuadro de código (consulte más abajo) y un botón Iniciar sesión
Create account	Un cuadro de nombre, un cuadro de correo electrónico, un cuadro de contraseña y un botón Crear cuenta
Forgot password	Un cuadro de correo electrónico y un botón Enviar el vínculo

Seleccione cada cuadro y establezca Acepta: Una dirección de correo electrónico para la dirección y Una contraseña para la contraseña. Un cuadro de contraseña oculta lo que se escribe y tiene un ojo para mostrarlo.

Enlace cada cuadro a un campo de estado (state.email, state.password), como haría en cualquier formulario.

2. Asignar un controlador a cada botón

Botón	Controlador
Iniciar sesión	signIn(getState("email"), getState("password"), getState("code"), "needsCode");
Crear cuenta	signUp(getState("name"), getState("email"), getState("password"), "sent");
Enviar el vínculo	requestPasswordReset(getState("email"), "sent");

La contraseña va a la plataforma, exactamente igual que desde la página de inicio de sesión de la propia plataforma. Nunca se envía a nada suyo, y nada de su página puede leer la sesión que se devuelve.

El último argumento es el nombre de un campo de estado, y es la manera en que su página sabe qué ha ocurrido:

• signUp y requestPasswordReset lo establecen en true cuando se ha enviado el correo. Ponga el formulario en una pila con Visible !state.sent, y un mensaje «Revise su correo» en otra con Visible state.sent.
• signIn lo establece en true cuando la cuenta tiene activado el inicio de sesión en dos pasos. Dé al cuadro de código Visible state.needsCode: el visitante escribe los seis dígitos y vuelve a pulsar Iniciar sesión.

¿Por qué no navegar a una pantalla de «revise su correo»?

La siguiente línea de un controlador se ejecuta tanto si la llamada funcionó como si no, así que un navigate(...) después de signUp iría allí incluso cuando se rechazara la dirección. Mostrar el mensaje a partir del campo de estado hace que solo aparezca cuando el correo se ha enviado de verdad.

Si la plataforma lo rechaza (una contraseña incorrecta, una dirección que ya tiene cuenta), se indica el motivo al visitante en un mensaje, en su idioma. No tiene que dibujar nada para eso.

3. Indicárselas al portal

1. Abra su solución, elija Portales y abra el portal.
2. En Pantalla de inicio de sesión, elija Sign in.
3. En Abiertas antes de iniciar sesión, elija las pantallas que puede ver cualquiera: su página de inicio, su página de precios, Create account y Forgot password.
4. Pulse Guardar.

Qué ve un visitante

Quien no ha iniciado sesión puede leer todas las pantallas abiertas. Si va a cualquier otra pantalla (por un vínculo, un marcador o un botón), ve su pantalla Sign in, en la dirección de esa pantalla. En cuanto inicia sesión, esa misma dirección pasa a ser la pantalla que pidió.

Así, un vínculo Su cuenta en su barra superior funciona para todo el mundo: muestra el inicio de sesión a un desconocido y la cuenta a quien ha iniciado sesión.

Quien inicia sesión en la propia pantalla Sign in pasa a la pantalla de inicio de su portal.

Las pantallas que están detrás del inicio de sesión no se envían a desconocidos

Una pantalla que no está abierta no está oculta en la página: nunca se envía a quien no ha iniciado sesión. Lo que recibe en su lugar es su pantalla de inicio de sesión.

4. Dibujar también la página que abre un vínculo de restablecimiento (opcional)

Cuando alguien pide un vínculo de restablecimiento de contraseña, el vínculo del correo abre una página en la que elige una contraseña nueva. También puede dibujar esa página.

1. Dibuje una pantalla (New password, por ejemplo) con dos cuadros de contraseña enlazados a state.password y state.again, y un botón Establecer la contraseña con este controlador:

   if (getState("password") != getState("again")) {
     notifyError("The two passwords are different.");
   } else {
     resetPassword(getState("password"));
   }

2. En el portal, elíjala en Pantalla de nueva contraseña. Ese cuadro aparece cuando se ha elegido una Pantalla de inicio de sesión, porque la pantalla de inicio de sesión es adonde va el visitante a continuación.

Su pantalla solo ve la contraseña. El vínculo lleva un secreto del correo. La plataforma lo quita de la dirección antes de que aparezca su pantalla y lo vuelve a añadir ella misma cuando su botón llama a resetPassword. Nada de su página puede leerlo.

Cuando se establece la contraseña, se cierra la sesión del visitante en todas partes, se le lleva a su pantalla Sign in y se le indica que su contraseña está establecida. Si alguien abre New password sin seguir un vínculo, al pulsar el botón se le indica que abra el vínculo de su correo.

No tiene que agregar New password a Abiertas antes de iniciar sesión. Quien tiene un vínculo de restablecimiento no ha iniciado sesión, por definición, así que la página siempre se le muestra.

5. Dibujar también la página que abre un vínculo de confirmación (opcional)

Después de que alguien cree una cuenta, el vínculo de su correo de confirmación abre una página que confirma su dirección. También puede dibujar esa página: es la primera página que ve un cliente nuevo.

1. Dibuje una pantalla (Address confirmed, por ejemplo). No hay nada que escribir en ella, así que dé a la propia pantalla un controlador de carga que confirme de inmediato:

   confirmEmail("confirmed");

2. Ponga en ella una línea «Comprobando su vínculo…» con Visible !state.confirmed, y un mensaje «Su dirección está confirmada» con un botón Iniciar sesión en una pila con Visible state.confirmed.

3. En el portal, elíjala en Pantalla de dirección confirmada.

Su pantalla nunca ve el secreto del vínculo, exactamente igual que en la página de nueva contraseña. Y un vínculo de confirmación solo funciona una vez, así que, por muchas veces que lo pida su pantalla, la plataforma confirma una vez y da la misma respuesta a todas las peticiones posteriores. Si el vínculo ya se ha usado o ha caducado, se le indica al visitante en un mensaje.

Deje Pantalla de dirección confirmada vacía para conservar la página propia de la plataforma. Esa página confirma la dirección y devuelve al visitante a su pantalla Sign in con un mensaje.

6. Una dirección aún sin confirmar, y una contraseña nueva (opcional)

Quien no ha confirmado su dirección no puede iniciar sesión, y se le indica. Dé a signIn un quinto argumento (el nombre de un campo de estado) y se establecerá en true cuando ese sea el motivo:

signIn(getState("email"), getState("password"), getState("code"), "needsCode", "unconfirmed");

Con el campo indicado, la plataforma no muestra ningún mensaje propio para este rechazo: su dibujo es el mensaje, así que dibuje las palabras además del botón. Sin él, se le indica al visitante en un mensaje, como con cualquier otro rechazo.

Dibuje una pila con Visible state.unconfirmed que contenga un botón Volver a enviar el correo de confirmación:

resendConfirmation(getState("email"), "resent");

resendConfirmation establece el campo que nombre en cuanto se pide y, como el vínculo de restablecimiento, dice «si hay una cuenta pendiente de confirmar», porque la plataforma no dirá si la hay. Una pantalla Resend confirmation con un cuadro de correo electrónico y ese botón, abierta antes de iniciar sesión, sirve a quien nunca intentó iniciar sesión.

Un visitante que ha iniciado sesión puede cambiar su contraseña en una pantalla situada detrás de la entrada: la actual, la nueva dos veces, y

changePassword(getState("current"), getState("password"));

Compare primero en el controlador las dos contraseñas nuevas. Si todo va bien, se cierra la sesión del visitante en todas partes y el portal le lleva a su inicio de sesión, con un mensaje que indica que la contraseña está establecida.

Un visitante que ha iniciado sesión también puede cambiar su nombre y su foto. En su página de cuenta:

changeName(getState("name"), "renamed");   // "renamed" is set to true once it is saved
changePhoto();                             // opens the device's picture chooser
removePhoto();

changePhoto() abre el selector de imágenes del propio visitante, reduce la imagen en el navegador y la guarda; si cancela, no ocurre nada. Después, user.name y user.photo muestran los nuevos valores en todas las pantallas. Donde user.photo esté vacío, dibuje un marcador de posición en lugar de una imagen vacía.

7. O colocar el kit de inicio de sesión en lugar de dibujarlo

La solución de ejemplo portal-sign-in-kit tiene todas las pantallas anteriores ya dibujadas, como componentes: una tarjeta de inicio de sesión, una tarjeta de creación de cuenta, la tarjeta de cuenta con el nombre y la foto, y el inicio de sesión en dos pasos. Su aplicación comparte sus componentes, así que, después de importarla, todas las aplicaciones del entorno los encuentran en Componentes → De otras aplicaciones, estén en la solución que estén.

Un ejemplo que coloca las tarjetas no necesita que se importe el kit. Lleva su propia copia de cada tarjeta, y por eso ya están en su diseñador. Importe el kit cuando quiera colocar las tarjetas en una aplicación propia, o cambiarlas en un solo sitio.

Coloque una tarjeta en una pantalla y haga que sus propiedades apunten al estado de su pantalla: email a state.email, sent a state.sent. La tarjeta escribe lo que se teclea en esos campos, y también deja allí sus respuestas. Ponga a sus pantallas los nombres que esperan las tarjetas (Sign in, Create account, Forgot password, Resend confirmation, New password, Address confirmed, Account, Change password, Sign-in security) y los vínculos entre ellas funcionarán.

Cuando el kit cambie, abra su aplicación en el diseñador: le indicará que sus copias se han actualizado. Guárdela, y su portal tendrá el cambio.

Los ejemplos portal-landing-page, portal-service-desk y portal-sign-in-and-accounts colocan el kit de esta manera.

Lo que esto no hace

• No cambia quién puede iniciar sesión. Es la misma cuenta, las mismas reglas de contraseña y el mismo inicio de sesión en dos pasos que en la página de la plataforma.
• No funciona en un portal que cualquiera puede abrir. No hay nadie que inicie sesión, así que el portal rechaza ahí una pantalla de inicio de sesión.

Pruébelo

Importe la solución de ejemplo portal-sign-in-kit y después portal-landing-page. La página de inicio tiene toda la entrada y una página de cuenta detrás, colocadas a partir del kit, y una página How this sample works que lo explica paso a paso.

Temas relacionados

• Pedir a los visitantes que inicien sesión
• Permitir que los visitantes activen el inicio de sesión en dos pasos
• Publicar una aplicación como portal