LoginNav (Exo)
LoginNav (Exo)
Consigne
Dans cet exercice, tu vas devoir créer un formulaire de connexion, qui permettra simplement à un utilisateur de saisir son identifiant (email) et son mot de passe. Si les identifiants ne correspondent pas, un message d’erreur s’affichera pour lui indiquer que les informations sont incorrectes. En revanche, si le login et le mot de passe sont valides, l’utilisateur sera redirigé vers l’écran suivant. Pour réaliser cette opération de navigation, tu devras utiliser la navigation dynamique vue lors du cours précédent.
En bonus, fais en sorte que le champ email fonctionne avec ou sans majuscules, afin d’éviter toute erreur liée à la casse. De plus, ajoute une fonctionnalité permettant à l’utilisateur d’afficher ou masquer le mot de passe saisi, en appuyant sur une icône en forme d’œil.
Maquette
Tips
Cet exercice propose une logique relativement simple. Tu vas définir un nom d’utilisateur et un mot de passe de référence. Si ces deux éléments correspondent à ceux saisis par l’utilisateur, alors la connexion est validée et l’utilisateur peut naviguer vers l’écran suivant. Dans le cas contraire, une alerte s’affichera pour l’informer qu’une erreur est survenue.
D’ailleurs, et c’est le bonus de cet exercice, fais en sorte d’indiquer clairement à l’utilisateur ce qui ne va pas. Est-ce le nom d’utilisateur qui est incorrect ? Ou bien le mot de passe ? Affiche cette information dans l’alerte pour l’aider à corriger son erreur.
Nom des SFSymbols de l’exercice : (checkmark.seal.fill, lock.fill, eye)
Hachage
Note
On va profiter d’être sur le thème des formulaires de connexion pour parler d’une notion intéressante à connaître pour la suite : le hachage. Je t’explique.
Quand tu es sur une application et que tu crées ton compte, tu choisis un mot de passe, par exemple 1234. Mais ce mot de passe n’est pas enregistré tel quel dans la base de données. Et heureusement d’ailleurs ! Sinon, n’importe quel développeur ou pirate qui accède à la base pourrait lire tous les mots de passe des utilisateurs… pas top niveau sécurité 😬
À la place, le mot de passe est haché.
Le hachage, c’est une technique qui consiste à transformer le mot de passe en une empreinte numérique unique et illisible. Un peu comme si on le passait dans un broyeur qui le réduit en miettes impossibles à reconstituer.
Par exemple :
Mot de passe : 1234
Haché → 03ac674216f3e15c761ee1a5e255f067953623c8b388b4459e13f978d7c846f4
Cette empreinte, on l’enregistre en base.
Et quand tu veux te connecter plus tard, le système rehache le mot de passe que tu viens de taper, puis compare les deux empreintes.
- Si elles sont identiques → tu es autorisé
- Si elles sont différentes → accès refusé
L’avantage, c’est que même les développeurs n’ont pas accès au mot de passe original, seulement à son empreinte.
Et même si un pirate vole la base de données, il n’obtient que des chaînes hachées inutilisables.
Hachage
Note
On va profiter d’être sur le thème des formulaires de connexion pour parler d’une notion intéressante à connaître pour la suite : le hachage. Je t’explique.
Quand tu es sur une application et que tu crées ton compte, tu choisis un mot de passe, par exemple 1234. Mais ce mot de passe n’est pas enregistré tel quel dans la base de données. Et heureusement d’ailleurs ! Sinon, n’importe quel développeur ou pirate qui accède à la base pourrait lire tous les mots de passe des utilisateurs… pas top niveau sécurité 😬
À la place, le mot de passe est haché.
Le hachage, c’est une technique qui consiste à transformer le mot de passe en une empreinte numérique unique et illisible. Un peu comme si on le passait dans un broyeur qui le réduit en miettes impossibles à reconstituer.
Par exemple :
Mot de passe : 1234
Haché → 03ac674216f3e15c761ee1a5e255f067953623c8b388b4459e13f978d7c846f4
Cette empreinte, on l’enregistre en base.
Et quand tu veux te connecter plus tard, le système rehache le mot de passe que tu viens de taper, puis compare les deux empreintes.
✅ Si elles sont identiques → tu es autorisé
❌ Si elles sont différentes → accès refusé
L’avantage, c’est que même les développeurs n’ont pas accès au mot de passe original, seulement à son empreinte.
Et même si un pirate vole la base de données, il n’obtient que des chaînes hachées inutilisables.