Mengautentikasi pengguna aplikasi React yang ada dengan menggunakan Amazon Cognito dan AWS Amplify UI - AWS Prescriptive Guidance
RingkasanPrasyarat dan batasanArsitekturAlatPraktik terbaikEpikPemecahan MasalahSumber daya terkaitInformasi tambahan

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Mengautentikasi pengguna aplikasi React yang ada dengan menggunakan Amazon Cognito dan AWS Amplify UI

Daniel Kozhemyako, Amazon Web Services

Ringkasan

Pola ini menunjukkan cara menambahkan kemampuan otentikasi ke aplikasi React frontend yang ada dengan menggunakan pustaka AWS Amplify UI dan kumpulan pengguna Amazon Cognito.

Pola ini menggunakan Amazon Cognito untuk menyediakan otentikasi, otorisasi, dan manajemen pengguna untuk aplikasi. Ini juga menggunakan komponen dari Amplify UI, perpustakaan sumber terbuka yang memperluas kemampuan pengembangan AWS Amplify antarmuka pengguna (UI). Komponen Authenticator UI mengelola sesi login dan menjalankan alur kerja yang terhubung dengan cloud yang mengautentikasi pengguna melalui Amazon Cognito.

Setelah Anda menerapkan pola ini, pengguna dapat masuk dengan menggunakan salah satu kredensi berikut:

  • Nama pengguna dan kata sandi

  • Penyedia identitas sosial, seperti Apple, Facebook, Google, dan Amazon

  • Penyedia identitas perusahaan yang kompatibel dengan SAFL 2.0 atau kompatibel dengan OpenID Connect (OIDC)

catatan

Untuk membuat komponen UI otentikasi kustom, Anda dapat menjalankan komponen Authenticator UI dalam mode headless.

Prasyarat dan batasan

Prasyarat

Batasan

  • Pola ini hanya berlaku untuk aplikasi web React.

  • Pola ini menggunakan komponen Amplify UI bawaan. Solusinya tidak mencakup langkah-langkah yang diperlukan untuk mengimplementasikan komponen UI khusus.

Versi produk

  • Amplify UI 6.1.3 atau yang lebih baru (Gen 1)

  • Amplify 6.0.16 atau yang lebih baru (Gen 1)

Arsitektur

Arsitektur target

Diagram berikut menunjukkan arsitektur yang menggunakan Amazon Cognito untuk mengautentikasi pengguna untuk aplikasi web React.

Amazon Cognito mengautentikasi pengguna untuk aplikasi web React.

Alat

Layanan AWS

  • Amazon Cognito menyediakan otentikasi, otorisasi, dan manajemen pengguna untuk aplikasi web dan seluler.

Alat-alat lainnya

  • Amplify UI adalah pustaka UI open-source yang menyediakan komponen yang dapat disesuaikan yang dapat Anda sambungkan ke cloud.

  • Node.js adalah lingkungan JavaScript runtime berbasis peristiwa yang dirancang untuk membangun aplikasi jaringan yang dapat diskalakan.

  • npm adalah registri perangkat lunak yang berjalan di lingkungan Node.js dan digunakan untuk berbagi atau meminjam paket dan mengelola penyebaran paket pribadi.

Praktik terbaik

Jika Anda sedang membangun aplikasi baru, kami sarankan Anda menggunakan Amplify Gen 2.

Epik

TugasDeskripsiKeterampilan yang dibutuhkan

Membuat pengguna.

Buat kumpulan pengguna Amazon Cognito. Konfigurasikan opsi masuk dan persyaratan keamanan kumpulan pengguna agar sesuai dengan kasus penggunaan Anda.

Pengembang aplikasi

Tambahkan klien aplikasi.

Konfigurasikan klien aplikasi kumpulan pengguna. Klien ini diperlukan agar aplikasi Anda berinteraksi dengan kumpulan pengguna Amazon Cognito.

Pengembang aplikasi
TugasDeskripsiKeterampilan yang dibutuhkan

Instal dependensi.

Untuk menginstal aws-amplify dan @aws-amplify/ui-react paket, jalankan perintah berikut dari direktori root aplikasi Anda:

npm i @aws-amplify/ui-react aws-amplify
Pengembang aplikasi

Konfigurasikan kumpulan pengguna.

Berdasarkan contoh berikut, buat aws-exports.js file dan simpan di src folder. File harus menyertakan informasi berikut:

  • Wilayah AWS tempat kumpulan pengguna Amazon Cognito Anda berada

  • ID kumpulan pengguna Amazon Cognito

  • ID klien aplikasi

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;
Pengembang aplikasi

Impor dan konfigurasikan layanan Amplify.

  1. Dalam file titik masuk aplikasi (misalnya,App.js), impor dan muat aws-exports.js file dengan memasukkan baris kode berikut:

    import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

  2. Berdasarkan contoh berikut, konfigurasikan klien Amplify dengan menggunakan file: aws-exports.js

    // Configure Amplify in index file or root file
Amplify.configure({ ...awsExports });

    Untuk informasi selengkapnya, lihat Mengonfigurasi kategori Amplify di dokumentasi Amplify.

Pengembang aplikasi

Tambahkan komponen Authenticator UI.

Untuk menampilkan komponen Authenticator UI, tambahkan baris kode berikut ke file titik masuk aplikasi (App.js):

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
catatan

Contoh cuplikan kode mengimpor komponen Authenticator UI dan file styles.css Amplify UI, yang diperlukan saat menggunakan tema bawaan komponen.

Komponen Authenticator UI menyediakan dua nilai kembali:

  • Detail pengguna

  • Fungsi yang dapat dipanggil untuk mengeluarkan pengguna

Lihat contoh komponen berikut:

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}
catatan

Untuk App.js file contoh, lihat bagian Informasi tambahan dari pola ini.

Pengembang aplikasi

(Opsional) Ambil informasi sesi.

Setelah pengguna diautentikasi, Anda dapat mengambil data dari klien Amplify tentang sesi mereka. Misalnya, Anda dapat mengambil token web JSON (JWT) dari sesi pengguna sehingga Anda dapat mengautentikasi permintaan dari sesi mereka ke API backend.

Lihat contoh header permintaan berikut yang menyertakan JWT:

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();
Pengembang aplikasi

Pemecahan Masalah

IsuSolusi

Pengguna baru tidak dapat mendaftar untuk aplikasi.

Sebagai berikut, pastikan kumpulan pengguna Amazon Cognito Anda dikonfigurasi untuk memungkinkan pengguna mendaftar sendiri untuk berada di kumpulan pengguna:

  • Masuk ke Konsol Manajemen AWS, lalu buka konsol Amazon Cognito.

  • Di panel navigasi kiri, pilih Kumpulan pengguna.

  • Pilih kumpulan pengguna Anda dari daftar.

  • Di bawah Pengaturan Umum, pilih Kebijakan.

  • Pilih Izinkan pengguna untuk mendaftar sendiri.

Komponen autentikasi berhenti bekerja setelah memutakhirkan dari v5 ke v6.

AuthKategori telah pindah ke pendekatan fungsional dan menamai parameter di Amplify v6. Anda sekarang harus mengimpor fungsional APIs langsung dari aws-amplify/auth jalur. Untuk informasi selengkapnya, lihat Memigrasi dari v5 ke v6 di dokumentasi Amplify.

Sumber daya terkait

Informasi tambahan

App.jsFile harus berisi kode berikut:

import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;