Formulaire d’authentification 1 avec Angular

Formulaire d’authentification avec Angular

  1. Objectifs

    • Etre capable de créer une petite application en Angular.
  2. Présentation

    • Tout au long de cette tutoriel, nous allons apprendre sur la façon de créer une application web avec angulaire pour créer un formulaire d’authentification
    • Nous supposons que vous connaissez créer un projet Angular et que vous avez lit notre tutoriel Créer un nouveau projet Angular
    • Conditions préalables
    • Ce tutoriel a quelques prérequis tels que:
      • Node.js et npm installés sur votre machine de développement,si non visitez la page :Installation d’Angular
      • Angular CLI 9 installé, sinon utilisez la commande npm install -g @angular/cli pour l’installer.

      Utiliser la commande ng generate ou ng g pour générer des blocs de construction angulaires (composants, services, tuyaux, etc.).

  3. Générer les composants

    • Générer les composants d’authentification et d’administration
      • Nous allons utiliser le projet crée la dernière séance dont le lien est ici
      • Revenez à votre interface de ligne de commande et accédez au dossier racine de votre projet:
      • PS C:\Users\bigtec> cd angular9
        PS C:\Users\bigtec\angular9> cd exempleprojet
        PS C:\Users\bigtec\angular9\exempleprojet> 
      • Exécutez la commande ng g c pour générer les composants
      • ng g c Authentification 
        ng g c Admin

        Formulaire d'authentification avec Angulaire




      • Deux composants ont été crée Authentification et Admin.
      • Le composant Authentification sera utilisé pour ajouter un formulaire réactif pour obtenir l’e-mail et le mot de passe de l’utilisateur.
      • Le composant Admin sera utilisé comme une page d’exemple qui sera sécurisée contre l’accès des utilisateurs non authentifiés. Les utilisateurs devront se connecter avant de pouvoir accéder à la page d’administration.
      • Formulaire d'authentification avec Angulaire

    • Lier les deux composants dans le module de routage
      • incluez ces deux composants dans le module de routage.
      • Dirigez-vous vers le src/app/app-routing.module.ts fichier et mettez-le à jour comme suit:
      • Formulaire d'authentification avec Angulaire

      • Nous avons créé trois routes:
        • Pour le composant authentification,
        • Pour le composant admin.
        • Un pour rediriger le chemin vide vers le chemin d’authentification.
    • Modifier le fichier app.component.html
      • Supprimez le contenue, crée par défaut, du fichier HTML app.component.html.
      • Ouvrez le fichier src/app/app.component.html et supprimez tout mais laissez <router-outlet></router-outlet> qui se trouve à la fin du fichier
  4. 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:
    • Formulaire d'authentification avec Angulaire

    • Modifier le fichier obtenu utilisteur.ts comme suit:
    • export  interface  utilisateur {
          pseudo: string;
          adressMail: string;
          motPasse: string;
      }
  5. 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:
    • Formulaire d'authentification avec Angulaire

    • Maintenant accédez au fichier src/app/authentification.service.ts et mettez-le à jour suivant le modèle suivant:
    • Formulaire d'authentification avec Angulaire

    • La méthode seConnecter n’est pas entièrement implémentée.
  6. 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:
    • Formulaire d'authentification avec Angulaire

    • Accédez au fichier src/app/auth.guard.ts et mettez-le à jour comme suit:
    • Formulaire d'authentification avec Angulaire

    • Nous commençons par importer AuthentificationService 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.
  7. Mettre le module app-routing.module.ts à jour

    • Accédez au fichier src/app/app-routing.module.ts et mettez-le à jour en conséquence:
    • Formulaire d'authentification avec Angulaire

  8. Créer le formulaire HTML.

    • Ouvrez le fichier src/app/login.component.html et le contenu suivant:
    • <h1 style="text-align:center">
        Angular 10 Auth Example
      </h1>
      <div class="login">
        <h2 class="login-header">Log in</h2>
        <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">
          <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">Email is required</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">Password is required</div>
          </div>
          <p>
            <input type="submit" value="Log in">
          </p>
        </form>
      </div>
      
  9. Mettre à jour les fichiers css

    • 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;
        }
        
    • Fichier login.component.css
      • Ouvrez le src/app/login.component.css.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;
        }