Authentification

Labo 4

Objectifs
04:24

Bien que ce travail soit normalement fait par des librairies, nous allons créer un système d'authentification dans le but de solidifier les acquis du cours théoriques.

Étapes

  • Formulaire HTML et authentification naïve
  • Base de données
  • Inscription
  • Connexion
  • Création de cookie de session
  • Vérification du cookie

Frontend
04:24

Exercise

Améliorez le code suivant dans src/routes/login/+page.svelte

Authentification simple
04:24

Dans src/routes/login/+page.server.js

Installation de Prisma
04:24

npm install prisma --save-dev
npx prisma init --datasource-provider sqlite

Schéma de la base de données
04:24

Dans le fichier prisma/schema.prisma

model User {
  id        Int     @id @default(autoincrement())
  email     String  @unique
  password  String
}

Ensuite, lancez la commande npx prisma migrate dev --name init

Pour regarder les données en DB, utilisez la commande npx prisma studio

Inscription
04:24

Hachage
04:24

Remark

Stocker le mot de passe en clair n'est pas une bonne pratique. Il faut le saler et le hacher. Pour cela, nous utiliserons la librairie bcrypt (npm install bcrypt).

Exercise

Modifiez l'inscription pour que les mots de passe soient hachés en base de données.

Connexion
04:24

Pour l'authentification, on compare les mots de passe hachés.

Exercise

Implémentez la connexion

Création du cookie de session
04:24

Dans une action, on peut utiliser

pour créer un cookie.

Le but est de faire persister la session en créant une "carte d'identité" pour que l'utilisateur n'ait pas à se reconnecter.

Remark

N'oubliez pas que les cookies peuvent être faussés par l'utilisateur!

Signature du cookie
04:24

Exercise

Créez un cookie signé lorsque l'authentification est réussie.

Nous créerons un cookie de la forme suivante:

Remark

Veillez à garder la clé secrète côté serveur!

Persistence
04:24

Il reste maintenant à vérifier si l'utilisateur est connecté!