Qu’est-ce que FranceConnect
Pour beaucoup de services ministériels, les données d’identité sont importantes, ce qui nécessite souvent une opération de vérification des identités des personnes inscrites. Cette opération peut très vite devenir lourde à gérer dans le cas où le public visé est assez large.
FranceConnect est un outil développé par la Direction Interministérielle du Numérique (DINUM) répondant à ce problème grâce à son outil d’authentification. Grâce à lui, vous pourrez gérer l’authentification à votre service sans avoir besoin de gérer d’identifiants ou de mots de passe tout en récupérant des données d’identités certifiées.
Je vous propose dans cet article de vous accompagner pour l’utilisation de cet outil dans votre application.
Prérequis et avertissement
Afin de pouvoir utiliser FranceConnect, une habilitation est nécessaire. Il faudra donc en faire la demande. L’accès à la demande est disponible sur datapass.
Lorsque la demande d’habilitation a été validée, vous pouvez vous connecter sur votre espace FranceConnect afin de paramétrer les urls de votre application qui doivent être acceptées par FranceConnect pour la connexion et la déconnexion. Dans notre mise en place, nous utiliserons l’environnement de test qui accepte par défaut certain url que vous pourrez retrouver sur la documentation.
Les sites ministériels étant soumis au système de design de l’état (DSFR) possèdent le bouton permettant la connexion avec un style imposé. Vous pouvez le retrouver sur la documentation du DSFR.
Afin d’implémenter ce bouton facilement, il existe un package DSFR en fichiers statiques ainsi que des portages officiels de ce package pour Vue.js, Angular, React, Django et Drupal.
Mise en place
Maintenant que la partie paramétrage est terminée, nous allons mettre en place l’authentification via FranceConnect. Voici un schéma pour les échanges avec FranceConnect qui nous intéresse dans le cadre de l’authentification.
Lien FranceConnect
Le lien de connexion se compose comme suit : URL_FC?scope=SCOPES&redirect_uri=CALLBACK_URL&response_type=code&client_id=CLIENT_ID&state=STATE&nonce=NONCE
Dans notre cas en utilisant l’environnement de test, nous aurons :
- URL_FC : URL vers la page d’authentification FranceConnect, l’environnement de test étant https://fcp.integ01.dev-franceconnect.fr/api/v1/authorize
- SCOPES : Il s’agit de la liste des informations demandées, un seul scope est obligatoire, openid, qui permet de récupérer l’identifiant technique unique de l’utilisateur et chaque scope doit être séparé par un espace. La liste des scopes est fourni dans la documentation. Nous utiliserons dans notre exemple : openid profile
- CALLBACK_URL : La liste des callback disponibles dans l’environnement de test est fournie par la documentation, en environnement de production vous avez pu paramétrer ces URL plus tôt. Nous utiliserons ici http://localhost:8080/login-callback
- CLIENT_ID : Votre identifiant de connexion a l’API FranceConnect, ‘211286433e39cce01db448d80181bdfd005554b19cd51b3fe7943f6b3b86ab6e’ pour nos tests
- STATE & NONCE : Il s’agit de deux champs qui doivent être générés aléatoirement, on peut par exemple générer deux chaines SHA256 aléatoires.
Afficher le bouton
L’affichage du bouton dépendra de ce que vous souhaitez utiliser (fichiers statiques ou un des portages disponibles).
Prenons en exemple le portage Angular, nous aurons donc :
<dsfr-franceconnect (franceConnectSelect)="franceConnectSelect($event)"></dsfr-franceconnect>franceConnectSelect() étant une fonction, elle renvoie vers le lien FranceConnect défini plus tôt.
Page de connexion
Il s’agit de la page de callback vers laquelle nous sommes renvoyés après l’authentification sur FranceConnect. Dans le cas du test, cette page doit être disponible au lien défini plus haut : http://localhost:8080/login-callback.
FranceConnect redirige sur cette page avec un paramètre « code ». Nous aurons au chargement de cette page un appel à l’API FranceConnect via notre API afin de récupérer les informations de l’utilisateur grâce au code fourni par FranceConnect.
Récupération des informations de l’utilisateur
On crée donc une route dans notre API afin de récupérer les données. Cette route prend en paramètre le code fourni par FranceConnect dans l’étape précédente. Voici les opérations à effectuer par notre route, ainsi qu’un exemple js du code possible :
- Récupération du paramètre code.
const { code } = req.body;- Envoi de la requête connexion à FranceConnect afin de récupérer le token de connexion à FranceConnect de cet utilisateur. Ce token servira aussi à déconnecter l’utilisateur de FranceConnect, il faut donc le conserver.
const urlToken = `${config.franceConnect.FC_URL}${config.franceConnect.TOKEN_FC_PATH}`;
const body = {
grant_type: "authorization_code",
redirect_uri: `${config.franceConnect.FS_URL}${config.franceConnect.CALLBACK_FS_PATH}`,
client_id: config.franceConnect.CLIENT_ID,
client_secret: config.franceConnect.CLIENT_SECRET,
code,
};
const responseToken = await axios.post(urlToken, body);- Envoi de la requête pour récupérer les informations de l’utilisateur.
const urlInfo = `${config.franceConnect.FC_URL}${config.franceConnect.USERINFO_FC_PATH}?schema=${config.franceConnect.SCOPES_BACK}`;
const configInfo = {
method: "get",
url: urlInfo,
headers: {
Authorization: `${responseToken.data.token_type} ${responseToken.data.access_token}`,
},
};
const responseInfo = await axios(configInfo);Traitement de la connexion
L’objet renvoyé par FranceConnect contient une variable sub qui est l’identifiant technique de la personne. Il faut donc utiliser cette variable afin de gérer notre connexion.
- On va vérifier si l’utilisateur existe en base
const userExist = await User.getOne({
sub: responseInfo.data.sub,
});- Si l’utilisateur existe alors on connecte la personne en enregistrant son token de connexion FC
if (userExist) {
await User.saveFCToken({
token: responseToken.data.id_token,
})
//Mecanisme de connexion souhaité à implémenter
return res.json({ data: userExist, connect: true });
}- Si l’utilisateur n’existe pas, alors il faut le créer en base grâce aux données récupérées. L’objet des données récupéré est différent selon les droits d’accès à FranceConnect de l’application, ici on utilisera uniquement sexe/nom/prénoms/date de naissance/mail.
//Création d'un objet avec les données de l'utilisateur
const prenoms = responseInfo.data.given_name.split(" ");
const dateNaissance = new Date(responseInfo.data.birthdate);
const reponseDto = {
sexe: responseInfo.data.gender === "male" ? "Homme" : "Femme",
nomNaissance: responseInfo.data.family_name,
prenom1: prenoms[0] ?? "",
prenom2: prenoms[1] ?? "",
prenom3: prenoms[2] ?? "",
mail: responseInfo.data.email,
dateNaissance,
token: responseToken.data.id_token,
};
//Création de l'utilisateur /!\ Selon le cas il peut être nécéssaire de vérifier si un utilisateur avec la même identité ou le même mail existe déjà
const user = await User.create(reponseDto);
//Mecanisme de connexion souhaité à implémenter
return res.json({ data: user, connect: true });Déconnexion
Lorsque l’utilisateur se déconnecte de l’application, il faut aussi le déconnecter de FranceConnect. Pour cela, il suffit de rediriger vers l’URL suivante :
FC_URL/api/v1/logout?id_token_hint=ID_TOKEN_HINT&state=STATE&post_logout_redirect_uri=POST_LOGOUT_REDIRECT_URI
En environnement de test nous aurons :
- FC_URL : https://fcp.integ01.dev-franceconnect.fr/api/v1/logout
- ID_TOKEN_HINT : Le token de l’utilisateur enregistrer à la connexion
- STATE : Champ aléatoire
- POST_LOGOUT_REDIRECT_URI : route de redirection de FranceConnect lorsque la déconnexion est terminée : http://localhost:8080/logout-callback
Pour aller plus loin
Il existe les services FranceConnect que vous pouvez retrouver ici : https://api.gouv.fr/les-api/franceconnect
Liens utiles
- Documentation FranceConnect : https://partenaires.franceconnect.gouv.fr/fcp/fournisseur-service
- Demande d’habilitation à FranceConnect : https://datapass.api.gouv.fr/franceconnect
- Espace FranceConnect : https://partenaires.franceconnect.gouv.fr/login
- Documentation DSFR : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-franceconnect/
- Portage DSFR : https://www.systeme-de-design.gouv.fr/communaute/portages-en-cours/
Endpoint utiles
À lire aussi
Diagnostiquer, comprendre et optimiser les performances d’une application React
Ouicommit Paris – IA : de l’expérimentation à l’industrialisation
Ouidou et Scaleway : un partenariat stratégique pour accélérer le cloud souverain en Europe
