Mise en place d’une connexion par lien magique avec Symfony

Crédit : NESA by Makers via Unsplash

Simplifiez la vie de vos utilisateurs

La connexion par lien magique permet à vos utilisateurs de s’authentifier sur vos applications sans avoir à saisir le moindre mot de passe.

Ce mode de connexion présente plusieurs avantages non négligeables :

• Il va permettre aux utilisateurs dont la mémoire est déjà saturée de mots de passe en tout genre ou qui ne visitent qu’occasionnellement vos applications de s’affranchir des pénibles procédures de réinitialisation du mot de passe.
• Sur un téléphone mobile, ne pas saisir de mots de passe évite une opération souvent fastidieuse, surtout s’il faut jongler avec le clavier des caractères spéciaux, la saisie de chiffres ou de majuscules.
• Il n’est plus nécessaire d’utiliser de gestionnaires de mots de passe tiers.
• La simplicité apportée évite à vos utilisateurs d’être détournés de leur objectif premier : réaliser une action, finaliser une commande, bref : votre taux de conversion pourrait également être impacté positivement. 🤑

Comment est-ce que cela fonctionne ?

Le procédé fonctionne en 3 étapes :

• L’utilisateur saisit son adresse e-mail et clique sur un bouton “Envoyez-moi un lien magique par e-mail”.
• L’utilisateur consulte alors sa boite mail et clique sur le lien magique contenu dans le message reçu.
• L’utilisateur arrive sur votre application et est automatiquement connecté à son compte.

Cette méthode est disponible sur certaines applications de premier plan comme Slack.

Et la sécurité ?

On peut dire que le principe de fonctionnement est très similaire à celui de la réinitialisation du mot de passe qui se fait généralement avec l’envoi d’un lien par e-mail. La sécurité est donc en partie déléguée aux services e-mail utilisés par vos utilisateurs (Gmail, Outlook, etc).

Il est possible de mettre en oeuvre quelques mesures complémentaires pour accroître la sécurité :

• Ajouter un délai d’expiration court pour les liens magiques.
• Contrôler que l’utilisateur a réalisé toute la procédure à partir de la même adresse IP.
• Contrôler que l’utilisateur a réalisé toute la procédure à partir du même navigateur web.

Implémentation avec Symfony

Mise à jour novembre 2020 : la connexion par lien magique est disponible nativement depuis la version 5.2 de Symfony. Voir la documentation officielle

La puissance du framework Symfony va nous permettre d’implémenter ce mode de connexion en peu de temps.

Prérequis

L’exemple ci-dessous est conçu pour Symfony 4.4+ avec autowire et autoconfig activés, le code peut néanmoins être adapté pour fonctionner avec des versions antérieures.

Sommaire

• Modification de l’Entity et du Repository de l’utilisateur
• Création d’un FormType simple
• Génération d’un secret
• Envoi d’un mail
• Création d’une action de Controller
• Création d’un Guard Authenticator

Modification de l’Entity et du Repository de l’utilisateur

Tout d’abord, nous allons ajouter deux propriétés à notre entité User, l’une pour enregistrer un secret, l’autre pour gérer l’expiration de la validité du lien magique.

L’entité User

Ensuite, nous allons ajouter des méthodes de recherche dans le repository.

Le repository UserRespository

Création d’un FormType simple

Nous créons un formulaire très basique pour permettre à l’utilisateur de saisir son adresse e-mail :

Le FormType

Génération d’un secret

Nous allons maintenant créer un service pour générer un secret.

Ce service va permettre :

• De générer un secret : une suite aléatoire de caractères qui sera contenue dans le lien magique envoyé à l’utilisateur.
• De générer une empreinte, c’est à dire une chaîne de caractères générée à partir du secret attribué à l’utilisateur mais aussi d’autres informations d’identification comme l’adresse IP ou le navigateur utilisé. Cette empreinte sera stockée en base de données pour comparaison lors de l’utilisation du lien magique.

Le service de génération de secrets

Envoi d’un mail

Maintenant nous allons générer et envoyer un e-mail pour permettre la connexion (afin de gagner du temps, nous allons utiliser l’e-mail de notification de Symfony mais vous pouvez bien entendu créer un e-mail entièrement personnalisé).

Le service d’envoi de mails

Vous pouvez également injecter le service translator pour traduire le contenu du mail.

Création d’une action de Controller

A présent, nous allons assembler les éléments créés précédemment pour permettre l’envoi du lien magique par e-mail.

Le contrôleur

A noter : la notification d’envoi d’e-mail est affichée même si l’adresse saisie est inconnue. Cela afin de ne pas permettre à des robots de détecter quels utilisateurs possèdent ou non un compte sur votre application.

N’oubliez pas de créer le template pour l’affichage du formulaire. Il n’est pas fourni dans cet exemple.

Création d’un Guard Authenticator

C’est bientôt fini ! Nous allons créer l’authenticator qui va réaliser la connexion lorsque l’utilisateur va cliquer sur un lien magique.

Le guard authenticator

Nous déclarons ce nouvel authenticator dans la configuration :

La configuration

Quelques détails pour finaliser

Voici les dernières étapes pour finaliser le développement :

• Créer le template twig pour l’affichage du formulaire
• Remettre à zéro le secret de l’utilisateur en cas de connexion réussie à l’aide de App\Entity\User::resetSecret()
• Créer un mail personnalisé aux couleurs de votre application et ajouter des explications rassurantes, par exemple : “Si vous n’avez pas demandé à recevoir de mail de connexion, vous pouvez simplement ignorer cet e-mail, la sécurité de votre compte n’est pas compromise”
• En bonus, créer un validateur personnalisé pour ne pas autoriser la connexion par lien magique pour certains fournisseurs de comptes e-mail (exemple : Yopmail qui fournit des comptes partagés et en accès libre)

Le mot de la fin

Avec quelques adaptations, vous pouvez désormais proposer un mode de connexion alternatif à vos utilisateurs.

A titre personnel, je conserve en parallèle une connexion classique par identifiant et mot de passe, afin que chacun puisse trouver son compte en fonction de ses habitudes.

N’hésitez pas à me faire vos retours dans les commentaires.

Bibliographie

Retour d’expérience sur la mise en place d’une connexion par lien magique : https://blog.elao.com/fr/dev/authentification-par-lien-magique/

Avantages de la connexion par lien magique : https://www.codeur.com/blog/liens-magiques-taux-conversion/

Utilisation d’empreintes (fingerprinting) pour tracer un utilisateur : https://pixelprivacy.com/resources/browser-fingerprinting/ (en anglais)

Mise en place d’une authentification avec Guard sous Symfony : https://symfony.com/doc/current/security/guard_authentication.html

Les e-mails de notification avec Symfony : https://symfony.com/blog/new-in-symfony-4-4-notification-emails

Listes des fournisseurs d’adresses e-mail jetables pour lesquels la connexion par lien magique pourrait être limitée : https://gist.github.com/michenriksen/8710649

Photographie : NESA by Makers via Unsplash

Remerciements

Merci à Javier Eguiluz d’avoir mentionné cet article sur le blog de Symfony :
https://symfony.com/blog/a-week-of-symfony-688-2-8-march-2020