Laissez tuer le mot de passe! Liens de connexion magiques vers le sauvetage!

Dites adieu aux problèmes de mot de passe et adoptez une connexion sans mot de passe sûre et pratique! Cet article vous guidera comment implémenter un système de connexion sans mot de passe basé sur des liens dans les applications Laravel pour améliorer la sécurité et simplifier l'expérience utilisateur.

Cet article a été examiné par Younes Rafie et Wern Ancheta. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

---

La technologie d'authentification de l'identité continue d'évoluer, des combinaisons traditionnelles de mots-répercussions par courrier, à la connexion sociale, à la connexion sans mot de passe d'aujourd'hui (plus précisément, «connexion par e-mail»). Le système de connexion sans mot de passe vérifie l'identité en envoyant un lien de connexion vers l'e-mail de l'utilisateur.

Le processus de connexion sans mot de passe est le suivant:

1. La page de connexion accède aux utilisateurs;
2. Entrez l'adresse e-mail et confirmez;
Le système envoie un lien de connexion à l'adresse e-mail;
Après avoir cliqué sur le lien, l'utilisateur est redirigé vers l'application et connecté;
4. Le lien n'est pas valide.
Si vous oubliez le mot de passe de votre application mais n'oubliez pas d'enregistrer votre e-mail, cette méthode est très utile. Cette technologie est également adoptée par des applications telles que Slack. Ce tutoriel montrera comment implémenter ce système dans une application Laravel. Voir le code complet ici.

Points de base

Abandon Mots de passe:
• Utilisez le "lien de connexion magique" en fonction d'une URL unique pour obtenir une authentification simple et sécurisée sans mot de passe.
Paramètres conviviaux:
• Paramètres conviviaux: Utiliser des commandes prédéfinies et un petit nombre de modifications pour implémenter facilement ce système dans les applications Laravel.
• Sécurité améliorée: Le lien de connexion magique élimine les vulnérabilités communes dans les systèmes de cryptographie traditionnels tels que les mots de passe faibles et les attaques de phishing.
• Flexibilité et contrôle: Les utilisateurs peuvent toujours choisir de se connecter avec des mots de passe traditionnels, en tenant compte de la flexibilité et de la sécurité.
• Gestion efficace des jetons: Le système gère automatiquement l'expiration et la vérification des jetons pour s'assurer que le jeton est utilisé correctement et ne sera pas valable pendant longtemps.

Créer une application

Tout d'abord, créez une nouvelle application Laravel. Ce tutoriel utilise Laravel 5.2:

composer create-project laravel/laravel passwordless-laravel 5.2.*

Si vous avez déjà un projet Laravel avec l'utilisateur et le mot de passe, ne vous inquiétez pas, nous ne modifierons pas le processus d'authentification normal, mais ajoutez une couche par-dessus. Les utilisateurs peuvent toujours choisir de se connecter avec leur mot de passe.

Paramètres de la base de données

Avant d'exécuter la migration, vous devez configurer une base de données MySQL.

Ouvrez le fichier .env dans le répertoire racine et entrez le nom d'hôte, le nom d'utilisateur et le nom de la base de données:

<code>[...]
DB_CONNECTION=mysql
DB_HOST=localhost
DB_DATABASE=passwordless-app
DB_USERNAME=username
DB_PASSWORD=
[...]</code>

Si vous utilisez une boîte Homestead Amproved, la combinaison de base de données / nom d'utilisateur / mot de passe est Homestead, Homestead, secret.

Créer l'authentification

Laravel La version 5.2 présente une excellente fonctionnalité: ajoutez une couche d'authentification préfabriquée avec une seule commande. Faisons ceci:

composer create-project laravel/laravel passwordless-laravel 5.2.*

Cette commande construit tout ce dont vous avez besoin pour l'authentification, à savoir les vues, les contrôleurs et les itinéraires.

migration

Dans le répertoire de la base de données / migrations, vous pouvez voir que l'application Laravel générée contient les fichiers de migration qui créent des tables d'utilisateurs et des tables Password_Reset.

Nous ne modifierons rien car nous voulons toujours que l'application ait un processus d'authentification normal.

Pour créer une table, exécutez:

<code>[...]
DB_CONNECTION=mysql
DB_HOST=localhost
DB_DATABASE=passwordless-app
DB_USERNAME=username
DB_PASSWORD=
[...]</code>

L'application est désormais disponible et les utilisateurs devraient être en mesure de s'inscrire et de se connecter à l'aide des liens dans la barre de navigation.

Modifier la liaison de connexion

Ensuite, nous modifierons le lien de connexion pour le rediriger vers une vue de connexion personnalisée où l'utilisateur ne soumetra que l'adresse e-mail sans mot de passe.

Accédez à Resources / Views / Layouts / App.blade.php. Vous pouvez y trouver la section de la barre de navigation. Modifiez la ligne contenant le lien de connexion (en dessous de l'instruction conditionnelle qui vérifie si l'utilisateur s'est déconnecté) vers:

Ressources / vues / disposition / app.blade.php

php artisan make:auth

Lorsque les utilisateurs non logés essaient d'accéder aux itinéraires protégés, ils doivent être emmenés vers une nouvelle vue de connexion personnalisée, plutôt que la vue de connexion normale. Ce comportement est spécifié dans l'authentification middleware. Nous devons l'ajuster:

app / http / middleware / authenticiate.php

php artisan migrate

Notez que dans le bloc Else, nous avons changé la redirection pour pointer vers la connexion / MagicLink, pas la connexion normale.

Créer des contrôleurs de connexion magiques, des vues et des itinéraires

L'étape suivante consiste à créer un MagicLoginController dans le dossier Auth:

[...]
@if (Auth::guest())
<li><a href="https://www.php.cn/link/9964364bfd2b38643a0b41b981c01f60'/login/magiclink') }}">Login</a></li>
<li><a href="https://www.php.cn/link/9964364bfd2b38643a0b41b981c01f60'/register') }}">Register</a></li>
[...]

Ensuite, il y a l'itinéraire qui affiche la page de connexion personnalisée:

app / http / routes.php

class Authenticate
{
[...]
public function handle($request, Closure $next, $guard = null)
{
    if (Auth::guard($guard)->guest()) {
        if ($request->ajax() || $request->wantsJson()) {
            return response('Unauthorized.', 401);
        } else {
            return redirect()->guest('login/magiclink');
        }
    }

    return $next($request);
}
[...]

Mettons à jour le MagicLoginController pour inclure l'action Show:

app / http / contrôlers / auth / magicLoginController.php

php artisan make:controller Auth\MagicLoginController

Pour la nouvelle vue de connexion, nous emprunterons la vue de connexion normale, mais supprimez le champ de mot de passe. Nous avons également modifié l'URL du post du formulaire pour pointer vers /login/magiclink.

Créons un dossier magique dans le dossier View / Auth pour enregistrer cette nouvelle vue:

[...]
Route::get('/login/magiclink', 'Auth\MagicLoginController@show');

mettons à jour la vue nouvellement créée pour:

Ressources / vues / auth / magic / login.blade.php

class MagicLoginController extends Controller
{
    [...]
    public function show()
    {
        return view('auth.magic.login');
    }
    [...]
}

Nous conserverons l'option de connexion avec le mot de passe, car les utilisateurs peuvent toujours choisir de se connecter avec le mot de passe. Donc, si l'utilisateur clique sur la connexion dans la barre de navigation, il verra la vue de connexion comme indiqué ci-dessous:

En raison des limitations de l'espace, le reste des pièces ne peut pas être entièrement élargi, mais les idées de base sont les suivantes:

• Générer et associer des jetons: Créer une méthode d'itinéraire et de contrôleur pour gérer la soumission des formulaires de connexion, vérifier l'adresse e-mail, générer un jeton pour l'utilisateur et associer le jeton à l'utilisateur. Utilisez str_random() pour générer un jeton aléatoire et stocker dans la base de données.
• Envoyez le courrier des jetons: Ajouter une méthode au modèle UserToken pour envoyer des e-mails contenant des liens de connexion à l'aide de la fonction de courrier de Laravel. Le lien doit contenir le jeton, l'adresse e-mail et souvenez-vous de ma valeur. Utilisez Mail::raw() pour envoyer des messages texte brusques ou créer une vue de courrier pour améliorer l'apparence du message.
• Vérification et authentification des jetons: Créez une méthode d'itinéraire et de contrôleur pour gérer la clic sur le lien de connexion. Utilisez la liaison du modèle de routage pour obtenir le jeton, vérifiez que le jeton a expiré et appartient à l'adresse e-mail soumise. Utilisez la bibliothèque Carbon pour vérifier le temps d'expiration du jeton. Une fois la vérification réussie, utilisez Auth::login() pour vous connecter à l'utilisateur et supprimer le jeton utilisé.

Grâce aux étapes ci-dessus, vous pouvez implémenter un système de connexion sans mot de passe sûr et fiable dans l'application Laravel, offrant aux utilisateurs une expérience de connexion plus pratique et sûre. N'oubliez pas d'ajuster le temps d'expiration du jeton et d'autres paramètres en fonction de vos besoins réels. Pour un code complet et des étapes plus détaillées, veuillez vous référer au lien de code complet que vous avez fourni.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!