Formulaire d'authentification 2 avec Angular

Objectifs

• Etre capable de créer une petite application d'authentification en Angular.

Travail demandé

• Voici la capture d'écran de notre formulaire de connexion réactive:



• Voici la capture d'écran de l'administrateur:

Créer le projet

• Commençons notre tutoriel en générant un projet à partir de zéro.
• Vous pouvez ignorer cette partie si vous avez déjà un projet.
• ng new formulaire2
• Il vous sera demandé si vous souhaitez ajouter un routage angulaire? Entrez y et quel format de feuille de style souhaitez-vous utiliser? Choisissez CSS.



• La CLI (Command Line Interface) générera les fichiers source et de configuration nécessaires et installera les dépendances npm. Vous aurez également la configuration du routage sans autre intervention de votre part.
• Il vous suffit d'ajouter vos composants dans le routes tableau dans le fichier src/app/app-routing.module.ts qui est le module de routage racine de notre application.

Générer les composants

1. Générer les composants login et admin

   • Revenez à votre interface de ligne de commande et accédez au dossier racine de votre projet par:cd formulaire2

   
   PS C:\Users\bigtec\angular9> cd formulaire2
   PS C:\Users\bigtec\angular9\formulaire2> 

2. Exécutez la commande ng g c pour générer les composants

ng g c login 
ng g c admin



3. Nous avons généré deux composants : ConnexionComponent et AdminComponent.
4. Le composant de connexion contiendra un formulaire basé sur un modèle (réactif) pour soumettre l'e-mail et le mot de passe de l'utilisateur.
5. Le composant d'administration sera protégé contre l'accès public. Seuls les utilisateurs connectés pourront y accéder et contiendront un bouton de déconnexion permettant à l'utilisateur de se déconnecter.

6. Lier les deux composants dans le module de routage

   • Vous devez ajouter ces composants au module de routage.
   • Ouvrez le fichier src/app/app-routing.module.ts et les modifications suivantes:

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   
   import { ConnexionComponent } from './connexion/connexion.component';
   import { AdminComponent } from './admin/admin.component';
   
   const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'connexion'},
     { path: 'connexion', component: ConnexionComponent },
     { path: 'admin', component: AdminComponent }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

7. Nous ajoutons trois routes:

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'connexion'},
  { path: 'connexion', component: ConnexionComponent },
  { path: 'admin', component: AdminComponent }
];

8. Une pathMatch pour rediriger le chemin vide vers le chemin de connexion
9. Le connexion chemin de connexion
10. Le admin chemin d'administration.

Modifier le fichier app.component.html

• Supprimons le code HTML par défaut écrit dans ce fichier.
• Ouvrez le fichier src/app/app.component.html et supprimez tout mais laissez <router-outlet></router-outlet>:

Créer l’interface utilisateur

• Une interface est définie à l’aide du mot-clé interface pour plus d’information visitez la page inteface angular
• Pour créer l’interface utilisateur, revenez à l’interface de ligne de commande et exécutez:

ng g interface utilisateur

Créer un service d’authentification

• Cette étape consiste à créer un service Angular qui exporte les méthodes requises pour authentifier les utilisateurs.
• Dans votre interface de ligne de commande, exécutez:ng g service auth
• Ouvrez le fichier src/app/auth.service.ts et mettez-le à jour suivant le modèle suivant:

import { Injectable } from '@angular/core';
import { Utilisateur } from './utilisateur';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor() { }
  public seConnecter(userInfo: Utilisateur){
    localStorage.setItem('ACCESS_TOKEN', "access_token");
  }
  public estConnecte(){
    return localStorage.getItem('ACCESS_TOKEN') !== null;

  }
  public deconnecter(){
    localStorage.removeItem('ACCESS_TOKEN');
  }
}

Créer Guard Router

• Après avoir créé les composants, le service et le modèle pour implémenter l’authentification.
• Générons un Guard Router qui sera utilisé pour protéger le composant admin de l’accès des utilisateurs non authentifiés.
• Revenez à votre interface de ligne de commande et exécutez la commande :ng g guard auth
• Accédez au fichier src/app/auth.guard.ts et mettez-le à jour comme suit:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return this.authService.estConnecte();
  }

}

Mettre le module app-routing.module.ts à jour

• Accédez au fichier src/app/app-routing.module.ts et mettez-le à jour suivant le modèle suivant:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ConnexionComponent } from './connexion/connexion.component';
import { AdminComponent } from './admin/admin.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'connexion'},
  { path: 'connexion', component: ConnexionComponent },
  { path: 'admin', component: AdminComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Créer le formulaire HTML

1. importer FormsModule et ReactiveFormsModule

   • Avant d'utiliser des formulaires réactifs dans Angular 9, nous devons importer FormsModule et ReactiveFormsModule dans le module d'application.
   • Ouvrez le fichier src/app/app.module.ts et mettez-le à jour suivant le modèle suivant:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { FormsModule, ReactiveFormsModule} from '@angular/forms';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ConnexionComponent } from './connexion/connexion.component';
   import { AdminComponent } from './admin/admin.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       ConnexionComponent,
       AdminComponent
     ],
     imports: [
       BrowserModule,
       FormsModule,
       ReactiveFormsModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. Importer FormBuilder, FormGroup, Validators

   • Ouvrez le fichier src/app/connexion.component.ts et importez:

   import { Component, OnInit } from '@angular/core';
   import { FormBuilder, FormGroup, Validators } from  '@angular/forms';
   import { Router } from  '@angular/router';
   import { Utilisateur } from  '../utilisateur';
   import { AuthService } from  '../auth.service';
   
   @Component({
     selector: 'app-connexion',
     templateUrl: './connexion.component.html',
     styleUrls: ['./connexion.component.css']
   })
   export class ConnexionComponent implements OnInit {
     loginForm: FormGroup;
     isSubmitted  =  false;
     constructor(private authService: AuthService,
       private router: Router, private formBuilder: FormBuilder ) { }
       ngOnInit() {
         this.loginForm  =  this.formBuilder.group({
             email: ['', Validators.required],
             password: ['', Validators.required]
         });
     }
     get formControls() { return this.loginForm.controls; }
     seConnecter(){
       console.log(this.loginForm.value);
       this.isSubmitted = true;
       if(this.loginForm.invalid){
         return;
       }
       this.authService.seConnecter(this.loginForm.value);
       this.router.navigateByUrl('/admin');
     }
   
   }
   

3. Créer le formulaire HTML

   • Ouvrez le fichier src/app/connexion.component.html et le contenu suivant:

   <h1 style="text-align:center">
     Exemple de connexion Angular 9
   </h1>
   <div class="login">
     <h2 class="login-header">S'identifier</h2>
     <form [formGroup]="loginForm" class="login-container" (ngSubmit)="seConnecter()">
       <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
         <input type="email" placeholder="Email" formControlName="email">
       </p>
   
       <div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
         <div *ngIf="formControls.email.errors.required"><font color="red">L'email est requis</font></div>
       </div>
   
       <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
         <input type="password" placeholder="Password" formControlName="password">
       </p>
   
       <div *ngIf="isSubmitted && formControls.password.errors" class="help-block">
         <div *ngIf="formControls.password.errors.required"><font color="red">Mot de passe requis</font></div>
       </div>
   
       <p>
         <input type="submit" value="Log in">
       </p>
     </form>
   </div>
   

Mettre à jour les fichiers css

1. Fichier styles.css

   • Ouvrez le src/styles.css et ajoutez:

   /* You can add global styles to this file, and also import other style files */
   @import  url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
   body {
       background: #456;
       font-family: 'Open Sans', sans-serif;
   }
   

2. Fichier connexion.component.css

   • Ouvrez le src/app/connexion.component.css et ajoutez:

   /* 'Open Sans' font from Google Fonts */
   @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
   
   
   .login {
     width: 400px;
     margin: 16px auto;
     font-size: 16px;
   }
   
   .login-header,
   .login p {
     margin-top: 0;
     margin-bottom: 0;
   }
   
   .login-triangle {
     width: 0;
     margin-right: auto;
     margin-left: auto;
     border: 12px solid transparent;
     border-bottom-color: rgb(15, 66, 107);
   }
   
   .login-header {
     background: rgb(12, 77, 129);
     padding: 20px;
     font-size: 1.4em;
     font-weight: normal;
     text-align: center;
     text-transform: uppercase;
     color: #fff;
   }
   
   .login-container {
     background: #ebebeb;
     padding: 12px;
   }
   
   .login p {
     padding: 12px;
   }
   
   .login input {
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-width: 1px;
     border-style: solid;
     padding: 16px;
     outline: 0;
     font-family: inherit;
     font-size: 0.95em;
   }
   
   .login input[type="email"],
   .login input[type="password"] {
     background: #fff;
     border-color: #bbb;
     color: #555;
   }
   
   .login input[type="email"]:focus,
   .login input[type="password"]:focus {
     border-color: #888;
   }
   
   .login input[type="submit"] {
     background: rgb(1, 29, 51);
     border-color: transparent;
     color: #fff;
     cursor: pointer;
   }
   
   .login input[type="submit"]:hover {
     background: #17c;
   }
   
   .login input[type="submit"]:focus {
     border-color: #05a;
   }
   

3. Implémentation du composant Admin

   • Ouvrez le fichier src/app/admin.component.ts et ajoutez:

   import { Component, OnInit } from '@angular/core';
   import { Router } from '@angular/router';
   import { AuthService } from '../auth.service';
   
   @Component({
     selector: 'app-admin',
     templateUrl: './admin.component.html',
     styleUrls: ['./admin.component.css']
   })
   export class AdminComponent implements OnInit {
   
     constructor(private authService: AuthService, private router: Router) { }
   
     ngOnInit() {
     }
   
     seDeconnecter(){
       this.authService.seDeconnecter();
       this.router.navigateByUrl('/connexion');
     }
   
   }
   

4. Fichier admin HTML

   • Ouvrez le fichier src/app/admin.component.html et ajoutez:

   <div style="text-align:center">
     <h1>
       Bienvenue super administrateur!
     </h1>
     <p>
       <button (click)="seDeconnecter()">
         Se déconnecter
       </button>
     </p>
     <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
   </div>

5. Fichier admin CSS

   • Ouvrez le fichier src/app/admin.component.css et ajoutez:

   button{
       background: rgb(1, 29, 51);
       border-color: transparent;
       color: #fff;
       cursor: pointer;
   }