1. Mettre en place une authentification

Les applications ont souvent besoin de restreindre l’accès à certaines fonctionnalités, en fonction de l’utilisateur. Par exemple, obliger l’utilisateur à s’authentifier pour accéder à son espace membre. Il faut alors bloquer ou limiter l’accès jusqu’à ce que l’utilisateur soit connecté.

Afin d’illustrer la mise en place de l’authentification, nous allons limiter l’accès à notre application de pokémons via un formulaire de connexion :

Mais pour cela, nous devons commencer par créer un service qui permettra à l’utilisateur de se connecter, et indiquer au reste de l’application si l’utilisateur est connecté ou non. Créez donc un nouveau service dédié à l’authentification dans le dossier services, nommé authentication-service.ts :

export default class AuthenticationService {

  static isAuthenticated: boolean = false;

  static login(username: string, password: string): Promise<boolean> {
    const isAuthenticated = (username === 'pikachu' && password === 'pikachu');

    return new Promise(resolve => {
      setTimeout(() => {
        this.isAuthenticated = isAuthenticated;
        resolve(isAuthenticated);
      }, 1000);
    });
  }
}

Alors que l’on pourrait s’attendre à un service très complexe ici, on peut s’étonner qu’il soit aussi court. C’est parce qu’il s’agit d’une version minimum de l’authentification, afin de mieux comprendre comment cela fonctionne. Libre à vous par la suite d’améliorer ce système, d’ailleurs je vous y encourage fortement. 😉

Mais revenons à nos explications. Ce service met à disposition plusieurs propriétés et méthodes :

• La propriété isAuthenticated (ligne 3) : C’est un booléen qui permet de savoir si l’utilisateur courant est connecté ou non. Par défaut, l’utilisateur est déconnecté lorsque l’application démarre. Heureusement ! 😅
• La méthode login (ligne 5) : Cette méthode simule une connexion à une API Rest externe en retournant une promesse qui se résout avec succès si l’utilisateur a entré les identifiants « pikachu/pikachu », après un délai de 1000 millisecondes, soit 1 seconde. Bien sûr, vous pouvez personnaliser cette méthode pour correspondre à vos propres besoin de connexion par la suite. Si l’utilisateur s’est connecté correctement, alors notre méthode retourne true. Sinon, on retourne false et tant pis pour notre visiteur.

On a maintenant un service d’authentification prêt à être utiliser. 👍

Cependant, avant de lancer l’application, nous devons encore faire deux choses :

• Il nous reste encore à créer une page avec un formulaire de connexion, et à le brancher sur ce service.
• Sécuriser les routes protégées de notre application. En effet, si l’utilisateur rentre l’url « /pokemons » à la main, il faut qu’il soit rediriger vers le formulaire de connexion s’il n’est pas authentifié.

Il ne s’agit pas d’une « vraie » connexion ici, mais cela permet de faire fonctionner notre application de démonstration. En revanche, nous avons vu tout ce qu’il faut pour construire une méthode d’authentification plus avancée pour vos utilisateurs, avec n’importe quelle API Rest, grâce aux chapitres précédents.