Bouton FranceConnect

Le bouton FranceConnect permet à une administration (ou un fournisseur de logiciel agissant pour le compte d’une administration) de proposer une connexion ou une création de compte simplifiée.

L’utilisateur utilise ses identifiants de connexion d’un des fournisseurs d’identités (impots.gouv.fr, ameli.fr, l’Identité Numérique La Poste, MobileConnect et moi ou msa.fr), le fournisseur de service récupère auprès de FranceConnect un identifiant unique et une identité vérifiée par l’INSEE.

Le fonctionnement en détail : https://franceconnect.gouv.fr/partenaires

Le bouton FranceConnect est primordial dans l’usage du service FranceConnect. C’est par lui que passe la reconnaissance et la confiance dans la marque FranceConnect.

Structure

  • Bouton FranceConnect, composé de :
    • le fond bleu France - obligatoire
    • le logo FranceConnect - obligatoire
    • un libellé “S’identifier avec FranceConnect” - obligatoire
  • un lien “Qu’est-ce que FranceConnect ?” - obligatoire, qui redirige vers l’URL https://franceconnect.gouv.fr/

Qu’est-ce que FranceConnect ?

                      <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>
                      
                    
À ne pas faire - Changer la couleur du bouton
À ne pas faire - Changer la typographie ou le libellé du bouton

Variante

FranceConnect+

Si le service utilise FranceConnect+ (pour les démarches nécessitant une sécurité renforcée), il faut utiliser la variante FranceConnect+.

La structure est sensiblement la même que celle du bouton FranceConnect, le lien pointe vers l’url https://franceconnect.gouv.fr/france-connect-plus.

Qu’est-ce que FranceConnect+ ?

                      <div class="fr-connect-group">
    <button class="fr-connect fr-connect--plus">
        <span class="fr-connect__login">S’identifier avec</span>
        <span class="fr-connect__brand">FranceConnect</span>
    </button>
    <p>
        <a href="https://franceconnect.gouv.fr/france-connect-plus" target="_blank"  rel="noopener" title="Qu’est-ce que FranceConnect+ ? - nouvelle fenêtre">Qu’est-ce que FranceConnect+ ?</a>
    </p>
</div>
                      
                    

Règles d’utilisation

Usage

  • Il est situé en premier mode de connexion (au-dessus des autres moyens d'identification).
  • Il est accompagné du lien « Qu’est-ce que FranceConnect ? » positionné en dessous et redirige vers l’URL www.franceconnect.gouv.fr
  • Il est important de dissocier visuellement vos moyens de connexion natifs de FranceConnect, une séparation visible doit être mise en place.
  • La notion de "ou"  doit également y figurer (FranceConnect ou un autre mode d’identification)
  • Pour plus de clarté, le bouton est accompagné de la phrase : « FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne ».
  • Merci de faire attention à l’écriture du terme « FranceConnect » et d’accoler les deux mots France et Connect partout où « FranceConnect » est mentionné.
  • FranceConnect n’est pas un réseau social et ne doit pas être présenté ou susceptible d’être perçu comme tel par l’utilisateur. Pour éviter toute confusion, FranceConnect ne doit pas figurer près de liens, d'icônes ou de services d'identification proposés par des réseaux sociaux et/ou autres services similaires.

Comportement

Au clic sur le bouton, l'utilisateur est redirigé dans son onglet actif vers la page de choix de fournisseur d’identité.

La page de choix de fournisseur d’identité ne doit pas s’ouvrir dans un modale ou une pop-up au dessus du site.

À faire - Ouvrir la page de choix des fournisseurs d’identité dans l’onglet actif

À ne pas faire - Proposer le choix de fournisseurs d’identité dans une modale

Accessibilité

  • Le focus (propriété outline) ne doit être ni dégradé ni supprimé.

Documentation technique

La documentation technique pour la mise en place de FranceConnect en tant que fournisseur de service peut être consulter sur le site de FranceConnect