React AWS Cognito : Guide de configuration de l'authentification par e-mail (première partie)

Il s'agit de la première d'une série en deux parties dans laquelle nous allons créer une application React à l'aide d'AWS Cognito pour l'authentification des utilisateurs par courrier électronique. La première partie se concentre sur la configuration des configurations AWS nécessaires, tandis que la deuxième partie plongera dans le code React pour relier le tout.

Nous travaillerons avec les services AWS suivants :

• Service de messagerie simple Amazon (SES)
• AWS Cognito

Commençons par configurer nos ressources AWS.

Service de messagerie simple Amazon (SES)

Identité SES du domaine

À des fins de test, la vérification de la propriété du domaine dans SES est facultative, car AWS propose une solution de contournement. Cependant, pour la production, la vérification de la propriété est essentielle pour permettre à SES d'envoyer des e-mails au nom de votre domaine.

Voici le processus de configuration :

1. Accédez à Amazon Simple Email Service.
2. Sélectionnez Identités.
3. Cliquez sur Créer une identité.

Dans la configuration, j'ai choisi "Domaine" et utilisé l'exemple domain.com.

• Cliquez sur Créer une identité.

Ensuite, vous verrez une page similaire à celle-ci :

Accédez à la section Publier les enregistrements DNS et utilisez ces valeurs pour ajouter les enregistrements dans votre fournisseur de domaine.

Une fois les enregistrements DNS configurés chez votre fournisseur de domaine, vous devriez voir votre domaine vérifié, ressemblant à ceci :

Parfait, votre domaine est désormais vérifié, ce qui permet à SES d'envoyer des emails en votre nom. Cette vérification n'est pas requise pour les tests puisqu'AWS propose une méthode alternative, mais elle est essentielle pour la production.

Envoyer l'identité SES par courrier électronique

Lors des tests, cette étape est importante car l'adresse e-mail que vous utilisez dans votre flux d'authentification doit être ajoutée à la « liste verte » d'AWS. Ici, nous ajouterons et vérifierons une adresse e-mail.

Rendez-vous vers :

• Service de messagerie simple Amazon
• Identités
• Créer une identité

Cette fois, sélectionnez Adresse e-mail :

• Entrez l'adresse e-mail que vous souhaitez vérifier.
• Cliquez sur Créer une identité.

Une fois l'identité créée, vous recevrez un e-mail d'AWS contenant un lien de vérification. Assurez-vous de vérifier votre boîte de réception et cliquez sur ce lien pour vérifier votre e-mail.

Une fois que vous avez vérifié votre e-mail, vous devriez voir une étiquette indiquant qu'il est vérifié.

À ce stade, vous devriez faire vérifier votre domaine et votre adresse e-mail. Si la vérification du domaine est facultative lors des tests, elle devient nécessaire en production. En revanche, la vérification des e-mails est requise pour les tests mais pas pour la production.

Remarque : dans le cadre du flux d'authentification, un code de confirmation sera envoyé à ce compte de messagerie. Si le compte de messagerie n'est pas vérifié, il ne recevra pas le code.

Amazon Cognito

La dernière pièce à configurer est Cognito. Ce service permet l'authentification du compte, et dans ce cas, nous utiliserons l'e-mail pour l'authentification. Voici comment cela fonctionne :

• L'utilisateur crée un compte avec son email et son mot de passe.
• Ils vérifient leur email en saisissant le code envoyé par AWS.
• Une fois vérifié, l'utilisateur peut se connecter en utilisant son email et son mot de passe.

Au lieu de gérer vous-même l'authentification, vous pouvez tirer parti d'AWS Cognito.

Allons à :

Remarque : Pour la plupart des étapes, je m'en tiens aux options par défaut, je ne mentionnerai donc que les choix personnalisés que je fais. En fonction de votre projet, vous souhaiterez peut-être configurer différents paramètres.

• Cognito
• Créer un pool d'utilisateurs
• Étape 1 : Vérifiez E-mail

• Étape 2 : Sélectionnez Aucun MFA ; ce n'est pas nécessaire pour les tests.

• Étape 3 : J'ai gardé les options par défaut.

• Étape 4 : Choisissez votre « De l'adresse e-mail » vérifiée

Cognito enverra un e-mail avec un code de vérification, idéalement de votre domaine, c'est pourquoi le domaine doit être vérifié dans la section précédente. Ici, vous pouvez voir qu'AWS propose l'option "Envoyer un e-mail avec Cognito" qui convient au développement. Cependant, en production, vous devez vous assurer que votre domaine est vérifié pour un processus d'envoi d'e-mails plus professionnel et plus fiable.

• Étape 5 : En plus d'ajouter un nom de pool et de client, l'élément clé est de développer les « Paramètres avancés du client de l'application » et d'activer ALLOW_USER_PASSWORD_AUTH. Ce paramètre permet aux utilisateurs de s'authentifier à l'aide de leur e-mail et de leur mot de passe, ce qui est essentiel pour votre flux d'authentification.

• Étape 6 : Il s'agit de l'étape de révision, et il n'y a rien à modifier ici. Assurez-vous simplement que tout va bien avant de continuer.

Une fois créé, vous devriez le voir sur le tableau de bord comme ceci :

C'est ça ! Vous avez maintenant tout configuré sur AWS. Dans le prochain article, je montrerai comment connecter votre application React à Cognito pour authentifier un utilisateur à l'aide de sa messagerie. Surveillez l'article, qui sera publié lundi prochain.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!