Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Authentifiez les utilisateurs existants de l'application React à l'aide d'Amazon Cognito et de l'interface utilisateur AWS Amplify
<a name="authenticate-react-app-users-cognito-amplify-ui"></a>

*Daniel Kozhemyako, Amazon Web Services*

## Résumé
<a name="authenticate-react-app-users-cognito-amplify-ui-summary"></a>

Ce modèle montre comment ajouter des fonctionnalités d'authentification à une application React frontale existante à l'aide d'une bibliothèque d' AWS Amplify interface utilisateur et d'un groupe d'utilisateurs Amazon Cognito.

Le modèle utilise Amazon Cognito pour fournir l'authentification, l'autorisation et la gestion des utilisateurs pour l'application. Il utilise également un composant d'[Amplify UI](https://ui.docs.amplify.aws/react/getting-started/introduction), une bibliothèque open source qui étend les fonctionnalités de développement AWS Amplify d'interfaces utilisateur (UI). Le composant [Authenticator UI](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced) gère les sessions de connexion et exécute le flux de travail connecté au cloud qui authentifie les utilisateurs via Amazon Cognito.

Après avoir implémenté ce modèle, les utilisateurs peuvent se connecter à l'aide de l'une des informations d'identification suivantes :
+ Nom d'utilisateur et mot de passe
+ Fournisseurs d'identité sociale, tels qu'Apple, Facebook, Google et Amazon
+ Fournisseurs d'identité d'entreprise compatibles avec SAML 2.0 ou OpenID Connect (OIDC)

**Note**  
Pour créer un composant d'interface utilisateur d'authentification personnalisé, vous pouvez exécuter le composant d'interface utilisateur d'authentification en mode headless.

## Conditions préalables et limitations
<a name="authenticate-react-app-users-cognito-amplify-ui-prereqs"></a>

**Conditions préalables**
+ Un actif Compte AWS
+ Une application Web React 18.2.0 ou version ultérieure
+ [Node.js et npm 6.14.4 ou version ultérieure, installés](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

**Limites**
+ Ce modèle s'applique uniquement aux applications Web React.
+ Ce modèle utilise un composant Amplify UI prédéfini. La solution ne couvre pas les étapes requises pour implémenter un composant d'interface utilisateur personnalisé.

**Versions du produit**
+ Amplify UI 6.1.3 ou version ultérieure (Gen 1)
+ Amplify 6.0.16 ou version ultérieure (Gen 1)

## Architecture
<a name="authenticate-react-app-users-cognito-amplify-ui-architecture"></a>

**Architecture cible**

Le schéma suivant montre une architecture qui utilise Amazon Cognito pour authentifier les utilisateurs d'une application Web React.

![Amazon Cognito authentifie les utilisateurs d'une application Web React.](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/b2cea053-6931-4404-8aa8-c623ce2024ac/images/b7f69f20-a39d-4a78-8605-7dab73c59052.png)


## Outils
<a name="authenticate-react-app-users-cognito-amplify-ui-tools"></a>

**Services AWS**
+ [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) fournit des fonctionnalités d'authentification, d'autorisation et de gestion des utilisateurs pour les applications Web et mobiles.

**Autres outils**
+ [Amplify UI](https://ui.docs.amplify.aws/react/getting-started/introduction) est une bibliothèque d'interface utilisateur open source qui fournit des composants personnalisables que vous pouvez connecter au cloud.
+ [Node.js](https://nodejs.org/en/docs/) est un environnement d' JavaScript exécution piloté par les événements conçu pour créer des applications réseau évolutives.
+ [npm](https://docs.npmjs.com/about-npm) est un registre de logiciels qui s'exécute dans un environnement Node.js et est utilisé pour partager ou emprunter des packages et gérer le déploiement de packages privés.

## Bonnes pratiques
<a name="authenticate-react-app-users-cognito-amplify-ui-best-practices"></a>

Si vous créez une nouvelle application, nous vous recommandons d'utiliser Amplify Gen 2.

## Épopées
<a name="authenticate-react-app-users-cognito-amplify-ui-epics"></a>

### Création d'un groupe d'utilisateurs Amazon Cognito
<a name="create-an-cog-user-pool"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Créez un groupe d'utilisateurs. | [Créez un groupe d'utilisateurs Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html). Configurez les options de connexion et les exigences de sécurité du groupe d'utilisateurs en fonction de votre cas d'utilisation. | Développeur d’applications | 
| Ajoutez un client d'application. | [Configurez un client d'application](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html) de groupe d'utilisateurs. Ce client est nécessaire pour que votre application puisse interagir avec le groupe d'utilisateurs Amazon Cognito. | Développeur d’applications | 

### Intégrez votre groupe d'utilisateurs Amazon Cognito au composant de l'interface utilisateur Authenticator
<a name="integrate-your-cog-user-pool-with-the-authenticator-ui-component"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Installez les dépendances. | Pour installer les `@aws-amplify/ui-react` packages `aws-amplify` et, exécutez la commande suivante depuis le répertoire racine de votre application :<pre>npm i @aws-amplify/ui-react aws-amplify</pre> | Développeur d’applications | 
| Configurez le groupe d'utilisateurs. | Sur la base de l'exemple suivant, créez un `aws-exports.js` fichier et enregistrez-le dans le `src` dossier. Le fichier doit inclure les informations suivantes :[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)<pre>// replace the user pool region, id, and app client id details<br />const awsmobile = {<br />    "aws_project_region": "put_your_region_here",<br />    "aws_cognito_region": "put_your_region_here",<br />    "aws_user_pools_id": "put_your_user_pool_id_here",<br />    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"<br />}<br /><br />export default awsmobile;</pre> | Développeur d’applications | 
| Importez et configurez le service Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | Développeur d’applications | 
| Ajoutez le composant d'interface utilisateur Authenticator. | Pour afficher le composant d'`Authenticator`interface utilisateur, ajoutez les lignes de code suivantes au fichier de point d'entrée de l'application (`App.js`) :<pre>import { Authenticator } from '@aws-amplify/ui-react';<br />import '@aws-amplify/ui-react/styles.css';</pre>L'extrait de code d'exemple importe le composant d'`Authenticator`interface utilisateur et le fichier Amplify UI styles.css, qui est requis lors de l'utilisation des thèmes prédéfinis du composant.<br />Le composant `Authenticator` UI fournit deux valeurs de retour :[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)<br />Consultez l'exemple de composant suivant :<pre>function App() {<br />    return (<br />        <Authenticator><br />            {({ signOut, user }) => (<br />                <div><br />                    <p>Welcome {user.username}</p><br />                    <button onClick={signOut}>Sign out</button><br />                </div><br />            )}<br />        </Authenticator><br />    );<br />}</pre>Pour un exemple de `App.js` fichier, consultez la section [Informations supplémentaires](#authenticate-react-app-users-cognito-amplify-ui-additional) de ce modèle. | Développeur d’applications | 
| (Facultatif) Récupérez les informations de session. | Une fois qu'un utilisateur est authentifié, vous pouvez récupérer les données du client Amplify concernant sa session. Par exemple, vous pouvez récupérer le jeton Web JSON (JWT) à partir de la session d'un utilisateur afin d'authentifier les demandes de sa session auprès d'une API principale.<br />Consultez l'exemple suivant d'en-tête de demande qui inclut un JWT :<pre>import { fetchAuthSession } from 'aws-amplify/auth';<br />(await fetchAuthSession()).tokens?.idToken?.toString();</pre> | Développeur d’applications | 

## Résolution des problèmes
<a name="authenticate-react-app-users-cognito-amplify-ui-troubleshooting"></a>


| Problème | Solution | 
| --- | --- | 
| Les nouveaux utilisateurs ne peuvent pas s'inscrire à l'application. | Comme suit, assurez-vous que votre groupe d'utilisateurs Amazon Cognito est configuré pour permettre aux utilisateurs de s'inscrire pour faire partie du groupe d'utilisateurs :[See the AWS documentation website for more details](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | 
| Le composant d'authentification a cessé de fonctionner après la mise à niveau de la version 5 vers la version 6. | La `Auth` catégorie est passée à une approche fonctionnelle et a nommé les paramètres dans Amplify v6. Vous devez maintenant importer la fonctionnalité APIs directement depuis le `aws-amplify/auth` chemin. Pour plus d'informations, voir [Migrer de la version 5 à la version 6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) dans la documentation Amplify. | 

## Ressources connexes
<a name="authenticate-react-app-users-cognito-amplify-ui-resources"></a>
+ [Commencer à utiliser Amazon Cognito (site Web](https://aws.amazon.com/cognito/getting-started/))AWS 
+ [Créer une nouvelle application React](https://reactjs.org/docs/create-a-new-react-app.html) (documentation React)
+ [Qu'est-ce qu'Amazon Cognito ?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (documentation Amazon Cognito)
+ [Bibliothèque Amplify UI](https://ui.docs.amplify.aws/) (documentation Amplify)

## Informations supplémentaires
<a name="authenticate-react-app-users-cognito-amplify-ui-additional"></a>

Le `App.js` fichier doit contenir le code suivant :

```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;
```