Dessiner votre propre page de connexion

Objectif

Donner à l’entrée de votre portail le même aspect que le reste de votre site : une page Sign in, une page Create account et une page Forgot password que vous avez dessinées, avec vos pages d’accueil et de tarifs ouvertes à toute personne qui ne s’est pas encore connectée.

Avant de commencer

• Un portail réglé sur Personnes qui se connectent. Voir Demander aux visiteurs de se connecter.
• La personne qui gère votre installation Parsware a configuré l’envoi d’e-mails. La création d’un compte et la réinitialisation d’un mot de passe envoient toutes deux un e-mail.

1. Dessiner les écrans

Dans l’application Studio de votre portail, dessinez trois écrans. Nommez-les comme vous voulez — ces noms ne sont que des exemples :

Écran	Ce qu’il contient
Sign in	Une zone d’e-mail, une zone de mot de passe, une zone de code (voir plus bas), un bouton Se connecter
Create account	Une zone de nom, une zone d’e-mail, une zone de mot de passe, un bouton Créer un compte
Forgot password	Une zone d’e-mail et un bouton Envoyer le lien

Pour chaque zone, sélectionnez-la et définissez Accepte : Une adresse e-mail pour l’adresse et Un mot de passe pour le mot de passe. Une zone de mot de passe masque la saisie et comporte un œil pour l’afficher.

Liez chaque zone à un champ d’état — state.email, state.password — comme pour n’importe quel formulaire.

2. Donner à chaque bouton son gestionnaire

Bouton	Gestionnaire
Se connecter	signIn(getState("email"), getState("password"), getState("code"), "needsCode");
Créer un compte	signUp(getState("name"), getState("email"), getState("password"), "sent");
Envoyer le lien	requestPasswordReset(getState("email"), "sent");

Le mot de passe est envoyé à la plateforme, exactement comme depuis la page de connexion propre à la plateforme. Il n’est jamais envoyé à quoi que ce soit qui vous appartienne, et rien sur votre page ne peut lire la session renvoyée.

Le dernier argument est le nom d’un champ d’état, et c’est ainsi que votre page apprend ce qui s’est passé :

• signUp et requestPasswordReset le passent à true une fois l’e-mail parti. Placez le formulaire dans une pile avec Visible !state.sent, et un message « Consultez vos e-mails » dans une autre avec Visible state.sent.
• signIn le passe à true lorsque le compte a activé la connexion en deux étapes. Donnez à la zone de code Visible state.needsCode : le visiteur saisit les six chiffres et appuie de nouveau sur Se connecter.

Pourquoi ne pas naviguer vers un écran « consultez vos e-mails » ?

La ligne suivante d’un gestionnaire s’exécute que l’appel ait réussi ou non : un navigate(...) après signUp y mènerait donc même si l’adresse avait été refusée. Afficher le message à partir du champ d’état garantit qu’il n’apparaît que lorsque l’e-mail est réellement parti.

Si la plateforme refuse — un mauvais mot de passe, une adresse qui a déjà un compte — le visiteur en est informé par un message, dans sa langue. Vous n’avez rien à dessiner pour cela.

3. Les indiquer au portail

1. Ouvrez votre solution, choisissez Portails, puis ouvrez le portail.
2. Dans Écran de connexion, choisissez Sign in.
3. Dans Ouverts avant la connexion, choisissez les écrans que tout le monde peut voir : votre page d’accueil, votre page de tarifs, Create account et Forgot password.
4. Appuyez sur Enregistrer.

Ce que voit un visiteur

Quelqu’un qui ne s’est pas connecté peut lire tous les écrans ouverts. S’il se rend sur un autre écran — par un lien, un favori ou un bouton — il voit votre écran Sign in, à l’adresse de cet écran. Une fois connecté, la même adresse devient l’écran qu’il avait demandé.

Un lien Votre compte dans votre barre supérieure fonctionne donc pour tout le monde : il affiche la connexion à un inconnu et le compte à une personne connectée.

Quelqu’un qui se connecte depuis l’écran Sign in lui-même poursuit vers l’écran de démarrage de votre portail.

Les écrans derrière la connexion ne sont pas envoyés aux inconnus

Un écran qui n’est pas ouvert n’est pas caché dans la page — il n’est jamais envoyé à quelqu’un qui ne s’est pas connecté. Ce que cette personne reçoit à sa place, c’est votre écran de connexion.

4. Dessiner aussi la page qu’ouvre un lien de réinitialisation (facultatif)

Lorsque quelqu’un demande un lien de réinitialisation de mot de passe, le lien de l’e-mail ouvre une page où il choisit un nouveau mot de passe. Vous pouvez aussi dessiner cette page.

1. Dessinez un écran — New password, par exemple — avec deux zones de mot de passe liées à state.password et state.again, et un bouton Définir le mot de passe avec ce gestionnaire :

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

2. Dans le portail, choisissez-le dans Écran de nouveau mot de passe. Cette zone apparaît dès qu’un écran de connexion est choisi, car c’est vers l’écran de connexion que le visiteur va ensuite.

Votre écran ne voit jamais que le mot de passe. Le lien transporte un secret issu de l’e-mail. La plateforme le retire de l’adresse avant que votre écran n’apparaisse, et le rajoute elle-même lorsque votre bouton appelle resetPassword. Rien sur votre page ne peut le lire.

Une fois le mot de passe défini, le visiteur est déconnecté partout, conduit vers votre écran Sign in et informé que son mot de passe est défini. Si quelqu’un ouvre New password sans avoir suivi de lien, appuyer sur le bouton lui indique d’ouvrir le lien reçu par e-mail.

Inutile d’ajouter New password à Ouverts avant la connexion. Quiconque détient un lien de réinitialisation est par définition déconnecté : la page lui est donc toujours affichée.

5. Dessiner aussi la page qu’ouvre un lien de confirmation (facultatif)

Après la création d’un compte, le lien de l’e-mail de confirmation ouvre une page qui confirme l’adresse. Vous pouvez aussi dessiner cette page — c’est la première page que voit un nouveau client.

1. Dessinez un écran — Address confirmed, par exemple. Il n’y a rien à saisir : donnez donc à l’écran lui-même un gestionnaire de chargement qui confirme immédiatement :

   confirmEmail("confirmed");

2. Placez-y une ligne « Vérification de votre lien… » avec Visible !state.confirmed, et un message « Votre adresse est confirmée » avec un bouton Se connecter dans une pile avec Visible state.confirmed.

3. Dans le portail, choisissez-le dans Écran d’adresse confirmée.

Votre écran ne voit jamais le secret du lien, exactement comme sur la page de nouveau mot de passe. Et un lien de confirmation ne fonctionne qu’une fois : quel que soit le nombre de demandes de votre écran, la plateforme confirme une seule fois et donne ensuite la même réponse à chaque demande. Si le lien a déjà été utilisé ou a expiré, le visiteur en est informé par un message.

Laissez Écran d’adresse confirmée vide pour conserver la page propre à la plateforme. Celle-ci confirme l’adresse et ramène le visiteur vers votre écran Sign in avec un message.

6. Une adresse pas encore confirmée, et un nouveau mot de passe (facultatif)

Quelqu’un qui n’a pas confirmé son adresse ne peut pas se connecter, et en est informé. Donnez à signIn un cinquième argument — le nom d’un champ d’état — et il sera passé à true lorsque c’est la raison :

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

Lorsque le champ est nommé, la plateforme n’affiche aucun message à elle pour ce refus : votre dessin est le message, dessinez donc les mots autant que le bouton. Sans lui, le visiteur en est informé par un message, comme pour tout autre refus.

Dessinez une pile avec Visible state.unconfirmed contenant un bouton Renvoyer l’e-mail de confirmation :

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

resendConfirmation définit le champ que vous nommez une fois la demande faite et — comme le lien de réinitialisation — dit « s’il existe un compte en attente de confirmation », car la plateforme ne dira pas s’il en existe un. Un écran Resend confirmation avec une zone d’e-mail et ce bouton, ouvert avant la connexion, sert à quelqu’un qui n’a jamais essayé de se connecter.

Un visiteur connecté peut changer son mot de passe sur un écran situé derrière l’entrée : le mot de passe actuel, le nouveau deux fois, et

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

Comparez d’abord les deux nouveaux dans le gestionnaire. En cas de réussite, le visiteur est déconnecté partout et le portail le conduit vers votre écran de connexion, avec un message indiquant que le mot de passe est défini.

Un visiteur connecté peut aussi changer son nom et sa photo. Sur sa page de compte :

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

changePhoto() ouvre le sélecteur d’images propre au visiteur, réduit l’image dans le navigateur et l’enregistre ; s’il annule, rien ne se passe. Ensuite, user.name et user.photo affichent les nouvelles valeurs, sur chaque écran. Là où user.photo est vide, dessinez un espace réservé plutôt qu’une image vide.

7. Ou placer le kit de connexion au lieu de le dessiner

La solution d’exemple portal-sign-in-kit contient tous les écrans ci-dessus déjà dessinés, sous forme de composants : une carte de connexion, une carte de création de compte, la carte de compte avec le nom et la photo, et la connexion en deux étapes. Son application partage ses composants : après l’avoir importée, chaque application de l’environnement les trouve sous Composants → Depuis d’autres applications, quelle que soit sa solution.

Un exemple qui place les cartes n’a pas besoin que le kit soit importé. Il transporte sa propre copie de chaque carte, et c’est pourquoi elles figurent déjà dans son concepteur. Importez le kit lorsque vous voulez placer les cartes dans une application qui vous appartient, ou les modifier à un seul endroit.

Placez une carte sur un écran et faites pointer ses propriétés vers l’état de votre écran — email vers state.email, sent vers state.sent. La carte écrit la saisie dans ces champs, et y place aussi ses réponses. Nommez vos écrans comme les cartes l’attendent (Sign in, Create account, Forgot password, Resend confirmation, New password, Address confirmed, Account, Change password, Sign-in security) et les liens entre eux fonctionnent.

Lorsque le kit change, ouvrez votre application dans le concepteur : il indique que ses copies ont été mises à jour. Enregistrez-la, et votre portail bénéficie du changement.

Les exemples portal-landing-page, portal-service-desk et portal-sign-in-and-accounts placent tous le kit de cette façon.

Ce que cela ne fait pas

• Cela ne change pas qui peut se connecter. Ce sont le même compte, les mêmes règles de mot de passe et la même connexion en deux étapes que sur la page de la plateforme.
• Cela ne fonctionne pas sur un portail que tout le monde peut ouvrir. Il n’y a personne à connecter : le portail y refuse donc un écran de connexion.

Essayer

Importez la solution d’exemple portal-sign-in-kit, puis portal-landing-page. La page d’accueil propose toute l’entrée et une page de compte derrière elle, placées depuis le kit, ainsi qu’une page How this sample works qui en fait la visite.

Voir aussi

• Demander aux visiteurs de se connecter
• Permettre aux visiteurs d’activer la connexion en deux étapes
• Publier une application en tant que portail