Bouton FranceConnect(+) - DsfrFranceConnect

🌟 Introduction

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.

🏅 La documentation sur le bouton FranceConnect sur le DSFR

La story sur le bouton FranceConnect sur le storybook de VueDsfr

📐 Structure

• Contient un bouton pour la connexion via FranceConnect.
• Inclut un lien d'aide pour plus d'informations sur FranceConnect.

🛠️ Props

Propriété	Type	Description	Valeur par défaut
secure	boolean	Indique si le bouton doit utiliser la version sécurisée FranceConnect+.	false
url	string	URL personnalisée pour la connexion (ne doit servir que pour le développement).	undefined

📡 Événements

Ce composant ne déclenche pas d'événements spécifiques.

🧩 Slots

Pas de slot.

📝 Exemple

Démo

Code de la démo

<script lang="ts" setup>
import DsfrFranceConnect from '../DsfrFranceConnect.vue'
</script>

<template>
  <div class="fr-container fr-my-2v">
    <h2>FranceConnect</h2>
    <p class="fr-my-2v">
      <DsfrFranceConnect />
    </p>

    <h2>FranceConnect+</h2>
    <p class="fr-my-2v">
      <DsfrFranceConnect secure />
    </p>
  </div>
</template>

⚙️ Code source du composant

DsfrFranceConnect.vue

<script lang="ts" setup>
import type { DsfrFranceConnectProps } from './DsfrFranceConnect.types'

export type { DsfrFranceConnectProps }

defineProps<DsfrFranceConnectProps>()
</script>

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

DsfrFranceConnect.types.ts

export type DsfrFranceConnectProps = {
  secure?: boolean
  url?: string
}

DsfrFranceConnect est conçu pour être simple et direct, permettant une intégration facile dans n'importe quelle application nécessitant une fonctionnalité de connexion FranceConnect.

Il offre très peu de personnalisation, et cela est voulu (cf. les sections « À ne pas faire » de la documentation officielle DSFR).