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
Créée par Rishi Singla (AWS)
Environnement : PoC ou pilote | Technologies : applications Web et mobiles ; sécurité, identité, conformité | Charge de travail : toutes les autres charges de travail |
Services AWS : AWS Amplify ; Amazon Cognito |
Récapitulatif
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
Prérequis
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
Pile technologique cible
AWS Amplify
Amazon Cognito
Épopées
| 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 : npm install -g @aws-amplify/cli
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 : npm install -g npm@9.8.0
où 9.8.0 fait référence à la version que vous souhaitez installer. | Développeur d'applications |
| Tâche | Description | Compétences requises |
|---|
Créez une application React. | Pour créer une nouvelle application React, utilisez la commande : npx create-react-app amplify-react-application
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 : Success! Created amplify-react-application
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 : amplify-react-application% npm start
Cela lance l'application React sur votre machine locale. | Développeur d'applications |
| Tâche | Description | Compétences requises |
|---|
Configurez Amplify pour vous connecter à votre compte AWS. | Configurez Amplify en exécutant la commande : amplify-react-application % amplify configure
La CLI Amplify vous demande de suivre ces étapes pour configurer l'accès à votre compte AWS : Connectez-vous à votre compte d'administrateur AWS. Spécifiez la région AWS que vous souhaitez utiliser. Créez un utilisateur AWS Identity and Access Management (IAM) doté d'un accès programmatique et associez la politique d'AdministratorAccess-Amplifyautorisation à l'utilisateur. Créez puis copiez l'ID de clé d'accès et la clé d'accès secrète. Entrez ces informations dans le terminal. Créez un nom de profil ou utilisez le profil par défaut.
Avertissement : 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 utilisateurs lorsqu'ils 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 dans le guide de l'utilisateur IAM. Ces étapes apparaissent dans le terminal comme suit. Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: new
Successfully set up the new user.
Pour plus d'informations sur ces étapes, consultez la documentation du centre de développement Amplify. | AWS général, développeur d'applications |
| Tâche | Description | Compétences requises |
|---|
Initialisez Amplify. | Pour initialiser Amplify dans le nouveau répertoire, exécutez : amplify init
Amplify vous demande le nom du projet et les paramètres de configuration Spécifiez tous les paramètres, puis appuyez sur Y pour initialiser le projet avec la configuration spécifiée. Project information
| Name: amplifyreactproject
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
Sélectionnez le profil que vous avez créé à l'étape précédente. Les ressources seront déployées dans l'devenvironnement du projet Amplify que vous avez créé. Pour confirmer que les ressources ont été créées, vous pouvez ouvrir la console AWS Amplify et consulter le CloudFormation modèle AWS utilisé pour créer les ressources ainsi que les détails. Deploying root stack amplifyreactproject [ ====================-------------------- ] 2/4
amplify-amplifyreactproject-d… AWS::CloudFormation::Stack CREATE_IN_PROGRESS
UnauthRole AWS::IAM::Role CREATE_COMPLETE
DeploymentBucket AWS::S3::Bucket CREATE_IN_PROGRESS
AuthRole AWS::IAM::Role CREATE_COMPLETE
| Développeur d'applications, AWS général |
| 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. Pour configurer l'authentification pour votre application React, exécutez la commande : amplify-react-application1 % amplify add auth
Cela affiche les informations et les instructions suivantes. Vous pouvez choisir la configuration appropriée en fonction de votre activité et de vos exigences en matière de sécurité. Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Default configuration
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.
Pour un exemple simple, choisissez la configuration par défaut, puis sélectionnez le mécanisme de connexion pour les utilisateurs (dans ce cas, e-mail) : How do you want users to be able to sign in?
Username
❯ Email
Phone Number
Email or Phone Number
I want to learn more.
Contournez les paramètres avancés pour terminer l'ajout de ressources d'authentification : Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
Yes, I want to make some additional changes.
Développez vos ressources de backend locales et provisionnez-les dans le cloud : amplify-react-application1 % amplify push
Cette commande apporte les modifications appropriées aux groupes d'utilisateurs Conbito de votre compte. Appuyez sur Y pour configurer la auth ressource en utilisant CloudFormation. Cela permet de configurer les ressources suivantes : UserPool AWS::Cognito::UserPool CREATE_COMPLETE
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE
UserPoolClientWeb AWS::Cognito::UserPoolClient CREATE_COMPLETE
UserPoolClientRole AWS::IAM::Role CREATE_COMPLETE
UserPoolClientLambda AWS::Lambda::Function CREATE_COMPLETE
UserPoolClientLambdaPolicy AWS::IAM::Policy CREATE_COMPLETE
UserPoolClientLogPolicy AWS::IAM::Policy CREATE_IN_PROGRESS
Vous pouvez également utiliser la console AWS Cognito pour consulter ces ressources (recherchez les groupes d'utilisateurs et les groupes d'identités Cognito). Cette étape met à jour le aws-exports.js fichier du src dossier de votre application React avec les configurations du groupe d'utilisateurs et du pool d'identités Cognito.
| Développeur d'applications, AWS général |
| 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 : { App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
return (
<div>
<h1>Thankyou for doing verification</h1>
<h2>My Content</h2>
<button onClick={signOut}>Sign out</button>
</div>
);
}
export default withAuthenticator(App);
| Développeur d'applications |
Importez des packages React. | Le App.js fichier importe deux packages React. Installez ces packages à l'aide de la commande : amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react
| Développeur d'applications |
| Tâche | Description | Compétences requises |
|---|
Lancez l'application. | Lancez l'application React sur votre machine locale : amplify-react-application1 % npm start
| 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
