Buat aplikasi React dengan menggunakan AWS Amplify dan tambahkan autentikasi dengan Amazon Cognito

Instal Amplify CLI.

Amplify CLI adalah toolchain terpadu untuk membuat layanan AWS Cloud untuk aplikasi React Anda. Untuk menginstal Amplify CLI, jalankan:

npm install -g @aws-amplify/cli

npm akan memberi tahu Anda jika versi utama baru tersedia. Jika demikian, gunakan perintah berikut untuk memutakhirkan versi npm Anda:

npm install -g npm@9.8.0

di mana 9.8.0 mengacu pada versi yang ingin Anda instal.

Buat aplikasi React.

Untuk membuat aplikasi React baru, gunakan perintah:

npx create-react-app amplify-react-application

di ampify-react-application mana nama aplikasinya.

Ketika aplikasi telah berhasil dibuat, Anda akan melihat pesan:

Success! Created amplify-react-application

Direktori dengan berbagai subfolder akan dibuat untuk aplikasi React.

Luncurkan aplikasi di mesin lokal Anda.

Buka direktori amplify-react-application yang dibuat pada langkah sebelumnya dan jalankan perintah:

amplify-react-application% npm start

Ini meluncurkan aplikasi React di mesin lokal Anda.

Konfigurasikan Amplify untuk terhubung ke akun AWS Anda.

Konfigurasikan Amplify dengan menjalankan perintah:

amplify-react-application % amplify configure

Amplify CLI meminta Anda untuk mengikuti langkah-langkah ini untuk mengatur akses ke akun AWS Anda:

Langkah-langkah ini muncul di terminal sebagai berikut.

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  new

Successfully set up the new user.

Untuk informasi selengkapnya tentang langkah-langkah ini, lihat dokumentasi di Amplify Dev Center.

Inisialisasi Amplify.

Menambahkan otentikasi.

Anda dapat menggunakan amplify add <category> perintah untuk menambahkan fitur seperti login pengguna atau API backend. Pada langkah ini Anda akan menggunakan perintah untuk menambahkan otentikasi.

Amplify menyediakan layanan otentikasi backend dengan Amazon Cognito, pustaka frontend, dan komponen UI Authenticator drop-in. Fitur termasuk pendaftaran pengguna, masuk pengguna, otentikasi multi-faktor, masuk pengguna, dan masuk tanpa kata sandi. Anda juga dapat mengautentikasi pengguna dengan mengintegrasikan dengan penyedia identitas federasi seperti Amazon, Google, dan Facebook. Kategori otentikasi Amplify terintegrasi secara mulus dengan kategori Amplify lainnya seperti API, analitik, dan penyimpanan, sehingga Anda dapat menentukan aturan otorisasi untuk pengguna yang diautentikasi dan tidak diautentikasi.

Ubah file App.js.

Di src folder, buka dan revisi App.js file. File yang dimodifikasi akan terlihat seperti ini:

{  App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
  return (
      <div>
      <h1>Thankyou for doing verification</h1>
      <h2>My Content</h2>
       <button onClick={signOut}>Sign out</button>
    </div>
  );
}
export default withAuthenticator(App);

Impor paket React.

App.jsFile mengimpor dua paket React. Instal paket-paket ini dengan menggunakan perintah:

amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react

Luncurkan aplikasi.

Luncurkan aplikasi React di mesin lokal Anda:

amplify-react-application1 % npm start

Periksa otentikasi.

Periksa apakah aplikasi meminta parameter otentikasi. (Dalam contoh kami, kami telah mengonfigurasi email sebagai metode masuk.)

UI frontend harus meminta Anda untuk kredensi masuk dan memberikan opsi untuk membuat akun.

Anda juga dapat mengonfigurasi proses build Amplify untuk menambahkan backend sebagai bagian dari alur kerja penerapan berkelanjutan. Namun, pola ini tidak mencakup opsi itu.