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
<a name="authenticate-react-app-users-cognito-amplify-ui"></a>

*Daniel Kozhemyako, Amazon Web Services*

## Ringkasan
<a name="authenticate-react-app-users-cognito-amplify-ui-summary"></a>

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](https://ui.docs.amplify.aws/react/getting-started/introduction), perpustakaan sumber terbuka yang memperluas kemampuan pengembangan AWS Amplify antarmuka pengguna (UI). Komponen [Authenticator UI](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced) 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
<a name="authenticate-react-app-users-cognito-amplify-ui-prereqs"></a>

**Prasyarat**
+ Aktif Akun AWS
+ React 18.2.0 atau aplikasi web yang lebih baru
+ [Node.js dan npm 6.14.4 atau yang lebih baru, diinstal](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

**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
<a name="authenticate-react-app-users-cognito-amplify-ui-architecture"></a>

**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.](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/images/pattern-img/b2cea053-6931-4404-8aa8-c623ce2024ac/images/b7f69f20-a39d-4a78-8605-7dab73c59052.png)


## Alat
<a name="authenticate-react-app-users-cognito-amplify-ui-tools"></a>

**Layanan AWS**
+ [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) menyediakan otentikasi, otorisasi, dan manajemen pengguna untuk aplikasi web dan seluler.

**Alat-alat lainnya**
+ [Amplify UI](https://ui.docs.amplify.aws/react/getting-started/introduction) adalah pustaka UI open-source yang menyediakan komponen yang dapat disesuaikan yang dapat Anda sambungkan ke cloud.
+ [Node.js](https://nodejs.org/en/docs/) adalah lingkungan JavaScript runtime berbasis peristiwa yang dirancang untuk membangun aplikasi jaringan yang dapat diskalakan.
+ [npm](https://docs.npmjs.com/about-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
<a name="authenticate-react-app-users-cognito-amplify-ui-best-practices"></a>

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

## Epik
<a name="authenticate-react-app-users-cognito-amplify-ui-epics"></a>

### Buat kumpulan pengguna Amazon Cognito
<a name="create-an-cog-user-pool"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Membuat pengguna. | [Buat kumpulan pengguna Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html). Konfigurasikan opsi masuk dan persyaratan keamanan kumpulan pengguna agar sesuai dengan kasus penggunaan Anda. | Pengembang aplikasi | 
| Tambahkan klien aplikasi. | [Konfigurasikan klien aplikasi kumpulan pengguna](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html). Klien ini diperlukan agar aplikasi Anda berinteraksi dengan kumpulan pengguna Amazon Cognito. | Pengembang aplikasi | 

### Integrasikan kumpulan pengguna Amazon Cognito Anda dengan komponen UI Authenticator
<a name="integrate-your-cog-user-pool-with-the-authenticator-ui-component"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Instal dependensi. | Untuk menginstal `aws-amplify` dan `@aws-amplify/ui-react` paket, jalankan perintah berikut dari direktori root aplikasi Anda:<pre>npm i @aws-amplify/ui-react aws-amplify</pre> | Pengembang aplikasi | 
| Konfigurasikan kumpulan pengguna. | Berdasarkan contoh berikut, buat `aws-exports.js` file dan simpan di `src` folder. File harus menyertakan informasi berikut:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)<pre>// replace the user pool region, id, and app client id details<br />const awsmobile = {<br />    "aws_project_region": "put_your_region_here",<br />    "aws_cognito_region": "put_your_region_here",<br />    "aws_user_pools_id": "put_your_user_pool_id_here",<br />    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"<br />}<br /><br />export default awsmobile;</pre> | Pengembang aplikasi | 
| Impor dan konfigurasikan layanan Amplify. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | Pengembang aplikasi | 
| Tambahkan komponen Authenticator UI. | Untuk menampilkan komponen `Authenticator` UI, tambahkan baris kode berikut ke file titik masuk aplikasi (`App.js`):<pre>import { Authenticator } from '@aws-amplify/ui-react';<br />import '@aws-amplify/ui-react/styles.css';</pre>Contoh cuplikan kode mengimpor komponen `Authenticator` UI dan file styles.css Amplify UI, yang diperlukan saat menggunakan tema bawaan komponen.<br />Komponen `Authenticator` UI menyediakan dua nilai kembali:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)<br />Lihat contoh komponen berikut:<pre>function App() {<br />    return (<br />        <Authenticator><br />            {({ signOut, user }) => (<br />                <div><br />                    <p>Welcome {user.username}</p><br />                    <button onClick={signOut}>Sign out</button><br />                </div><br />            )}<br />        </Authenticator><br />    );<br />}</pre>Untuk `App.js` file contoh, lihat bagian [Informasi tambahan](#authenticate-react-app-users-cognito-amplify-ui-additional) 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.<br />Lihat contoh header permintaan berikut yang menyertakan JWT:<pre>import { fetchAuthSession } from 'aws-amplify/auth';<br />(await fetchAuthSession()).tokens?.idToken?.toString();</pre> | Pengembang aplikasi | 

## Pemecahan masalah
<a name="authenticate-react-app-users-cognito-amplify-ui-troubleshooting"></a>


| Isu | Solusi | 
| --- | --- | 
| 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:[See the AWS documentation website for more details](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | 
| Komponen autentikasi berhenti bekerja setelah memutakhirkan dari v5 ke v6. | `Auth`Kategori 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](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) di dokumentasi Amplify. | 

## Sumber daya terkait
<a name="authenticate-react-app-users-cognito-amplify-ui-resources"></a>
+ [Memulai dengan Amazon Cognito (situs web](https://aws.amazon.com/cognito/getting-started/))AWS 
+ [Buat aplikasi React baru](https://reactjs.org/docs/create-a-new-react-app.html) (dokumentasi React)
+ [Apa itu Amazon Cognito?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Dokumentasi Amazon Cognito)
+ [Amplify pustaka UI](https://ui.docs.amplify.aws/) (Amplify dokumentasi)

## Informasi tambahan
<a name="authenticate-react-app-users-cognito-amplify-ui-additional"></a>

`App.js`File 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;
```