React AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Kedua)

Dalam siaran terakhir, kami mengendalikan segala-galanya di sisi AWS; sekarang mari kita selami React untuk menyediakan kod kita.

AWS menyediakan pakej npm @aws-sdk/client-cognito-identity-provider, yang merangkumi fungsi untuk:

• Membuat akaun menggunakan e-mel dan kata laluan
• Mengesahkan e-mel melalui kod yang dihantar oleh AWS
• Melog masuk dengan e-mel dan kata laluan

Lihat halaman tunjuk cara untuk mencuba sendiri, dan jangan ragu untuk melihat kod dalam repositori GitHub.

daftar

Langkah pertama ialah mendaftar

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

Perhatikan cara AWS_CLIENT_ID diperlukan dan fungsi pembantu ini menerima e-mel dan kata laluan. Dalam demo, kedua-dua nilai dimasukkan oleh pengguna dalam bentuk, dan UI kemudian memanggil kaedah ini, menghantar nilai tersebut.

Jika terdapat ralat, pengecualian akan dilemparkan dan UI mengendalikannya dengan sewajarnya.

Pengesahan

Nota: Semasa ujian, sebarang e-mel yang digunakan dalam borang mesti disahkan terlebih dahulu. Ini tidak diperlukan dalam pengeluaran.

Apabila SignUpCommand dijalankan, AWS mendaftarkan akaun dan menghantar kod pengesahan melalui e-mel, jadi langkah seterusnya ialah menyemak peti masuk dan menyalin kod.

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

Perhatikan bahawa ConfirmSignUpCommand memerlukan AWS ClientId anda, nama pengguna (e-mel) dan kod pengesahan yang dihantar ke e-mel.

Log Masuk

Jika ConfirmSignUpCommand berjaya dilengkapkan, akaun itu harus siap untuk log masuk.

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

Dalam InitiateAuthCommand, AWS memerlukan ClientId, nama pengguna (e-mel) dan kata laluan yang disediakan oleh pengguna melalui borang. Jika e-mel telah pun disahkan, log masuk akan berjaya.

Selain itu, beberapa nilai disimpan dalam sessionStorage untuk kegunaan masa hadapan yang berpotensi.

Kesimpulan

Lihat demo dan terokai asas kod.

Cognito agak mudah untuk disediakan tetapi berkuasa. Ia mengendalikan perkara penting seperti membuat, mengesahkan dan mengesahkan akaun. Walaupun membina perkhidmatan anda sendiri untuk ini adalah mungkin, ia memerlukan usaha yang besar untuk pelaksanaan dan penyelenggaraan yang betul.

Apabila memulakan projek, perkhidmatan awan menawarkan kelebihan memunggah tanggungjawab ini supaya anda boleh menumpukan pada logik perniagaan teras anda, walaupun ia memperkenalkan beberapa pergantungan.

Atas ialah kandungan terperinci React AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Kedua). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!