Configurer un exemple d'application d'une seule page React

Dans ce didacticiel, vous allez créer une application React d'une seule page dans laquelle vous pourrez tester l'inscription, la confirmation et la connexion des utilisateurs. React est une bibliothèque JavaScript basée sur le Web et les applications mobiles, axée sur l'interface utilisateur (UI). Cet exemple d'application présente certaines fonctions de base des groupes d'utilisateurs Amazon Cognito. Si vous avez déjà de l'expérience dans le développement d'applications Web avec React, téléchargez l'exemple d'application sur GitHub.

La capture d'écran suivante montre la page d'authentification initiale de l'application que vous allez créer.

La procédure de création d'un groupe d'utilisateurs vous permet de configurer un groupe d'utilisateurs qui fonctionne avec l'exemple d'application. Vous pouvez ignorer cette étape si votre groupe d'utilisateurs répond aux exigences suivantes :

• Les utilisateurs peuvent se connecter avec leur adresse e-mail. Options de connexion au groupe d'utilisateurs de Cognito : e-mail.

• Les noms d'utilisateur ne distinguent pas les majuscules et minuscules. Exigences relatives au nom d'utilisateur : l'option Mettre le nom d'utilisateur en majuscules et minuscules n'est pas sélectionnée.

• L'authentification multifactorielle (MFA) n'est pas requise. MFAmise en application : Facultatif MFA.

• Votre groupe d'utilisateurs vérifie les attributs pour la confirmation du profil utilisateur par e-mail. Attributs à vérifier : envoyer un message électronique, vérifier l'adresse e-mail.

• L'adresse e-mail est le seul attribut obligatoire. Attributs obligatoires : e-mail.

• Les utilisateurs peuvent s'inscrire eux-mêmes dans votre groupe d'utilisateurs. Auto-enregistrement : l'option Activer l'auto-enregistrement est sélectionnée.

• Le client d'application initial est un client public qui permet de se connecter avec un nom d'utilisateur et un mot de passe. Type d'application : client public, flux d'authentification :ALLOW_USER_PASSWORD_AUTH.

Créer un groupe d’utilisateurs

Création d'un nouveau groupe d'utilisateurs

1. Accédez à la console Amazon Cognito. Si vous y êtes invité, entrez vos AWS informations d'identification.

2. Cliquez sur le bouton Créer un groupe d'utilisateurs. Vous devrez peut-être sélectionner les groupes d'utilisateurs dans le volet de navigation de gauche pour afficher cette option.

3. Dans le coin supérieur droit de la page, choisissez Créer un groupe d'utilisateurs pour lancer l'assistant de création de groupe d'utilisateurs.

4. Dans Configurer l'expérience de connexion, vous pouvez choisir les fournisseurs d'identité (IdPs) que vous utiliserez avec ce groupe d'utilisateurs. Pour de plus amples informations, veuillez consulter Ajout de la connexion du groupe d'utilisateurs via un tiers.

   1. Sous Fournisseurs d'authentification, pour les types de fournisseurs, assurez-vous que seul le groupe d'utilisateurs Cognito est sélectionné.

   2. Pour les options de connexion au groupe d'utilisateurs de Cognito, sélectionnez Nom d'utilisateur. Ne sélectionnez aucune exigence supplémentaire en matière de nom d'utilisateur.

   3. Conservez toutes les autres options par défaut et choisissez Next.

5. Dans Configurer les exigences de sécurité, vous pouvez choisir votre politique de mot de passe, vos exigences en matière d'authentification MFA multifactorielle () et les options de restauration du compte utilisateur. Pour de plus amples informations, veuillez consulter Utiliser les fonctions de sécurité des groupes d’utilisateurs Amazon Cognito.

   1. Pour la politique de mot de passe, vérifiez que le mode de politique de mot de passe est défini sur les valeurs par défaut de Cognito.

   2. Sous Authentification multifactorielle, pour MFAl'appliquer, sélectionnez Facultatif MFA.

   3. Pour les MFAméthodes, choisissez Applications et SMS message d'authentification.

   4. Pour la restauration du compte utilisateur, vérifiez que l'option Activer la restauration du compte en libre-service est sélectionnée et que le mode de livraison des messages de récupération du compte utilisateur est défini sur E-mail uniquement.

   5. Conservez toutes les autres options par défaut et choisissez Next.

6. Dans Configurer l'expérience d'inscription, vous pouvez déterminer comment les nouveaux utilisateurs vérifieront leur identité lors de leur inscription en tant que nouvel utilisateur, et quels attributs doivent être obligatoires ou facultatifs lors du processus d'inscription des utilisateurs. Pour de plus amples informations, veuillez consulter Gestion des utilisateurs dans votre groupe d'utilisateurs.

   1. Vérifiez que l'option Activer l'enregistrement automatique est sélectionnée. Ce paramètre ouvre votre groupe d'utilisateurs afin que n'importe qui puisse s'inscrire sur Internet. Ceci est destiné aux besoins de l'exemple d'application, mais appliquez ce paramètre avec prudence dans les environnements de production.

   2. Sous Vérification et confirmation assistées par Cognito, vérifiez que la case Autoriser Cognito à envoyer automatiquement des messages pour vérifier et confirmer est cochée.

   3. Vérifiez que les attributs à vérifier sont définis sur Envoyer un message électronique, vérifier l'adresse e-mail.

   4. Sous Vérification des modifications d'attributs, vérifiez que les options par défaut sont sélectionnées : Conserver la valeur d'attribut d'origine lorsqu'une mise à jour est en attente est sélectionnée, et les valeurs d'attribut actives lorsqu'une mise à jour est en attente sont définies sur Adresse e-mail.

   5. Sous Attributs obligatoires, vérifiez que les attributs obligatoires basés sur les sélections précédentes affichent le courrier électronique.

      Important

      Pour cet exemple d'application, votre groupe d'utilisateurs ne doit pas définir phone_number comme attribut obligatoire. Si phone_number est affiché comme attribut obligatoire, passez en revue et mettez à jour vos choix précédents :

      • Facultatif MFA, e-mail uniquement pour le mode de livraison des messages de récupération du compte utilisateur

      • Envoyer un message électronique, vérifier l'adresse e-mail pour les attributs à vérifier

   6. Conservez toutes les autres options par défaut et choisissez Next.

7. Dans Configurer la livraison des messages, vous pouvez configurer l'intégration avec Amazon Simple Email Service et Amazon Simple Notification Service pour envoyer des e-mails et SMS des messages à vos utilisateurs pour l'inscription, la confirmation du compte et le rétablissement du compte. MFA Pour plus d’informations, consultez Paramètres d'e-mail pour les groupes d'utilisateurs Amazon Cognito et SMSparamètres des messages pour les groupes d'utilisateurs Amazon Cognito.

   1. Pour le fournisseur de messagerie, choisissez Envoyer un e-mail avec Cognito et utilisez l'expéditeur d'e-mail par défaut fourni par Amazon Cognito. Ce paramètre pour un faible volume d'e-mails est suffisant pour tester les applications. Vous pouvez revenir après avoir vérifié une adresse e-mail auprès d'Amazon Simple Email Service (AmazonSES) et choisi Envoyer un e-mail avec Amazon SES.

   2. Pour SMS, sélectionnez Créer un nouveau IAM rôle et entrez un nom de IAM rôle. Cela crée un rôle qui autorise Amazon Cognito à envoyer SMS des messages.

   3. Conservez toutes les autres options par défaut et choisissez Next.

8. Dans Intégrer votre application, vous pouvez nommer votre groupe d'utilisateurs, configurer l'interface utilisateur hébergée et créer un client d'application. Pour de plus amples informations, veuillez consulter Ajouter un client d'application avec l'interface utilisateur hébergée. Les exemples d'applications n'utilisent pas l'interface utilisateur hébergée.

   1. Sous Nom du groupe d'utilisateurs, entrez un nom de groupe d'utilisateurs.

   2. Ne sélectionnez pas Utiliser l'interface utilisateur hébergée par Cognito.

   3. Sous Client d'application initial, vérifiez que le type d'application est défini sur Client public.

   4. Sous Secret client, vérifiez que l'option Ne pas générer de secret client est sélectionnée.

   5. Saisissez un nom de client d’application.

   6. Développez les paramètres avancés du client de l'application. Ajoutez ALLOW_USER_PASSWORD_AUTH à la liste des flux d'authentification.

   7. Conservez toutes les autres options par défaut et choisissez Next.

9. Passez en revue vos choix dans l'écran Révision et création et modifiez les sélections selon vos besoins. Lorsque vous êtes satisfait de la configuration de votre groupe d'utilisateurs, choisissez Create user pool pour continuer.

10. Sur la page Groupes d'utilisateurs, choisissez votre nouveau groupe d'utilisateurs.

11. Sous Vue d'ensemble du groupe d'utilisateurs, notez l'ID de votre groupe d'utilisateurs. Vous fournirez cette chaîne lorsque vous créerez votre exemple d'application.

12. Choisissez l'onglet Intégration des applications et localisez la section Clients et analyses des applications. Sélectionnez votre nouveau client d'application. Notez votre numéro de client.

Ressources connexes

• Groupes d’utilisateurs Amazon Cognito

• Flux d'authentification de groupe d'utilisateurs

• Comprendre les jetons JSON Web du pool d'utilisateurs (JWTs)

Création d’une application

Pour créer cette application, vous devez configurer un environnement de développement. Les exigences relatives à l'environnement du développeur sont les suivantes :

1. Node.js est installé et mis à jour.

2. Le gestionnaire de packages de nœuds (npm) est installé et mis à jour vers au moins la version 10.2.3.

3. L'environnement est accessible sur le TCP port 5173 dans un navigateur Web.

Pour créer un exemple d'application Web React

1. Connectez-vous à votre environnement de développement et accédez au répertoire parent de votre application.

   cd ~/path/to/project/folder/

2. Créez un nouveau service React.

   npm create vite@latest frontend-client -- --template react-ts

3. Clonez le dossier du cognito-developer-guide-react-example projet à partir du référentiel d'exemples de AWS code sur GitHub.

   cd ~/some/other/path

   git clone https://github.com/awsdocs/aws-doc-sdk-examples.git

   cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

4. Accédez au src répertoire de votre projet.

   cd ~/path/to/project/folder/frontend-client/src

5. Modifiez config.json et remplacez les valeurs suivantes :

   1. Remplacez YOUR_AWS_REGION par un Région AWS code. olpPar exemple : us-east-1.

   2. YOUR_COGNITO_USER_POOL_IDRemplacez-le par l'ID du groupe d'utilisateurs que vous avez désigné pour le test. olpPar exemple : us-east-1_EXAMPLE. Le groupe d'utilisateurs doit être dans celui Région AWS que vous avez saisi à l'étape précédente.

   3. YOUR_COGNITO_APP_CLIENT_IDRemplacez-le par l'ID du client d'application que vous avez désigné pour le test. olpPar exemple : 1example23456789. Le client de l'application doit figurer dans le groupe d'utilisateurs de l'étape précédente.

6. Si vous souhaitez accéder à votre exemple d'application à partir d'une adresse IP autre quelocalhost, modifiez package.json et remplacez la ligne "dev": "vite", par"dev": "vite --host 0.0.0.0",.

7. Installez votre application.

   npm install

8. Lancez l'application.

   npm run dev

9. Accédez à l'application dans un navigateur Web à l'adresse http://localhost:5173 ouhttp://[IP address]:5173.

10. Inscrivez un nouvel utilisateur avec une adresse e-mail valide.

11. Récupérez le code de confirmation contenu dans votre e-mail. Entrez le code de confirmation dans l'application.

12. Connectez-vous à l'aide de votre nom d'utilisateur et de votre mot de passe.

Création d'un environnement de développement React avec Amazon Lightsail

Pour démarrer rapidement avec cette application, vous pouvez créer un serveur cloud virtuel avec Amazon Lightsail.

Avec Lightsail, vous pouvez créer rapidement une petite instance de serveur préconfigurée avec les prérequis pour cet exemple d'application. Vous pouvez accéder SSH à votre instance à l'aide d'un client basé sur un navigateur et vous connecter au serveur Web via une adresse IP publique ou privée.

Pour créer une instance Lightsail pour cet exemple d'application

1. Accédez à la console Lightsail. Si vous y êtes invité, entrez vos AWS informations d'identification.

2. Choisissez Créer une instance.

3. Pour Sélectionner une plate-forme, choisissez Linux/Unix.

4. Pour Sélectionner un plan, choisissez Node.js.

5. Sous Identifiez votre instance, attribuez un nom convivial à votre environnement de développement.

6. Choisissez Créer une instance.

7. Une fois que Lightsail a créé votre instance, sélectionnez-la puis, dans l'onglet Connect, sélectionnez Connect using. SSH

8. Une SSH session s'ouvre dans une fenêtre de navigateur. Exécutez node -v et npm -v pour confirmer que votre instance a été provisionnée avec Node.js et la version minimale de npm de 10.2.3.

9. Procédez à la configuration de votre application React.