Page Inscription
Dans un premier temps, j’ai travaillé sur la mise en place d’un formulaire d’inscription en utilisant le framework Symfony. L’objectif était de permettre aux utilisateurs de s’inscrire sur notre application en fournissant les informations requises, qui seraient ensuite stockées dans la table « utilisateurs » de notre base de données, afin de pouvoir les récupérer sur d’autres pages.
Voici les principales étapes que j’ai suivies pour créer cette page d’Inscription :
- Création du formulaire :
J’ai utilisé la fonctionnalité de génération automatique de formulaire de Symfony en utilisant un bundle dédié pour créer le formulaire d’inscription. Cela m’a permis de générer rapidement les champs requis tels que l’adresse e-mail, le mot de passe, le nom, le prénom, etc. J’ai également ajouté des contraintes de validation pour garantir la saisie correcte des données, comme par exemple la nécessité de répéter le mot de passe pour éviter les erreurs de saisie.
2. Gestion des données :
Lorsque l’utilisateur soumets le formulaire d’inscription, je veille à ce qu’il soit valide, c’est-à-dire que toutes les conditions requises soient remplies. Je vérifie notamment que l’adresse e-mail est unique et que tous les champs obligatoires soient remplis.
Si le formulaire est valide, alors je procède à l’enregistrement des données dans la base de données. Par souci de sécurité, j’utilise une fonction de hachage pour stocker le mot de passe de manière sécurisée. J’utilise les entités de Doctrine pour faciliter cette étape et l’EntityManager pour enregistrer mes données dans la base de données.
En effectuant ces étapes, je m’assure que les données sont enregistrées de manière fiable et sécurisée, conformément aux règles définies par l’application et de respecter les contraintes de la base de données. Cela permet également de prévenir les doublons d’adresses e-mail et de garantir que l’utilisateur a fourni toutes les informations nécessaires lors de son inscription.
3. Personnalisation du formulaire :
J’ai personnalisé le formulaire d’inscription en utilisant un thème Bootstrap que j’ai adapté à la charte graphique de l’application web. Cette personnalisation offre aux utilisateurs une interface intuitive, facilitant la compréhension des informations attendues dans chaque champ. J’ai également ajouté des messages d’erreur spécifiques pour certains champs, permettant ainsi de guider les utilisateurs en cas de saisie incorrecte, par exemple lorsque deux mots de passe saisis sont différents.
Pages Connexion
Dans un second temps, j’ai travaillé sur l’authentification des utilisateurs. Pour simplifier cette tâche et bénéficier d’une sécurité automatique, j’ai utilisé un bundle qui génère la logique principale. Cela nous évite d’avoir à nous soucier de la sécurité, car le bundle s’en charge automatiquement. Il modifie également le fichier de configuration YAML correspondant à la logique de sécurité.
Grâce à ce bundle, la vérification du mot de passe est gérée directement. Il compare le hash du mot de passe stocké avec celui fourni par l’utilisateur et s’assure qu’ils correspondent. De plus, ce bundle nous permet de générer une route de déconnexion préconfigurée, accessible via l’URL /logout.
ci-dessous on peut voir à quoi correspond le formulaire de connexion, j’ai également utilisé bootstrap ainsi qu’un template, pour le concevoir.
ici on peut observer le code de l’authentification, elle permet de vérifier si l’utilisateur est déjà connecter alors si c’est le cas celui-ci sera renvoyé sur la page d’accueil, de même une fois identifié il sera renvoyé sur cette page mais la barre de navigation proposera plus de fonctionnalité nous verrons ceci dans les pages voyages
Lors de la création de la page de connexion, j’ai également travaillé sur la fonctionnalité de mot de passe oublié. Pour mettre en place cette fonctionnalité, j’ai suivi les conseils de la documentation de Symfony, qui recommande l’utilisation d’un bundle de leur framework dédié à cet effet.
J’ai donc suivi les étapes conseillées et commencer par configurer la liaison avec un serveur SMTP (j’ai pu passer par mailtrap qui permet de gérer l’envoie d’email) dans le fichier `.env`, qui contient toutes les variables d’environnement. C’est également à cet endroit que nous avons effectué la connexion à la base de données. Une fois cette étape réalisée, le bundle a généré tous les fichiers nécessaires, y compris une table nommée `reset_password_request` dans la base de données.
Cette table enregistre les demandes de réinitialisation de mot de passe effectuées par les utilisateurs. Elle contient également un suffixe d’URL unique qui est utilisé pour générer le lien de réinitialisation du mot de passe. Le bundle gère également la génération de la date et de l’heure de la requête, ainsi que sa date d’expiration.
Lorsqu’un utilisateur fait une demande de réinitialisation de mot de passe, il reçoit un e-mail contenant un lien. Une fois que l’utilisateur clique sur ce lien et réinitialise son mot de passe, sa demande est supprimée de la base de données.
Ici, nous pouvons observer le fonctionnement du modèle de l’e-mail, ainsi que l’affichage des différentes données. De plus, nous remarquons que l’expéditeur de l’e-mail est personnalisé.
Profil
L’URL du profil est générée grâce à l’attribut « slug » dans l’entité « User ». Ce slug est une chaîne de caractères unique qui permet de cacher l’identifiant de l’utilisateur aux visiteurs. Une fois sur la page de profil, je vérifie si l’utilisateur connecté correspond à l’utilisateur du profil, car je n’afficherai pas les mêmes informations pour tous les utilisateurs. Par exemple, je ne veux éviter qu’un utilisateur non connecté puisse modifier le profil d’une autre personne.
Sur la page de profil, j’affiche différentes informations telles que l’image de profil, le nom, le prénom, l’adresse e-mail et le numéro de téléphone de l’utilisateur. Si l’utilisateur connecté est bien sur son propre profil, nous lui donnons la possibilité d’accéder à sa messagerie, de modifier son profil et de voir ses prochains voyages en tant que passager. De plus, il peut également noter les conducteurs avec lesquels il a voyagé récemment. Avant d’afficher les voyages en tant que passager, nous vérifions que la date de chaque voyage n’est pas dépassée. Si c’est le cas, nous n’affichons pas le voyage et proposons plutôt à l’utilisateur de le noter.
Dans l’édition de son profil, l’utilisateur a la possibilité de modifier toutes ses informations. Cette fonctionnalité est protégée par une sécurité supplémentaire où l’utilisateur ne peut pas accéder à l’édition du profil d’autres utilisateurs. Cela est réalisé en utilisant une annotation de sécurité appropriée pour restreindre l’accès aux fonctionnalités d’édition du profil aux seuls utilisateurs autorisés.
Je sais que l’image de profil est stockée lors de l’inscription grâce au formulaire correspondant ou lors de l’édition de son profil. Cependant, cette image est optionnelle, ce qui signifie que l’utilisateur peut choisir de ne pas en fournir. Dans ce cas, je doit vérifier si l’utilisateur possède une image de profil. Si c’est le cas, nous l’affichons, sinon nous affichons une image par défaut à la place. Le code que je vous ai fourni ici correspond à l’affichage de l’image dans la barre de navigation, mais le même principe s’applique pour afficher l’image dans la page de profil de l’utilisateur.
