Mise en route avec AWS

Développer une application React

Créer une application Web simple avec AWS Amplify

Module 3 : Ajouter une authentification

Dans ce module, vous allez utiliser la ligne d'interface de commande Amplify et des bibliothèques pour configurer et ajouter une authentification à votre application.

Introduction

La prochaine fonction que vous ajouterez est l'authentification. Dans ce module, vous apprendrez comment authentifier un utilisateur avec l’interface de ligne de commande et les bibliothèques Amplify, en exploitant Amazon Cognito, un service géré d'identités des utilisateurs.

Vous apprendrez également à utiliser la bibliothèque de composants de l'interface utilisateur Amplify pour mettre en place un flux complet d'authentification des utilisateurs, ce qui permettra à ces derniers de s'inscrire, de se connecter et de réinitialiser leur mot de passe avec seulement quelques lignes de code.

Opérations que vous allez apprendre à effectuer

  • Installer les bibliothèques Amplify
  • Créer et déployer un service d'authentification
  • Configurer une application React afin d'inclure une authentification

Concepts clés

Bibliothèques Amplify  : ces bibliothèques vous permettent d'interagir avec les services AWS à partir d'une application mobile ou web.

Authentification : au niveau logiciel, l'authentification correspond au processus de vérification et de gestion de l'identité d'un utilisateur avec un service d'authentification ou d'une API.

 Durée nécessaire

10 minutes

 Services utilisés

Mise en œuvre

  • Installer les bibliothèques Amplify

    Nous aurons besoin de deux bibliothèques Amplify pour notre projet. La bibliothèque aws-amplify library principale contient toutes les API client que nous utiliserons pour l'intégration avec les différents services AWS et la bibliothèque @aws-amplify/ui-react qui contient les composants de l'interface utilisateur propre au cadre. Installez ces bibliothèques à la racine du projet.

    npm install aws-amplify @aws-amplify/ui-react
  • Créer le service d'authentification

    Pour créer ce service, utilisez l’interface de ligne de commande Amplify :

    amplify add auth
    
    ? Do you want to use the default authentication and security configuration? Default configuration
    ? How do you want users to be able to sign in? Username
    ? Do you want to configure advanced settings? No, I am done.
  • Déployer le service d'authentification

    Une fois le service d'authentification configuré localement, nous pouvons le déployer en exécutant la commande Amplify push :

    amplify push --y
  • Configurer le projet React avec les ressources Amplify

    L’interface de ligne de commande a créée et continuera à mettre à jour le fichier aws-exports.js situé dans le répertoire src de notre projet. Nous utiliserons ce fichier pour faire connaître au projet React les différentes ressources AWS qui sont disponibles dans notre projet Amplify.

    Pour configurer notre application avec ces ressources, ouvrez le fichier src/index.js et ajoutez le code suivant sous la dernière importation :

    import Amplify from 'aws-amplify';
    import config from './aws-exports';
    Amplify.configure(config);
    
  • Ajouter le flux d'authentification dans le fichier App.js

    Ensuite, ouvrez le fichier src/App.js et mettez-le à jour avec le code suivant :

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
    
    function App() {
      return (
        <div className="App">
          <header>
            <img src={logo} className="App-logo" alt="logo" />
            <h1>We now have Auth!</h1>
          </header>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    Dans ce composant, nous avons utilisé le composant withAuthenticator. Ce composant mettra en place un flux d'authentification complet permettant aux utilisateurs de s'inscrire, de se connecter, de réinitialiser leur mot de passe et de confirmer leur connexion pour l'authentification multi-facteur (AMF). Nous avons également utilisé le composant AmplifySignOut qui fera apparaître un bouton de déconnexion.

  • Exécuter l'application localement

    Ensuite, lancez l'application pour voir le nouveau flux d'authentification qui protège l'application :

    npm start
    Front End Sign In Screen Module 3

    Ici, vous pouvez essayer de vous inscrire, ce qui vous permettra de vous inscrire automatiquement. Une fois connecté, vous devriez voir un bouton de déconnexion qui permettra à l'utilisateur de se déconnecter et de relancer le processus d'authentification.

  • Déployer les modifications dans l'environnement réel

    Déployez les modifications sur GitHub pour lancer une nouvelle construction sur la console Amplify :

    git add .
    git commit -m “added auth”
    git push origin master
    

Conclusion

Vous venez d'ajouter l'authentification des utilisateurs à votre application avec seulement quelques lignes de code. Dans le module suivant, nous allons ajouter une API à votre application.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer