Formulaire d’authentification 2 avec Angular

Formulaire d’authentification 2 avec Angular

  1. Objectifs

    • Etre capable de créer une petite application d’authentification en Angular.
  2. Travail demandé

    • Voici la capture d’écran de notre formulaire de connexion réactive:
    • Formulaire 2 d'authentification avec Angulaire

    • Voici la capture d’écran de l’administrateur:
    • Formulaire 2 d'authentification avec Angulaire

  3. 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.
    • Formulaire 2 d'authentification avec Angulaire

    • 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.



  4. 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> 
      • Exécutez la commande ng g c pour générer les composants
      • ng g c login 
        ng g c admin

        Formulaire 2 d'authentification avec Angulaire

      • Nous avons généré deux composants : ConnexionComponent et AdminComponent.
      • 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.
      • 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.
    2. 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 { }
        
      • Nous ajoutons trois routes:
      • const routes: Routes = [
          { path: '', pathMatch: 'full', redirectTo: 'connexion'},
          { path: 'connexion', component: ConnexionComponent },
          { path: 'admin', component: AdminComponent }
        ];
      • Une pathMatch pour rediriger le chemin vide vers le chemin de connexion
      • Le connexion chemin de connexion
      • Le admin chemin d’administration.
  5. 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>:
  6. 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
    • Modifier le fichier obtenu utilisteur.ts comme suit:
    • export interface Utilisateur {
        email: string;
        password: string;
      }
    • Notre modèle est composé d’un e-mail et d’un mot de passe.
  7. 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');
        }
      }
      
  8. 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();
        }
      
      }
      
    • Nous commençons par importer AuthService et l’injecter via le constructeur du garde d’authentification.
    • Ensuite, dans la méthode canActivate (), nous implémentons la logique qui accordera ou refusera l’accès à l’utilisateur en appelant la méthode estConnecte() pour vérifier si l’utilisateur est connecté avant d’activer la route.
    • La méthode canActivate () renvoie true si les méthodes estConnecte() retournent true, c’est-à-dire si l’utilisateur est connecté. Dans ce cas, l’itinéraire auquel cette protection est appliquée est accessible à l’utilisateur.
    • Ensuite, il vous suffit d’appliquer ce garde à l’itinéraire que vous souhaitez garder.
  9. 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 { }
  10. 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>
        
  11. 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;
        }



Laisser un commentaire