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.

# Créez une application React à l'aide d'AWS Amplify et ajoutez l'authentification avec Amazon Cognito
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Résumé
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

Ce modèle montre comment utiliser AWS Amplify pour créer une application basée sur React et comment ajouter une authentification au frontend à l'aide d'Amazon Cognito. AWS Amplify comprend un ensemble d'outils (framework open source, environnement de développement visuel, console) et de services (hébergement d'applications Web et de sites Web statiques) destinés à accélérer le développement d'applications mobiles et Web sur AWS. 

## Conditions préalables et limitations
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**Prérequis**
+ Un compte AWS actif
+ [Node.js](https://nodejs.org/en/download/) et [npm](https://www.npmjs.com/get-npm) installés sur votre machine

**Versions du produit**
+ Node.js version 10.x ou ultérieure (pour vérifier votre version, exécutez-le `node -v` dans une fenêtre de terminal)
+ npm version 6.x ou version ultérieure (pour vérifier votre version, exécutez-le `npm -v` dans une fenêtre de terminal)

## Architecture
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Pile technologique cible**
+ AWS Amplify
+ Amazon Cognito

## Outils
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Amplify Command Line Interface (CLI)](https://docs.amplify.aws/cli/)
+ [Amplify Libraries (bibliothèques](https://docs.amplify.aws/lib/q/platform/react-native/) clientes open source)
+ [Amplify Studio (interface](https://docs.amplify.aws/console/) visuelle)

## Épopées
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Installation de l'interface de ligne de commande AWS Amplify
<a name="install-aws-amplify-cli"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Installez la CLI Amplify. | L'Amplify CLI est une chaîne d'outils unifiée permettant de créer des services cloud AWS pour votre application React. Pour installer la CLI Amplify, exécutez :<pre>npm install -g @aws-amplify/cli</pre>npm vous informera si une nouvelle version majeure est disponible. Si tel est le cas, utilisez la commande suivante pour mettre à niveau votre version de npm :<pre>npm install -g npm@9.8.0</pre>où 9.8.0 fait référence à la version que vous souhaitez installer. | Développeur d’applications | 

### Création d'une application React
<a name="create-a-react-app"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Créez une application React. | Pour créer une nouvelle application React, utilisez la commande :<pre>npx create-react-app amplify-react-application</pre>où `ampify-react-application` est le nom de l'application.Lorsque l'application a été créée avec succès, le message suivant s'affiche :<pre>Success! Created amplify-react-application</pre>Un répertoire avec différents sous-dossiers sera créé pour l'application React. | Développeur d’applications | 
| Lancez l'application sur votre ordinateur local. | Accédez au répertoire `amplify-react-application` créé à l'étape précédente et exécutez la commande :<pre>amplify-react-application% npm start</pre>Cela lance l'application React sur votre machine locale. | Développeur d’applications | 

### Configuration de la CLI Amplify
<a name="configure-the-amplify-cli"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Configurez Amplify pour vous connecter à votre compte AWS. | Configurez Amplify en exécutant la commande :<pre>amplify-react-application % amplify configure</pre>La CLI Amplify vous demande de suivre ces étapes pour configurer l'accès à votre compte AWS :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)Ce scénario nécessite que les utilisateurs IAM disposent d'un accès programmatique et d'informations d'identification à long terme, ce qui présente un risque de sécurité. Pour atténuer ce risque, nous vous recommandons de ne fournir à ces utilisateurs que les autorisations dont ils ont besoin pour effectuer la tâche et de supprimer ces autorisations lorsqu’elles ne sont plus nécessaires. Les clés d’accès peuvent être mises à jour si nécessaire. Pour plus d'informations, consultez la section [Mise à jour des clés d'accès](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey) dans le *guide de l'utilisateur IAM*.Ces étapes apparaissent dans le terminal comme suit.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>Pour plus d'informations sur ces étapes, consultez la [documentation](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) du centre de développement Amplify. | AWS général, développeur d'applications | 

### Initialiser Amplify
<a name="initialize-amplify"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Initialisez Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Développeur d'applications, AWS général | 

### Ajouter l'authentification au frontend
<a name="add-authentication-to-the-frontend"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Ajout de l'authentification. | Vous pouvez utiliser la `amplify add <category>` commande pour ajouter des fonctionnalités telles qu'un identifiant utilisateur ou une API principale. Au cours de cette étape, vous allez utiliser la commande pour ajouter l'authentification.Amplify fournit un service d'authentification principal avec Amazon Cognito, des bibliothèques frontales et un composant d'interface utilisateur d'authentification intégré. Les fonctionnalités incluent l'inscription des utilisateurs, la connexion des utilisateurs, l'authentification multifactorielle, la déconnexion des utilisateurs et la connexion sans mot de passe. Vous pouvez également authentifier les utilisateurs en intégrant des fournisseurs d'identité fédérés tels qu'Amazon, Google et Facebook. La catégorie d'authentification Amplify s'intègre parfaitement aux autres catégories Amplify telles que les API, les analyses et le stockage, afin que vous puissiez définir des règles d'autorisation pour les utilisateurs authentifiés et non authentifiés.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Développeur d'applications, AWS général | 

### Modifiez le fichier App.js
<a name="change-the-app-js-file"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Modifiez le fichier App.js. | Dans le `src` dossier, ouvrez le `App.js` fichier et modifiez-le. Le fichier modifié doit ressembler à ceci :<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | Développeur d’applications | 
| Importez des packages React. | Le `App.js` fichier importe deux packages React. Installez ces packages à l'aide de la commande :<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | Développeur d’applications | 

### Lancez l'application React et vérifiez l'authentification
<a name="launch-the-react-app-and-check-authentication"></a>


| Sous-tâche | Description | Compétences requises | 
| --- | --- | --- | 
| Lancez l'application. | Lancez l'application React sur votre machine locale :<pre>amplify-react-application1 % npm start</pre> | Développeur d'applications, AWS général | 
| Vérifiez l'authentification. | Vérifiez si l'application demande des paramètres d'authentification. (Dans notre exemple, nous avons configuré le courrier électronique comme méthode de connexion.)L'interface utilisateur du frontend doit vous demander vos informations de connexion et vous proposer la possibilité de créer un compte.Vous pouvez également configurer le processus de génération d'Amplify pour ajouter le backend dans le cadre d'un flux de travail de déploiement continu. Cependant, ce modèle ne couvre pas cette option. | Développeur d'applications, AWS général | 

## Ressources connexes
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [Mise en route](https://docs.npmjs.com/getting-started) (documentation npm)
+ [Création d'un compte AWS autonome](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) (documentation sur la gestion des comptes AWS) 
+ [Documentation AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Documentation Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)