Modèle de page de connexion

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

Info

Les modèles sont désormais disponible dans la version 1.8.Un dysfonctionnement nous empêche de mettre à disposition la documentation définitive. Nous nous excusons pour la gêne occasionnée. Nous tenions à déployer cette nouvelle version afin que vous puissiez l'utiliser sans attendre.
Nous vous tiendrons informés de la résolution du problème.

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

Bloc de connexion FranceConnect

  • Connexion avec FranceConnect : la connexion avec FranceConnect est un impératif pour tous les service de l’Etatc’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
  • 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 connection 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.
  • Eviter les questions secrètes pour récupérer le mot de passe.

Messages d'erreurs

  • Message d’erreur : 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 passe 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”.
  • 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.