Formulaire d’authentification 1 avec Angular

Formulaire d’authentification avec Angular

Objectifs

Etre capable de créer une petite application en Angular.

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

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

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;
}

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.

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.

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

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>

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;
}

Sommaire du cours Angular

Formulaire d’authentification 2

Angular

Formulaire d’authentification avec Angular

Objectifs

Présentation

Générer les composants

Générer les composants d’authentification et d’administration

Lier les deux composants dans le module de routage

Modifier le fichier app.component.html

Créer l’interface utilisateur

Créer un service d’authentification

Créer Guard Router

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

Créer le formulaire HTML.

Mettre à jour les fichiers css

Fichier styles.css

Fichier login.component.css

Sommaire du cours Angular

Créer un nouveau projet Angular

Formulaire d'authentification 2 avec Angular

You may also like

Angular NgModel

Validation de formulaires en Angular

Les directives structurelles