Commit 3466791a authored by François Agneray's avatar François Agneray
Browse files

Page authentification => ok

parent 0a777b61
Pipeline #6801 passed with stages
in 1 minute and 9 seconds
# Les agents
# Les améliorations
\ No newline at end of file
# L'authentification
L'application developpé en `backend` nécessite une authentification pour fonctionner. Les routes utilisées auront besoin d'un jeton valide pour fonctionner.
Ce jeton va s'obtenir en envoyant un couple `email` + `password` sur une route spécifique avec la méthode `POST`. Ce jeton sera valide pendant 24h.
Il faudra ensuite l'envoyer à chaque requête vers le serveur pour prouver que l'utilisateur est connecté.
L'URL pour récuprer un jeton est la suivante :
```
http://localhost:3000/users/login
```
Nous allons voir comment gérer ceci dans une application Angular.
## Angular Route Guard
Angular met à disposition des développeurs une méthode pour sécuriser des routes dans l'application.
Il faut pour cela créer un service et implementer l'interface `CanActivate` disponible dans le package `@angular/router`.
L'interface `CanActivate` oblige à définir la méthode `canActivate(): boolean`. Cette méthode doit renvoyer true si l'utilisateur est autorisé à passer ou false sinon, exemple :
```ts
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private myService: MyService) { }
canActivate(): boolean {
if (this.myService.userAuthorized) {
return true;
} else {
return false;
}
}
}
```
Il faut ensuite ajouter sur la route à proteger la clè `canActivate` et lui passer en valeur le service `guard`, exemple :
```ts
const routes: Routes = [
{ path: 'my-component', component: MyComponent, canActivate: [AuthGuard] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
```
Attention le paramètre `canActivate` prend un tableau de `guards` comme valeur.
## TP : Développement d'un module login
Dans cette partie nous allons développer le module `LoginModule` qui permettre à un utilisateur de se connecter sur l'application. La connexion permettra de récuperer un `token` qui sera stocké. Nous ajouterons également une route protégée dans le module principal simplement pour le test.
1. Créer un module `LoginModule`
2. Créer le model `UserLogin` avec comme propriété `email` et `password` qui représente les données à envoyer à la route login
3. Créer le model `UserToken` avec comme propriété `userId` et `token` qui représente la réponse de la route login
4. Créer un service `LoginService` avec comme propriété `userToken` et comme méthode `login`
5. Créer un component `LoginComponent` qui sera le formulaire de connexion de l'utilisateur avec deux champs `email` et `password`. Le formulaire doit faire appel à la méthode `login` de `LoginService`
6. La méthode `login` de `LoginService` doit enovyer une requête au serveur `/users/login` pour récuperer un `token`. La réponse de la requête doit être stockée dans la propriété `userToken` du service.
7. Créer un service `Guard` pour vérifier que l'utilisateur à bien récuperé un `token`. Si l'utilisateur n'a pas de `token` envoyer un message `toastr` pour l'informer et rediriger le sur le formulaire de login
8. Créer un fichier de `routing` pour le module `LoginModule` avec comme chemin `login` pour aller sur le component `login`
9. Ajouter un component `MissionListComponent` dans le module principal `AppModule` avec comme affichage un simple titre `h1`
10. Ajouter une route `mission-list` dans le fichier de routing principal `AppRoutingModule` avec comme component `MissionListComponent`. Ce component doit être protegé par le service `Guard`.
11. Dans la vue de `AppComponent` mettre uniquement le `<router-outlet></router-outlet>`
12. N'oubliez pas d'importer votre module `LoginModule` dans le module principal
**Résultat attendu :**
![auth_s1](img/auth_s1.png#center)
![auth_s2](img/auth_s2.png#center)
\ No newline at end of file
# Démarrage du TP
Dans cette partie nous allons :
- Cloner le dépôt permettant de commencer le TP
- Installer les dépendances (backend + frontend)
- Démarrer l'application
## Récupération du dépôt
Pour pouvoir démarrer le TP, nous allons cloner le dépôt git contenant les fichiers sources de base : https://gitlab.lam.fr/cesamSI/envol-2021-tp-angular-2
```sh
git clone https://gitlab.lam.fr/envol/envol-2021-tp-angular-2
```
À chaque étape du TP vous pourrez retrouver une branche correspondante. Dans la branche master vous pouvez retrouver l'application finalisée.
Par défaut le dépôt est positionné sur la branche demarrage.
Pour changer de branche vous pouvez utiliser la commande checkout suivi du nom de la branche, exemple :
```sh
git checkout master
```
## Installation des dépendances
Pour fonctionner le projet à besoin de dépendances au niveau du backend et du frontend. Pour cela nous avons prévu deux raccourcis :
```sh
make install_server
make install_client
```
Les dépendances sont téléchargées et installées dans le dossier `server/node_modules` et `client/node_modules`.
## Démarrage de l'application
Nous pouvons maintenant démarrer l'application. La commande make start permet de faciliter cette action pour lancer le serveur `backend`, le serveur `frontend`, le serveur de base de données.
```
make start
```
- Vous pouvez accéder à la version du backend en développement à l'adresse suivante : `http://localhost:3000`
- Vous pouvez accéder à la version du frontend en développement à l'adresse suivante : `http://localhost:4200`
- Vous pouvez également accèder à une interface graphique pour vous connecter à la base de données à l'adresse suivante : `http://localhost:8080`
\ No newline at end of file
# Les missions
\ No newline at end of file
......@@ -4,4 +4,9 @@ dev_addr: 0.0.0.0:8888
theme: readthedocs
extra_css: [extra.css]
nav:
- Accueil: index.md
\ No newline at end of file
- Accueil: index.md
- Démarrage: demarrage.md
- L'authentification: authentification.md
- Les agents: agents.md
- Les missions: missions.md
- Les améliorations: ameliorations.md
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment