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

# Buat aplikasi React dengan menggunakan AWS Amplify dan tambahkan autentikasi dengan Amazon Cognito
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Ringkasan
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

Pola ini menunjukkan cara menggunakan AWS Amplify untuk membuat aplikasi berbasis React dan cara menambahkan otentikasi ke frontend dengan menggunakan Amazon Cognito. AWS Amplify terdiri dari seperangkat alat (kerangka open source, lingkungan pengembangan visual, konsol) dan layanan (aplikasi web dan hosting situs web statis) untuk mempercepat pengembangan aplikasi seluler dan web di AWS. 

## Prasyarat dan batasan
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**Prasyarat**
+ Akun AWS yang aktif
+ [Node.js](https://nodejs.org/en/download/) dan [npm](https://www.npmjs.com/get-npm) diinstal pada mesin Anda

**Versi produk**
+ Node.js versi 10.x atau yang lebih baru (untuk memverifikasi versi Anda, jalankan `node -v` di jendela terminal)
+ npm versi 6.x atau yang lebih baru (untuk memverifikasi versi Anda, jalankan `npm -v` di jendela terminal)

## Arsitektur
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Tumpukan teknologi target**
+ AWS Amplify
+ Amazon Cognito

## Alat
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Amplify Antarmuka Baris Perintah (CLI)](https://docs.amplify.aws/cli/)
+ [Amplify Libraries](https://docs.amplify.aws/lib/q/platform/react-native/) (pustaka klien open source)
+ [Amplify Studio](https://docs.amplify.aws/console/) (antarmuka visual)

## Epik
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Instal AWS Amplify CLI
<a name="install-aws-amplify-cli"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Instal Amplify CLI. | Amplify CLI adalah toolchain terpadu untuk membuat layanan AWS Cloud untuk aplikasi React Anda. Untuk menginstal Amplify CLI, jalankan:<pre>npm install -g @aws-amplify/cli</pre>npm akan memberi tahu Anda jika versi utama baru tersedia. Jika demikian, gunakan perintah berikut untuk memutakhirkan versi npm Anda:<pre>npm install -g npm@9.8.0</pre>di mana 9.8.0 mengacu pada versi yang ingin Anda instal. | Pengembang aplikasi | 

### Buat aplikasi React
<a name="create-a-react-app"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Buat aplikasi React. | Untuk membuat aplikasi React baru, gunakan perintah:<pre>npx create-react-app amplify-react-application</pre>di `ampify-react-application` mana nama aplikasinya.Ketika aplikasi telah berhasil dibuat, Anda akan melihat pesan:<pre>Success! Created amplify-react-application</pre>Direktori dengan berbagai subfolder akan dibuat untuk aplikasi React. | Pengembang aplikasi | 
| Luncurkan aplikasi di mesin lokal Anda. | Buka direktori `amplify-react-application` yang dibuat pada langkah sebelumnya dan jalankan perintah:<pre>amplify-react-application% npm start</pre>Ini meluncurkan aplikasi React di mesin lokal Anda. | Pengembang aplikasi | 

### Konfigurasikan Amplify CLI
<a name="configure-the-amplify-cli"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Konfigurasikan Amplify untuk terhubung ke akun AWS Anda. | Konfigurasikan Amplify dengan menjalankan perintah:<pre>amplify-react-application % amplify configure</pre>Amplify CLI meminta Anda untuk mengikuti langkah-langkah ini untuk mengatur akses ke akun AWS Anda:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)Skenario ini mengharuskan pengguna IAM dengan akses terprogram dan kredensil jangka panjang, yang menghadirkan risiko keamanan. Untuk membantu mengurangi risiko ini, kami menyarankan agar Anda memberikan pengguna ini hanya izin yang mereka perlukan untuk melakukan tugas dan menghapus pengguna ini ketika mereka tidak lagi diperlukan. Kunci akses dapat diperbarui jika perlu. Untuk informasi selengkapnya, lihat [Memperbarui kunci akses](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey) di *Panduan Pengguna IAM*.Langkah-langkah ini muncul di terminal sebagai berikut.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>Untuk informasi selengkapnya tentang langkah-langkah ini, lihat [dokumentasi](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) di Amplify Dev Center. | AWS Umum, Pengembang aplikasi | 

### Inisialisasi Amplify
<a name="initialize-amplify"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Inisialisasi Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Pengembang aplikasi, AWS Umum | 

### Tambahkan otentikasi ke frontend
<a name="add-authentication-to-the-frontend"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| 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.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Pengembang aplikasi, AWS Umum | 

### Ubah file App.js
<a name="change-the-app-js-file"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Ubah file App.js. | Di `src` folder, buka dan revisi `App.js` file. File yang dimodifikasi akan terlihat seperti ini:<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | Pengembang aplikasi | 
| Impor paket React. | `App.js`File mengimpor dua paket React. Instal paket-paket ini dengan menggunakan perintah:<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | Pengembang aplikasi | 

### Luncurkan aplikasi React dan periksa otentikasi
<a name="launch-the-react-app-and-check-authentication"></a>


| Tugas | Deskripsi | Keterampilan yang dibutuhkan | 
| --- | --- | --- | 
| Luncurkan aplikasi. | Luncurkan aplikasi React di mesin lokal Anda:<pre>amplify-react-application1 % npm start</pre> | Pengembang aplikasi, AWS Umum | 
| 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. | Pengembang aplikasi, AWS Umum | 

## Sumber daya terkait
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [Memulai](https://docs.npmjs.com/getting-started) (dokumentasi npm)
+ [Buat akun AWS mandiri (dokumentasi AWS](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) Account Management) 
+ [Dokumentasi AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Dokumentasi Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)