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

Dans le dernier post, nous avons tout géré côté AWS ; passons maintenant à React pour configurer notre code.

AWS fournit le package npm @aws-sdk/client-cognito-identity-provider, qui inclut des fonctions pour :

• Créer un compte à l'aide d'un email et d'un mot de passe
• Vérification de l'email via un code envoyé par AWS
• Connexion avec l'email et le mot de passe

Consultez la page de démonstration pour l'essayer vous-même et n'hésitez pas à consulter le code dans le référentiel GitHub.

S'inscrire

La première étape est de s'inscrire

import { SignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signUp = async (email: string, password: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: email,
    Password: password,
    UserAttributes: [
      {
        Name: "email",
        Value: email,
      },
    ],
  };

  const command = new SignUpCommand(params);

  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

Notez comment AWS_CLIENT_ID est requis et cette fonction d'assistance prend en compte l'e-mail et le mot de passe. Dans la démo, les deux valeurs sont saisies par l'utilisateur dans un formulaire, et l'interface utilisateur appelle ensuite cette méthode, en transmettant ces valeurs.

S'il y a une erreur, une exception est levée et l'interface utilisateur la gère en conséquence.

Confirmation

Remarque : Lors des tests, tout e-mail utilisé dans le formulaire doit d'abord être vérifié. Cela ne sera pas nécessaire en production.

Lorsque SignUpCommand s'exécute, AWS enregistre le compte et envoie un code de vérification par e-mail. L'étape suivante consiste donc à vérifier la boîte de réception et à copier le code.

import { ConfirmSignUpCommand } from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const confirmSignUp = async (username: string, code: string) => {
  const params = {
    ClientId: AWS_CLIENT_ID,
    Username: username,
    ConfirmationCode: code,
  };

  const command = new ConfirmSignUpCommand(params);
  try {
    await cognitoClient.send(command);
  } catch (error) {
    throw error;
  }
};

Notez que ConfirmSignUpCommand nécessite votre AWS ClientId, votre nom d'utilisateur (e-mail) et le code de confirmation qui a été envoyé à l'e-mail.

Se connecter

Si ConfirmSignUpCommand se termine avec succès, le compte doit être prêt à se connecter.

import {
  AuthFlowType,
  SignUpCommand,
} from "@aws-sdk/client-cognito-identity-provider";

const AWS_CLIENT_ID = "REPLACE_WITH_YOUR_AWS_CLIENT_ID";
const AWS_REGION = "REPLACE_WITH_YOUR_AWS_REGION";

const cognitoClient = new CognitoIdentityProviderClient({
  region: AWS_REGION,
});

export const signIn = async (username: string, password: string) => {
  const params = {
    AuthFlow: AuthFlowType.USER_PASSWORD_AUTH,
    ClientId: AWS_CLIENT_ID,
    AuthParameters: {
      USERNAME: username,
      PASSWORD: password,
    },
  };
  const command = new InitiateAuthCommand(params);

  let AuthenticationResult;
  try {
    const response = await cognitoClient.send(command);
    AuthenticationResult = response.AuthenticationResult;
  } catch (error) {
    throw error;
  }

  if (!AuthenticationResult) {
    return;
  }

  sessionStorage.setItem("idToken", AuthenticationResult.IdToken || "");
  sessionStorage.setItem("accessToken", AuthenticationResult.AccessToken || "");
  sessionStorage.setItem(
    "refreshToken",
    AuthenticationResult.RefreshToken || ""
  );

  return AuthenticationResult;
};

Dans InitiateAuthCommand, AWS requiert l'ID Client, le nom d'utilisateur (e-mail) et le mot de passe fournis par l'utilisateur via le formulaire. Si l'e-mail a déjà été vérifié, la connexion réussira.

De plus, certaines valeurs sont stockées dans sessionStorage pour une utilisation future potentielle.

Conclusion

Découvrez la démo et explorez la base de code.

Cognito est relativement simple à configurer mais puissant. Il gère les éléments essentiels tels que la création, la vérification et l'authentification des comptes. Bien que créer votre propre service pour cela soit possible, cela nécessite des efforts importants pour une mise en œuvre et une maintenance appropriées.

Lors du démarrage d'un projet, les services cloud offrent l'avantage de vous décharger de ces responsabilités afin que vous puissiez vous concentrer sur votre logique métier principale, même si cela introduit une certaine dépendance.

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!