React AWS Cognito: Einrichtungshandbuch für die E-Mail-Authentifizierung (zweiter Teil)

Im letzten Beitrag haben wir alles auf der AWS-Seite behandelt; Lassen Sie uns nun in React eintauchen, um unseren Code einzurichten.

AWS stellt das npm-Paket @aws-sdk/client-cognito-identity-provider bereit, das Funktionen für Folgendes enthält:

• Erstellen eines Kontos mit einer E-Mail-Adresse und einem Passwort
• Verifizierung der E-Mail über einen von AWS gesendeten Code
• Anmelden mit E-Mail und Passwort

Schauen Sie sich die Demoseite an, um es selbst auszuprobieren, und schauen Sie sich gerne den Code im GitHub-Repository an.

Melden Sie sich an

Der erste Schritt ist die Anmeldung

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;
  }
};

Beachten Sie, dass AWS_CLIENT_ID erforderlich ist und diese Hilfsfunktion E-Mail und Passwort entgegennimmt. In der Demo werden beide Werte vom Benutzer in ein Formular eingegeben und die Benutzeroberfläche ruft dann diese Methode auf und übergibt diese Werte.

Wenn ein Fehler auftritt, wird eine Ausnahme ausgelöst und die Benutzeroberfläche behandelt ihn entsprechend.

Bestätigung

Hinweis: Während des Tests muss jede im Formular verwendete E-Mail-Adresse zunächst überprüft werden. Dies wird in der Produktion nicht notwendig sein.

Wenn SignUpCommand ausgeführt wird, registriert AWS das Konto und sendet einen Bestätigungscode per E-Mail. Der nächste Schritt besteht also darin, den Posteingang zu überprüfen und den Code zu kopieren.

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;
  }
};

Beachten Sie, dass für „ConfirmSignUpCommand“ Ihre AWS-Client-ID, Ihr Benutzername (E-Mail) und der Bestätigungscode erforderlich sind, der an die E-Mail gesendet wurde.

Anmelden

Wenn „ConfirmSignUpCommand“ erfolgreich abgeschlossen wird, sollte das Konto für die Anmeldung bereit sein.

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;
};

Im InitiateAuthCommand benötigt AWS die Client-ID, den Benutzernamen (E-Mail) und das Passwort, die der Benutzer über das Formular angegeben hat. Wenn die E-Mail bereits verifiziert wurde, ist die Anmeldung erfolgreich.

Zusätzlich werden einige Werte in sessionStorage für eine mögliche zukünftige Verwendung gespeichert.

Abschluss

Schauen Sie sich die Demo an und erkunden Sie die Codebasis.

Cognito ist relativ einfach einzurichten und dennoch leistungsstark. Es erledigt wesentliche Aufgaben wie das Erstellen, Verifizieren und Authentifizieren von Konten. Der Aufbau eines eigenen Dienstes hierfür ist zwar möglich, erfordert jedoch einen erheblichen Aufwand für die ordnungsgemäße Implementierung und Wartung.

Wenn Sie ein Projekt starten, bieten Cloud-Dienste den Vorteil, dass Sie diese Verantwortlichkeiten auslagern, sodass Sie sich auf Ihre Kerngeschäftslogik konzentrieren können, auch wenn dadurch eine gewisse Abhängigkeit entsteht.

Das obige ist der detaillierte Inhalt vonReact AWS Cognito: Einrichtungshandbuch für die E-Mail-Authentifizierung (zweiter Teil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!