Bouton FranceConnect

Le bouton FranceConnect est un élément d’interaction avec l’interface proposant à l’usager d’utiliser ses identifiants de connexion à l’un des fournisseurs d’identités ( impots.gouv.fr , ameli.fr , l’Identité Numérique La Poste , MobileConnect et moi ou msa.fr ) pour se connecter à un autre site.

Le fournisseur de service récupère auprès de FranceConnect un identifiant unique et une identité vérifiée par l’INSEE.

Il est primordial dans l’usage du service FranceConnect et garantit sa reconnaissance et la confiance en la marque.

Retrouver le fonctionnement en détail ici : https://franceconnect.gouv.fr/partenaires

HTML

Structure du composant

Le composant Bouton FranceConnect permet de proposer une connexion via le service FranceConnect. Sa structure est la suivante :

Un élément <div> de classe fr-connect-group contient le bouton FranceConnect et un lien d'information.
- Le bouton FranceConnect est un élément HTML <button> défini par la classe fr-connect. Il doit contenir deux éléments <span> :
  - Un texte de connexion "S'identifier avec", un <span> avec la classe fr-connect__login. Ce texte peut être traduit mais ne doit pas être modifié.
  - L'intitulé du service "FranceConnect", un <span> avec la classe fr-connect__brand.
- Le bouton doit être accompagné d'un lien d'information sur FranceConnect. Il s'agit d'un élément <p> contenant un lien <a> vers la page d'information de FranceConnect.
  - Le lien doit être ouvert dans une nouvelle fenêtre.
  - L'intitulé du lien peut être traduit mais ne doit pas être modifié.

Pour plus de clarté, le bouton est peut être accompagné de la phrase : « FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion à vos services en ligne ».

Structure HTML du bouton FranceConnect

<div class="fr-connect-group">
    <button class="fr-connect" type="button">
        <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>

Structure HTML du bouton FranceConnect+

<div class="fr-connect-group">
    <button class="fr-connect fr-connect--plus" type="button">
        <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>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et du bouton FranceConnect doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/connect/connect.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/connect/connect.legacy.min.css" rel="stylesheet">

Variantes de style

Le composant Bouton FranceConnect est stylisé par les classes CSS suivantes :

.fr-connect-group : Conteneur du bouton FranceConnect et du lien d'information.
.fr-connect : Bouton FranceConnect.
.fr-connect__login : Texte "S'identifier avec".
.fr-connect__brand : Intitulé du service
.fr-connect-group p : Conteneur du lien d'information.
.fr-connect-group a : Lien d'information.

Une classe supplémentaire .fr-connect--plus peut être ajoutée au bouton FranceConnect pour proposer une connexion via FranceConnect+.

JavaScript

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

Note de version

Voir les évolutions sur github

v1.11.1 - 31 janvier 2024

retrait de l'icone target blank

🐛 fix

footer

header

connect

#872

v1.11.0 - 11 décembre 2023

taille de la fonte adapatable

Le bouton FranceConnect doit répondre aux critères d’accessibilité qui redéfinissent le letter-spacing et la taille de fonte.
- Passage des valeurs de tailles et d'espacements en 'em' pour les rendre relatives à la taille de fonte du bouton
- Retrait du '+' de 'FranceConnect+' dans l'intitulé de fr-connect__brand. Celui-ci est désormais placé en contenu du pseudo-élément after du bouton

🐛 fix

connect

#813