Le changement de mot de passe utilisateur est une fonctionnalité essentielle mais souvent vulnérable.
Sans une validation adéquate et une mise à jour sécurisée, les mots de passe peuvent être compromis, exposant les données des utilisateurs.
Cet article vous montre comment créer un processus de changement de mot de passe sécurisé en utilisant des méthodes robustes de validation et de mise à jour.
Initiez-vous à Laravel et réalisez votre première application en toute confiance.
Dans cette section, vous allez apprendre à permettre aux utilisateurs de modifier leur mot de passe en toute sécurité. Vous verrez comment afficher un formulaire pour cette action, valider les données saisies et mettre à jour le mot de passe dans la base de données avec les bonnes pratiques.
Changement sécurisé : UserController
Pour implémenter cette fonctionnalité, vous devez d’abord ajouter deux méthodes dans votre contrôleur :
- Une méthode pour afficher le formulaire permettant à l’utilisateur de saisir les informations nécessaires au changement de mot de passe.
- Une méthode pour valider les informations, sécuriser la modification et sauvegarder le nouveau mot de passe
Vous devez commencer par créer une méthode qui affichera un formulaire à l’utilisateur. Voici comment cette méthode fonctionne
public function password() //formulaire d'update de password
{
$data = [
'title' => $description = 'Modifier mon mot de passe',
'description'=>$description,
'user'=>auth()->user(),
];
return view('user.password', $data);
}
Dans cette méthode :
- Vous récupérez l’utilisateur actuellement connecté grâce à auth()->user() et passez ces données à une vue.
- Le formulaire affichera alors un champ pour le mot de passe actuel, un champ pour le nouveau mot de passe et un champ de confirmation.
- Vous pouvez également inclure un titre et une description pour améliorer l’interface utilisateur.
Ensuite, vous devez créer une méthode qui se chargera de valider les informations fournies par l’utilisateur, puis de mettre à jour son mot de passe si tout est correct.
Voici la méthode expliquée :
public function updatePassword() //mise à jour du mot de passe
{
request()->validate([
'current'=>'required|password',
'password'=>'required|between:9,20|confirmed',
]);
$user = auth()->user();
$user->password = bcrypt(request('password'));
$user->save();
$success = 'Mot de passe mis à jour.';
return back()->withSuccess($success);
}
Dans cette méthode :
Validation des données :
- Le champ current s’assure que l’utilisateur a correctement entré son mot de passe actuel.
- Le champ password impose une longueur minimale et une confirmation pour éviter les erreurs.
Mise à jour sécurisée :
- Avant d’enregistrer, le nouveau mot de passe est hashé à l’aide de la fonction bcrypt pour garantir la sécurité.
Retour à l’utilisateur :
- En cas de succès, l’utilisateur est redirigé avec un message confirmant la modification.
Sécuriser routes : changement mot de passe
Pour que vos méthodes soient accessibles, vous devez définir les routes correspondantes dans votre fichier web.php. Voici les définitions nécessaires :
Route::get('user/password', [UserController::class, 'password'])->name('user.password');
Route::post('password', [UserController::class, 'updatePassword'])->name('update.password');
- La première route sert à afficher le formulaire.
- La seconde permet de traiter la mise à jour après soumission.
Formulaire sécurisé : vue de mot de passe
La vue est essentielle pour fournir une interface à l’utilisateur. Voici un exemple de fichier Blade nommé password.blade.php :
@extends('layouts.main')
@section('content')
<div class="row">
<div class="col-lg-3">
@include('includes.sidebar')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
<!-- /.card -->
<div class="card card-outline-secondary my-4">
<div class="card-header">
Modifier mon mot de passe
</div>
<div class="card-body">
<form action="{{ route('update.password') }}" method="post">
@csrf
<div class="form-group">
<label for="current">Mot de passe actuel</label>
<input type="password" name="current" class="form-control">
@error('current')
<div class="error">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="password">Nouveau mot de passe</label>
<input type="password" name="password" class="form-control">
@error('password')
<div class="error">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="password_confirmation">Confirmez le mot de passe</label>
<input type="password" name="password_confirmation" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Modifier</button>
</form>
<p class="mt-5"><a href="{{ route('user.edit') }}" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Revenir à mon compte</a></p>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col-lg-9 -->
</div>
@stop
Dans cette vue :
- Vous incluez un formulaire avec des champs pour le mot de passe actuel, le nouveau mot de passe, et la confirmation.
- Les erreurs de validation sont affichées sous chaque champ concerné.
Pour tester la mise à jour du mot de passe utilisateur, commencez par vérifier le formulaire accessible à l’URL /user/password.
Voici la page
Assurez-vous que tous les champs nécessaires (mot de passe actuel, nouveau mot de passe, confirmation) s’affichent correctement et que les validations fonctionnent. Essayez de soumettre des données incorrectes, telles qu’un mot de passe actuel erroné, un nouveau mot de passe trop court ou une confirmation qui ne correspond pas. Les messages d’erreur doivent être clairs et précis sous chaque champ concerné.
Dans ce cas il s’affichage message erreur cas les champs vide
Pour le cas le mot passe es incorrecte voici affichage
Ensuite, testez le processus de validation et de mise à jour. Fournissez un mot de passe actuel valide, un nouveau mot de passe conforme aux règles, et confirmez correctement ce dernier. Après soumission, vous devez recevoir un message de succès indiquant que le mot de passe a été mis à jour. Essayez de vous déconnecter et de vous reconnecter avec le nouveau mot de passe pour confirmer que la modification a bien été prise en compte.
Ces tests couvrent les principales validations, la fonctionnalité et les mesures de sécurité associées à la mise à jour du mot de passe.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment afficher un formulaire sécurisé pour le changement de mot de passe?
Comment valider les données lors du changement de mot de passe?
Comment mettre à jour le mot de passe en toute sécurité?
Quelles routes configurer pour le changement de mot de passe?
Comment tester la fonctionnalité de changement de mot de passe?
Conclusion
En assurant un changement de mot de passe sécurisé, vous protégez les données sensibles de vos utilisateurs. Comment pouvez-vous encore renforcer la sécurité dans ce processus?
