🆕 Modèle de page de connexion

Le modèle de “page de connexion” permet de demander à l’utilisateur de se connecter à un service.

Il doit être utilisé lorsque vous souhaitez que l’utilisateur accède à un espace privé/personnel. Il doit être placé juste avant l’accès à cet espace.

De manière générale, permettez aux utilisateurs d'accéder à autant de services ou contenus possibles sans avoir à se connecter, les formulaires de connexion étant une barrière entre l’utilisateur et les contenus qu’il est souhaitable de limiter au maximum.

Structure

Ce modèle propose une page de référence prête à l’emploi et directement réutilisable.

La page de connexion est composée des éléments suivants :

  • Un header et un footer par dĂ©faut : obligatoire - Ă  remplacer par le header et footer rĂ©els de votre site
  • Un titre, un chapo : obligatoire - Ă  ajuster en fonction du contexte pour prĂ©senter et contextualiser ce Ă  quoi permet d’accĂ©der la session connectĂ©e
  • Le formulaire de connexion : La connexion “France connect” : obligatoireLa connexion “avec identifiants” : obligatoire
  • La connexion “France connect” : obligatoire
  • La connexion “avec identifiants” : obligatoire
  • Un accès Ă  la crĂ©ation de compte : obligatoire - textes Ă  ajuster en fonction du contexte

Règles d’utilisation

Structure du formulaire de connexion

  • L’ordre et la structure des modalitĂ©s de connexion sont Ă  respecter comme prĂ©senter dans le modèle : 1) Le formulaire de connexion avec : La connexion avec FranceConnect en premierle “ou”La connexion avec identifiants en second2) L’accès Ă  la crĂ©ation de compte
  • 1) Le formulaire de connexion avec : La connexion avec FranceConnect en premierle “ou”La connexion avec identifiants en second
  • La connexion avec FranceConnect en premier
  • le “ou”
  • La connexion avec identifiants en second
  • 2) L’accès Ă  la crĂ©ation de compte

<main class="fr-pt-md-14v" role="main" id="content">
    <div class="fr-container fr-container--fluid fr-mb-md-14v">
        <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
                <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
                    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
                        <div class="fr-col-12 fr-col-md-9 fr-col-lg-8">
                            <h1>Connexion Ă  [Nom de service-site]</h1>
                            <div class="fr-mb-6v">
                                <h2>Se connecter avec FranceConnect</h2>
                                <div class="fr-connect-group">
                                    <button class="fr-connect">
                                        <span class="fr-connect__login">S’identifier avec</span>
                                        <span class="fr-connect__brand">FranceConnect</span>
                                    </button>
                                    <p>
                                        <a href="https://franceconnect.gouv.fr/" target="_blank" rel="noopener" title="Qu’est ce que FranceConnect ? - nouvelle fenêtre">Qu’est ce que FranceConnect ?</a>
                                    </p>
                                </div>
                            </div>
                            <p class="fr-hr-or">ou</p>
                            <div>
                                <form id="login-1760">
                                    <fieldset class="fr-fieldset" id="login-1760-fieldset" aria-labelledby="login-1760-fieldset-legend login-1760-fieldset-messages">
                                        <legend class="fr-fieldset__legend" id="login-1760-fieldset-legend">
                                            <h2>Se connecter avec son compte</h2>
                                        </legend>
                                        <div class="fr-fieldset__element">
                                            <p class="fr-text--sm">Description — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <fieldset class="fr-fieldset" id="credentials" aria-labelledby="credentials-messages">
                                                <div class="fr-fieldset__element">
                                                    <span class="fr-hint-text">Sauf mention contraire, tous les champs sont obligatoires.</span>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-input-group">
                                                        <label class="fr-label" for="username-1757">
                                                            Identifiant
                                                            <span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
                                                        </label>
                                                        <input class="fr-input" autocomplete="username" aria-required="true" aria-describedby="username-1757-messages" name="username" id="username-1757" type="text">
                                                        <div class="fr-messages-group" id="username-1757-messages" aria-live="assertive">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="fr-fieldset__element">
                                                    <div class="fr-password" id="password-1758">
                                                        <label class="fr-label" for="password-1758-input">
                                                            Mot de passe
                                                        </label>
                                                        <div class="fr-input-wrap">
                                                            <input class="fr-password__input fr-input" aria-describedby="password-1758-input-messages" aria-required="true" name="password" autocomplete="current-password" id="password-1758-input" type="password">
                                                        </div>
                                                        <div class="fr-messages-group" id="password-1758-input-messages" aria-live="assertive">
                                                        </div>
                                                        <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
                                                            <input aria-label="Afficher le mot de passe" id="password-1758-show" type="checkbox" aria-describedby="password-1758-show-messages">
                                                            <label class="fr-password__checkbox fr-label" for="password-1758-show">
                                                                Afficher
                                                            </label>
                                                            <div class="fr-messages-group" id="password-1758-show-messages" aria-live="assertive">
                                                            </div>
                                                        </div>
                                                        <p>
                                                            <a href="[À MODIFIER - url de la page de récupération]" class="fr-link">Mot de passe oublié ?</a>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="fr-messages-group" id="credentials-messages" aria-live="assertive">
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <div class="fr-checkbox-group fr-checkbox-group--sm">
                                                <input name="remember" id="remember-1759" type="checkbox" aria-describedby="remember-1759-messages">
                                                <label class="fr-label" for="remember-1759">
                                                    Se souvenir de moi
                                                </label>
                                                <div class="fr-messages-group" id="remember-1759-messages" aria-live="assertive">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="fr-fieldset__element">
                                            <ul class="fr-btns-group">
                                                <li>
                                                    <button class="fr-mt-2v fr-btn">
                                                        Se connecter
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="fr-messages-group" id="login-1760-fieldset-messages" aria-live="assertive">
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                            <hr>
                            <h2>Vous n’avez pas de compte ?</h2>
                            <ul class="fr-btns-group">
                                <li>
                                    <button class="fr-btn fr-btn--secondary">
                                        Créer un compte
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Bloc de connexion FranceConnect

La connexion avec FranceConnect est un impératif pour tous les service de l’Etat. C’est la première modalité de connexion qui doit présenté à l’utilisation. Les éléments de connexion FranceConnect (textes, bouton, lien) sont à reprendre en l'état. La mise en place de l’identification FranceConnect doit suivre une implantation technique précise à mener directement avec le service FranceConnect via leur plateforme ici

Bloc de connexion par identifiants

  • La connexion avec identifiants est proposĂ©e avec une structure minimale avec la demande du couple “adresse Ă©lectronique” et “mot de passe”, et reprend le “modèle de demande d’adresse mail” et le “modèle de demande de mot passe”
  • Si votre service nĂ©cessite de demander d’autres information des champs peuvent ĂŞtre ajoutĂ©s/remplacĂ©s les champs proposĂ©s.
  • De manière gĂ©nĂ©rale, limiter le nombre d’information demandĂ©es lors de la connexion
  • Mot de passe oubliĂ© : Le lien “mot de passe oublié” doit rediriger vers le système de rĂ©cupĂ©ration de mot de passe de votre service. La rĂ©cupĂ©ration de mot de passe ne doit pas se faire par l’envoi en clair du mot de passe, mais par un système de rĂ©initialisation.Eviter les questions secrètes pour rĂ©cupĂ©rer le mot de passe.
  • Le lien “mot de passe oublié” doit rediriger vers le système de rĂ©cupĂ©ration de mot de passe de votre service.
  • La rĂ©cupĂ©ration de mot de passe ne doit pas se faire par l’envoi en clair du mot de passe, mais par un système de rĂ©initialisation.
  • Éviter les questions secrètes pour rĂ©cupĂ©rer le mot de passe.

Messages d'erreurs

  • Dans le cas d’erreur de saisie, ne pas reprendre l’affichage d’erreur du champ input. En effet, le message d’erreur ne doit pas prĂ©ciser directement si le mot de pass a Ă©tĂ© mal saisi.
  • Il faut utiliser dans ce cas le bloc alerte et mettre un message spĂ©cifiant une erreur pour “le couple mot de passe/identifiant”.

Bonne pratiques

  • PrivilĂ©gier la demande d’adresse email plutĂ´t qu’un identifiant pour la connexion avec identifiant. Les utilisateurs se rappelle plus facilement de leur email qu’un identifiant unique.
  • Mettre en place un système de double authentification quand cela est nĂ©cessaire.

Accessibilité

La structure des contenus de la page doit être cohérente et le code html conforme aux standards. Chaque composant du DSFR doit respecter les règles qui lui sont propres : contraste, intitulé, cohérence du contexte, pertinence, attributs aria, etc.

La page doit être structurée comme les autres pages correctement (ARIA Authoring Practices Guide) et avoir une hiérarchie de titre correcte.