MallaDocs
AccueilDémarrage rapideOuvrir Malla

Créer un espace membres

Ajoutez l’inscription et la connexion des visiteurs, des rôles et des pages réservées aux membres.

Guide utilisateur
Avancé30 min

Vous allez créer : Une page d’inscription, une page de connexion avec une option de lien magique et une page membres que seuls les visiteurs connectés peuvent ouvrir, avec un rôle pour les membres premium

À lire avant : Créer une landing pagePage interactive avec des workflows

Dans ce tutoriel, vous donnez à votre site ses propres membres. Les visiteurs créent un compte, se connectent avec un mot de passe ou un lien de connexion, et accèdent à une page fermée à tous les autres. Vous ajoutez aussi un rôle et affichez du contenu supplémentaire aux visiteurs qui l’ont. Il vous faut un site avec une page d’accueil ; les comptes visiteurs sont stockés dans la propre base de données du site.

Créer un espace membresVidéo bientôt disponible. Les étapes écrites ci-dessous couvrent tout.
Créer un espace membres· 10 min

Ajouter les pages

  1. Créer trois pages

    Ouvrez l’onglet Pages dans la barre latérale gauche et cliquez trois fois sur + (Add page). Nommez les pages Sign up, Log in et Members.

  2. Définir leurs chemins

    Ouvrez chaque page, cliquez sur une zone vide du canevas pour ne rien sélectionner, et réglez Path dans les paramètres de la page : /signup, /login et /members.

Créer le formulaire d’inscription

  1. Insérer un formulaire

    Sur la page Sign up, cliquez sur + dans l’onglet Layers et choisissez Form. Il arrive avec un champ Email, une zone de texte pour le message, un bouton Send et deux cadres d’état.

  2. Désactiver les soumissions intégrées

    Sélectionnez le formulaire et réglez Action sur Do nothing dans la section Form. C’est votre workflow qui gère l’envoi, et non la boîte de réception Forms.

  3. Adapter les champs

    Supprimez la zone de texte du message. Insérez deux éléments Input dans le formulaire : l’un avec Name name et Label Your name, l’autre avec Name password, Label Password et Type Password. Sélectionnez le bouton et changez son Text en Create account.

  4. Relier les champs à des variables

    Sélectionnez chaque champ et cliquez sur + (Create variable) à côté de Value dans la section Field. Le champ et la nouvelle variable de page restent synchronisés : les valeurs du formulaire sont donc prêtes sous vars.email, vars.password et vars.name.

Inscrire le visiteur

  1. Ajouter un workflow d’envoi

    Sélectionnez le formulaire, ouvrez Events dans l’inspecteur, gardez Submit sélectionné et cliquez sur Add workflow. L’espace de travail Logic s’ouvre sur le nouveau workflow.

  2. Créer le compte

    Cliquez sur Add step et choisissez Sign up visitor sous Visitor auth. Pour Email, cliquez sur le bouton ƒ (Use an expression) et tapez vars.email. Faites de même pour Password avec vars.password et Name avec vars.name.

  3. Aller à la page membres

    Cliquez sur Add step, choisissez Go to page et choisissez Members comme Destination. L’étape ne s’exécute que si l’inscription a réussi.

  4. Indiquer ce qui n’a pas marché

    Sous On error, cliquez sur Add error handler, puis sur Add error step, et choisissez Show toast. Réglez Message sur l’expression error.message et Variant sur Error. Un visiteur qui utilise un e-mail déjà associé à un compte voit maintenant pourquoi.

Créer la page de connexion

  1. Copier le formulaire

    Copiez le formulaire d’inscription avec ⌘C, ouvrez la page Log in et collez-le avec ⌘V. Supprimez le champ du nom et changez le texte du bouton en Log in. Reliez les champs e-mail et mot de passe à de nouvelles variables sur cette page, comme précédemment.

  2. Connecter le visiteur

    Ajoutez un workflow Submit au formulaire. Ajoutez Log in visitor avec Email vars.email et Password vars.password, puis Go to page avec Members. Ajoutez le même toast d’erreur sous On error.

  3. Proposer un lien de connexion

    Ajoutez un Button sous le formulaire avec le texte Email me a sign-in link et réglez son Type sur Button, pour qu’il n’envoie pas le formulaire. Dans Events, ajoutez un workflow Click avec Send sign-in link (Email vars.email) et un Show toast qui dit Check your inbox.

Fermer la page membres

  1. Restreindre la page

    Ouvrez la page Members et cliquez sur une zone vide du canevas. Dans la section Access, activez Restrict. La Rule commence par user.isLoggedIn, ce qui est exactement ce qu’il faut ici.

  2. Envoyer les visiteurs vers la page de connexion

    Réglez Otherwise sur la page Log in. Les visiteurs non connectés y sont redirigés ; sans page de redirection, ils obtiennent une erreur 404.

  3. Accueillir le visiteur

    Ajoutez un élément Text. Dans Typography, cliquez sur le bouton accolades à côté de Content (Bind Text) et tapez 'Welcome, ' + user.name.

  4. Ajouter un bouton de déconnexion

    Ajoutez un Button avec le texte Log out. Donnez-lui un workflow Click avec Log out visitor, puis Go to page avec votre page d’accueil.

Point de contrôle

La section Access de la page Members affiche Restrict activé, la règle user.isLoggedIn et la page Log in comme redirection.

Ajouter un rôle premium

  1. Créer le rôle

    Ouvrez l’espace de travail Tables depuis le bas de la barre latérale gauche et choisissez Visitors. Tapez premium dans New role et cliquez sur Add role. Les noms de rôle utilisent des lettres minuscules, des chiffres, _ et -.

  2. Afficher du contenu aux seuls membres premium

    Sur la page Members, ajoutez un cadre avec un court message premium. Dans Visibility, liez Show when à user.roles.includes('premium').

  3. Prendre en compte les changements de rôle sans recharger

    Ajoutez un Button avec le texte Refresh my access et un workflow Click avec Refresh user. Il recharge user depuis le serveur : un rôle attribué pendant que le visiteur est sur la page apparaît donc tout de suite.

Publier et tester

  1. Publier en préproduction

    Cliquez sur Publish dans la barre d’outils, laissez Staging sélectionné et confirmez.

  2. Essayer la page fermée

    Ouvrez /members à l’adresse de préproduction. Vous arrivez sur la page de connexion, car vous n’êtes pas connecté.

  3. S’inscrire

    Ouvrez /signup, créez un compte et vérifiez que la page membres vous accueille par votre nom. Cliquez sur Log out et reconnectez-vous sur /login.

  4. Vous passer en premium

    De retour dans l’éditeur, ouvrez Tables → Visitors. Votre compte figure dans la liste. Cliquez dessus, cochez premium dans le panneau latéral, puis cliquez sur Refresh my access sur la page de préproduction. Le message premium apparaît.

Terminé

Les visiteurs peuvent s’inscrire, se connecter avec un mot de passe ou un lien, et ouvrir la page membres. Les membres premium voient leur contenu supplémentaire.

Ce que vous avez appris

  • Les étapes d’authentification des visiteurs les inscrivent, les connectent et les déconnectent, envoient des liens de connexion et rafraîchissent user.
  • Une règle d’accès de page s’exécute sur le serveur à chaque requête et redirige les visiteurs qui ne la remplissent pas.
  • user est toujours un objet ; testez user.isLoggedIn et user.roles.includes(…).
  • Les rôles se définissent et s’attribuent dans Tables → Visitors.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :

Comptes visiteursInscription, connexion et liens magiques intégrés pour les visiteurs du site, rôles et règles d’accès aux pages.Workflows clientDe la logique visuelle qui s’exécute dans le navigateur sur les clics, les envois, le chargement de la page et les changements de variable.Liaisons et expressionsLiez n’importe quel texte, attribut, style ou visibilité à une expression qui lit des données en direct.Tables nativesUne vraie base de données SQL par site, avec un concepteur de schéma, un explorateur de données et des règles de ligne.Modèle de sécuritéCanevas isolé, pas d’eval, secrets côté serveur, règles de ligne, limites de débit et politique de requêtes sortantes.