Comment utiliser AWS Cognito avec Angular

AWS Cognito est un puissant service d’authentification et de gestion des utilisateurs fourni par Amazon Web Services. Utilisé avec Angular, il offre un moyen transparent de gérer l’authentification et l’autorisation des utilisateurs au sein de votre application. Dans ce guide, nous vous expliquerons les étapes pour intégrer AWS Cognito avec Angular.

Configurer un groupe d’utilisateurs AWS Cognito

Tout d’abord, vous devez configurer un groupe d’utilisateurs AWS Cognito. Cela peut être fait via la console de gestion AWS ou en utilisant l’AWS CLI. Un groupe d’utilisateurs vous permet de gérer l’inscription, la connexion et d’autres fonctionnalités d’authentification des utilisateurs.

Installer les dépendances

Pour intégrer AWS Cognito avec Angular, vous devez installer le SDK AWS pour JavaScript et la bibliothèque AWS Amplify. Ouvrez votre projet Angular et exécutez les commandes suivantes :

npm install aws-sdk
npm install aws-amplify

Configurer AWS Amplify

AWS Amplify est une bibliothèque JavaScript qui facilite l’interaction avec les services AWS, y compris Cognito. Dans votre projet Angular, créez un nouveau fichier appelé aws-exports.js et ajoutez le code suivant :

const awsmobile = {
  aws_project_region: '<YOUR_AWS_REGION>',
  aws_cognito_identity_pool_id: '<YOUR_IDENTITY_POOL_ID>',
  aws_cognito_region: '<YOUR_COGNITO_REGION>',
  aws_user_pools_id: '<YOUR_USER_POOL_ID>',
  aws_user_pools_web_client_id: '<YOUR_USER_POOL_WEB_CLIENT_ID>',
}

export default awsmobile

Assurez-vous de remplacer <YOUR_AWS_REGION>, <YOUR_IDENTITY_POOL_ID>, <YOUR_COGNITO_REGION>, <YOUR_USER_POOL_ID> et <YOUR_USER_POOL_WEB_CLIENT_ID> par vos propres configurations AWS Cognito.

Initialiser AWS Amplify

Dans le fichier principal app.module.ts de votre projet Angular, importez les bibliothèques nécessaires et ajoutez le code suivant :

import Amplify from 'aws-amplify'
import awsmobile from './aws-exports'

Amplify.configure(awsmobile)

Cela initialise la bibliothèque AWS Amplify avec vos configurations AWS Cognito.

Implémenter l’authentification dans les composants Angular

Vous pouvez maintenant utiliser AWS Cognito pour l’authentification et l’autorisation des utilisateurs dans vos composants Angular. Voici un exemple d’implémentation d’une fonctionnalité de connexion :

import { Component } from '@angular/core'
import { Auth } from 'aws-amplify'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {
  username = ''
  password = ''

  async login() {
    try {
      await Auth.signIn(this.username, this.password)
    } catch (error) {
      console.log('Error signing in:', error)
    }
  }
}

Dans cet exemple, la méthode Auth.signIn() est utilisée pour authentifier l’utilisateur avec son nom d’utilisateur et son mot de passe. Vous pouvez gérer les cas de succès et d’erreur en conséquence.

Implémenter l’autorisation dans les routes Angular

Pour protéger certaines routes de votre application Angular, vous pouvez utiliser AWS Cognito pour l’autorisation. Voici un exemple d’implémentation de guards de route :

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Auth } from 'aws-amplify';

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

  async canActivate() {
    try {
      await Auth.currentAuthenticatedUser();
      return true;
    } catch (error) {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Dans cet exemple, la méthode Auth.currentAuthenticatedUser() est utilisée pour vérifier si l’utilisateur est authentifié. Sinon, il sera redirigé vers la page de connexion.

L’intégration d’AWS Cognito avec Angular offre un moyen sécurisé et efficace de gérer l’authentification et l’autorisation des utilisateurs. En suivant les étapes décrites dans ce guide, vous pouvez facilement implémenter AWS Cognito dans votre application Angular.