1 00:00:02,170 --> 00:00:05,530 Sekarang seperti yang saya sebutkan, Firebase memiliki otentikasi bawaan, kami hanya 2 00:00:05,530 --> 00:00:11,350 perlu pergi ke area otentikasi di sana dan kemudian klik metode pengaturan masuk dan di sana pilih kata sandi 3 00:00:11,350 --> 00:00:16,500 dan email atau kata sandi email di sini. Aktifkan ini dan klik simpan dan dengan 4 00:00:16,600 --> 00:00:18,550 itu, kami telah mengaktifkannya. 5 00:00:18,550 --> 00:00:25,640 Sekarang kami dapat mengirim permintaan ke Firebase API untuk membuat pengguna atau untuk login. Sekarang untuk mengetahui ke mana harus mengirim permintaan, Anda 6 00:00:25,640 --> 00:00:27,140 dapat google untuk 7 00:00:27,140 --> 00:00:32,630 Firebase REST Auth API dan Anda akan menemukan dokumen resmi ini di mana Anda akan 8 00:00:32,630 --> 00:00:36,180 belajar cara membuat dan masuk pengguna dengan API mereka. 9 00:00:36,210 --> 00:00:40,820 Sekarang ada banyak titik akhir untuk hal-hal yang berbeda, di sini di aplikasi ini kita akan fokus mendaftar 10 00:00:40,820 --> 00:00:41,440 dan masuk. 11 00:00:41,540 --> 00:00:45,200 Jadi jika kita klik mendaftar dengan email dan kata sandi, kita belajar cara kerjanya. 12 00:00:45,290 --> 00:00:52,250 Kami perlu mengirim permintaan HTTP, permintaan posting dengan jenis konten ini ke URL ini, masukkan kunci API kami sendiri di sini yang akan 13 00:00:52,280 --> 00:00:58,890 saya tunjukkan dari mana Anda mendapatkannya dalam sedetik dan lampirkan badan ini ke permintaan, jadi e- kirimkan kata sandi dan kemudian ini 14 00:00:58,910 --> 00:01:05,180 mengembalikan bidang token aman yang pada dasarnya harus selalu benar. Sebagai tanggapan, kami akan mendapatkan kembali token, itu token 15 00:01:05,180 --> 00:01:10,820 yang saya sebutkan di slide, email yang kami gunakan, token penyegaran yang lebih maju, token ini 16 00:01:10,940 --> 00:01:13,790 di sini akan berakhir sebenarnya setelah jumlah detik 17 00:01:13,790 --> 00:01:19,430 ini yang juga kami dapatkan kembali . Dengan token penyegaran, kami dapat membuatnya kembali, memvalidasi 18 00:01:19,430 --> 00:01:22,350 ulang tanpa meminta pengguna untuk login lagi, kami tidak 19 00:01:22,910 --> 00:01:26,460 akan melakukannya di sini, Anda akan memiliki titik akhir terpisah yang 20 00:01:26,570 --> 00:01:31,100 Anda kirim token penyegaran untuk mendapatkan token ID baru, kami akan tetap sederhana di 21 00:01:31,100 --> 00:01:37,310 sini dan cukup gunakan token itu dan login pengguna lagi setelah waktu kedaluwarsa itu karena waktu kedaluwarsa itu juga 22 00:01:37,310 --> 00:01:39,080 sesuatu yang kita dapatkan sehingga 23 00:01:39,080 --> 00:01:43,880 kita tahu kapan token ini akan menjadi tidak valid dan tidak dapat digunakan lagi karena 24 00:01:43,880 --> 00:01:49,850 kita akan harus membersihkannya di aplikasi kami saat itu, agar kami tidak mencoba melampirkan token yang tidak valid ini 25 00:01:49,850 --> 00:01:56,600 ke permintaan di masa mendatang ke basis data dan localId kami, itu adalah userId dari pengguna yang dibuat Firebase di server-nya 26 00:01:56,600 --> 00:02:02,050 karena kami tidak harus melakukan semua manajemen pengguna itu, Firebase akan melakukan itu, kita tidak perlu menulis 27 00:02:02,060 --> 00:02:03,380 kode sisi server. 28 00:02:03,440 --> 00:02:07,610 Jadi yang perlu kita lakukan adalah mengirim permintaan HTTP dan karena saya 29 00:02:07,610 --> 00:02:13,340 juga akan mengelola ini semua dengan Redux, saya akan membuat pembuat tindakan baru untuk ini dan saya akan 30 00:02:13,340 --> 00:02:14,500 beri nama auth. 31 00:02:14,510 --> 00:02:20,720 Saya juga sudah akan membuat peredam karena kami juga akan mengelola beberapa hal terkait auth di 32 00:02:20,720 --> 00:02:22,790 sana, misalnya token dan userId. 33 00:02:23,090 --> 00:02:25,980 Mari kita mulai dengan tindakan dan 34 00:02:26,510 --> 00:02:31,810 karenanya ekspor pembuat tindakan di sini yang dapat dinamai mendaftar, masuk akal untuk 35 00:02:31,940 --> 00:02:37,070 memulai dengan itu karena masuk pengguna hanya akan mungkin setelah kami membuat 36 00:02:37,070 --> 00:02:40,130 setidaknya satu pengguna. Jadi di sini 37 00:02:40,130 --> 00:02:44,590 dalam mendaftar, saya ingin dapat membuat pengguna baru dan untuk itu, kita 38 00:02:44,600 --> 00:02:50,420 akan memerlukan email dan kata sandi sehingga harus diteruskan ke pembuat tindakan pendaftaran dari luar. 39 00:02:50,690 --> 00:02:56,750 Nah, ini akan mengirim permintaan HTTP dan untuk dapat melakukan itu, kami akan menggunakan paket Redux 40 00:02:56,750 --> 00:03:01,180 Thunk lagi dan karenanya mengembalikan pengiriman async di sini, jadi 41 00:03:01,460 --> 00:03:07,970 kami mengembalikan fungsi yang dapat menggunakan async menunggu yang mendapatkan pengiriman itu berfungsi sebagai argumen yang disahkan 42 00:03:08,000 --> 00:03:14,150 oleh middleware Redux Thunk yang kami mulai gunakan dalam modul HTTP terakhir dari kursus ini dan 43 00:03:14,150 --> 00:03:20,480 ini memungkinkan kami untuk menjalankan kode async sebelum kami mengirim tindakan yang benar-benar mencapai toko kami. 44 00:03:20,620 --> 00:03:25,940 Sekarang untuk itu, kita juga akan memerlukan pengidentifikasi tindakan untuk tindakan yang kemudian ingin kita tangani 45 00:03:25,940 --> 00:03:31,590 di toko kita dan di sana saya hanya akan menggunakan mendaftar, yang juga telah mendaftar sebagai pengidentifikasi string. 46 00:03:31,850 --> 00:03:39,290 Jadi di sini pada akhirnya, kami kemudian akan mengirimkan objek tindakan ini di mana jenisnya mendaftar dan di mana kami 47 00:03:39,290 --> 00:03:45,940 mungkin kemudian juga akan menambahkan beberapa data tambahan tetapi sebelum kita melakukannya, kita perlu mengirim permintaan HTTP. 48 00:03:46,020 --> 00:03:51,170 Sekarang hal itu dapat dilakukan dengan mengambil API seperti yang Anda pelajari di modul terakhir dan karena itu 49 00:03:51,170 --> 00:03:52,360 harus melalui modul itu 50 00:03:52,370 --> 00:04:01,130 terlebih dahulu dan ini adalah URL yang perlu kami kirimi permintaan, sehingga kami dapat menyalinnya. Tambahkan di sini dan sekarang kita memiliki 51 00:04:01,130 --> 00:04:03,700 kunci API itu. 52 00:04:04,220 --> 00:04:07,240 Nah, itu sesuatu yang bisa kita dapatkan dari Firebase dengan mengklik ikon roda 53 00:04:07,250 --> 00:04:09,700 gigi di sini, pengaturan proyek. Di sana 54 00:04:09,760 --> 00:04:13,450 Anda akan menemukan kunci API web dan itulah 55 00:04:13,460 --> 00:04:19,680 yang Anda butuhkan, salin dan ganti kunci API termasuk tanda kurung dengan kunci itu. 56 00:04:19,700 --> 00:04:25,970 Ini adalah URL yang harus kami kirimi permintaan. Sekarang seperti yang diberitahukan oleh dokumen resmi 57 00:04:25,970 --> 00:04:26,870 kepada kami, 58 00:04:26,990 --> 00:04:30,950 kami perlu mengirim permintaan posting, jadi seperti yang telah Anda pelajari, 59 00:04:30,950 --> 00:04:36,680 kami perlu menambahkan argumen kedua ini untuk mengambil objek mana yang memungkinkan kami mengonfigurasi permintaan 60 00:04:37,280 --> 00:04:44,180 itu dan di sana, kami dapat mengatur metode untuk memposting dan juga menambahkan beberapa tajuk karena kita perlu menambahkan 61 00:04:44,180 --> 00:04:52,130 tajuk JSON aplikasi, jadi tajuk jenis konten yang seharusnya memiliki nilai JSON aplikasi dan kita harus menambahkan tubuh dan tubuh itu harus 62 00:04:52,130 --> 00:04:58,700 dalam format JSON yang bisa kita dapatkan dengan JSON. merangkai dan data yang ingin saya rangkai harus menjadi 63 00:04:58,700 --> 00:05:07,660 objek dengan tiga kunci ini - email, kata sandi dan kembalikan token aman. Jadi di sini tentu saja, email merujuk ke email yang kita 64 00:05:07,660 --> 00:05:14,890 peroleh sebagai argumen di sini, sama dengan kata sandi yang merujuk pada argumen kata sandi yang kita dapatkan dan 65 00:05:14,890 --> 00:05:22,060 kemudian ini yang ketiga dan saya akan menyalinnya untuk tidak salah ketik, kembalikan argumen token aman di sini 66 00:05:22,060 --> 00:05:29,770 atau pasangan nilai kunci di mana nilainya seharusnya benar. Permintaan ini harus membuat 67 00:05:29,770 --> 00:05:31,770 pengguna baru. 68 00:05:31,900 --> 00:05:38,530 Sekarang kita bisa menunggu jawabannya dengan kata kunci yang menunggu dan kemudian seperti yang Anda pelajari sebelumnya, 69 00:05:38,620 --> 00:05:46,660 kita dapat memeriksa apakah jawabannya tidak apa-apa, jika itu masalahnya, saya ingin melempar kesalahan baru di mana saya mengatakan ada 70 00:05:46,930 --> 00:05:55,340 yang tidak beres dan kami akan lihat penanganan kesalahan yang lebih terperinci nanti, untuk saat ini dan jika tidak apa-apa, saya ingin 71 00:05:55,380 --> 00:06:02,970 mendapatkan data respons saya dengan menunggu respons JSON yang akan membongkar badan respons dan secara otomatis mengubahnya dari format 72 00:06:02,970 --> 00:06:09,780 JSON ke Javascript, jadi ke objek atau array Javascript dan sekarang kita akan dapat bekerja dengan itu 73 00:06:10,500 --> 00:06:16,200 dan untuk saat ini, saya hanya akan mencatat data respons ini di sini. 74 00:06:17,910 --> 00:06:23,590 Sekarang kami belum menambahkan sisa toko Redux terkait auth kami, kami akan melakukannya nanti tetapi kami memiliki sesuatu 75 00:06:23,590 --> 00:06:28,840 yang harus bekerja, kami harus dapat mengirimkan ini dan karena itu mengirim permintaan pendaftaran seperti itu. 76 00:06:28,840 --> 00:06:36,460 Jadi sekarang kita dapat kembali ke layar auth dan pada akhirnya ketika kita mengklik tombol login ini yang tidak benar berlabel 77 00:06:36,460 --> 00:06:41,770 login pada saat kita benar-benar mendaftar tetapi mari kita biarkan seperti ini untuk saat ini, 78 00:06:41,770 --> 00:06:42,420 jadi 79 00:06:42,460 --> 00:06:50,330 ketika kita klik ini tombol Saya ingin mengirim permintaan pendaftaran ini. Jadi untuk itu, kita perlu, seperti sebelumnya, mengimpor 80 00:06:50,390 --> 00:06:55,810 pengiriman menggunakan dari React Redux sehingga kita dapat mengirim tindakan dan 81 00:06:56,150 --> 00:07:05,810 tentu saja, mengimpor semuanya sebagai tindakan auth dari data folder toko, dari folder tindakan dan di sana dari file auth 82 00:07:05,810 --> 00:07:09,590 dan dengan yang menambahkan, kita dapat menambahkan fungsi 83 00:07:09,840 --> 00:07:13,170 di sini, baik fungsi inline atau seperti 84 00:07:13,190 --> 00:07:17,880 ini, fungsi bernama disimpan dalam konstanta yang saya akan beri 85 00:07:18,410 --> 00:07:20,850 nama penangan pendaftaran, di sana 86 00:07:20,990 --> 00:07:23,240 saya tidak mengharapkan 87 00:07:23,250 --> 00:07:27,780 argumen dan di sana saya kemudian ingin mengirim, jadi 88 00:07:27,780 --> 00:07:33,590 kita perlu untuk mendapatkan akses ke fungsi pengiriman dengan mengeksekusi use dispatch 89 00:07:33,650 --> 00:07:36,090 dan kemudian di sini 90 00:07:36,210 --> 00:07:41,410 kita dapat mengirim tindakan autent ini mendaftar acara atau mendaftar tindakan. 91 00:07:41,430 --> 00:07:44,430 Sekarang masalahnya adalah ini membutuhkan email dan kata sandi dan saat 92 00:07:44,430 --> 00:07:46,020 ini saya tidak menyimpan ini. 93 00:07:46,020 --> 00:07:51,500 Saya mendapatkan ini di input saya tetapi di sini pada perubahan input, saya tidak menyimpan data yang tentu saja saya harus. 94 00:07:51,570 --> 00:07:56,320 Sekarang kita dapat melihat formulir kami yang lain di sini untuk melihat bagaimana kami melakukannya. 95 00:07:56,370 --> 00:08:06,760 Jadi di layar edit produk, kami tentu saja memiliki peredam formulir kami di sini yang mengelola seluruh validitas dan nilai 96 00:08:06,910 --> 00:08:08,670 terkait formulir kami. 97 00:08:08,800 --> 00:08:15,790 Jadi pada akhirnya, kita dapat menyalinnya dan menambahkannya ke layar auth di luar komponen layar auth seperti 98 00:08:16,990 --> 00:08:24,140 ini dan kembali ke layar edit produk untuk kemudian juga mengambil bagian di sana di mana kita 99 00:08:24,140 --> 00:08:25,400 menginisialisasi dengan 100 00:08:25,430 --> 00:08:28,970 menggunakan peredam, jadi salin semua ini dan menambahkannya ke 101 00:08:28,970 --> 00:08:38,730 layar auth juga, sekarang di dalam komponen, mungkin di sini dan untuk itu untuk bekerja, kita juga perlu mengimpor peredam menggunakan dari Bereaksi dan 102 00:08:38,730 --> 00:08:40,350 dengan yang diimpor, sekarang 103 00:08:40,480 --> 00:08:46,140 kita hanya perlu sedikit tweak sedikit. Peredam bentuk ini baik-baik saja dan omong-omong Anda bisa 104 00:08:46,150 --> 00:08:51,160 mengalihdayakan ini ke file terpisah karena kami menggunakan jenis peredam yang sama di layar auth dan 105 00:08:51,400 --> 00:08:53,860 layar produk edit, Anda bahkan dapat membuat kait 106 00:08:53,860 --> 00:08:57,160 kustom jika Anda tahu caranya berfungsi, untuk saat ini saya 107 00:08:57,160 --> 00:08:59,180 hanya akan membiarkannya seperti ini. 108 00:08:59,230 --> 00:09:01,560 Satu hal yang saya butuhkan adalah pembaruan form 109 00:09:01,570 --> 00:09:04,620 input, biarkan saya ambil itu dari layar edit produk juga, konstanta 110 00:09:04,630 --> 00:09:05,810 ini di sini, 111 00:09:05,830 --> 00:09:08,020 mari kita pindahkan itu di layar auth juga. 112 00:09:08,980 --> 00:09:09,670 Jadi sekarang 113 00:09:09,670 --> 00:09:15,190 dengan itu, itu semua baik-baik saja tetapi di sana saya menyebutnya menggunakan peredam dan menginisialisasi ini semua, yang 114 00:09:15,190 --> 00:09:16,470 tentu saja terlihat berbeda. 115 00:09:16,630 --> 00:09:22,120 Kita harus memiliki email yang awalnya kosong dan kata sandi yang awalnya kosong dan untuk 116 00:09:22,120 --> 00:09:23,720 validitasnya sama, kita hanya 117 00:09:23,800 --> 00:09:28,690 punya email yang awalnya tidak valid dan kita punya kata sandi yang awalnya 118 00:09:28,690 --> 00:09:33,310 tidak valid dan karena itu bentuk keseluruhannya juga pada awalnya tidak valid. 119 00:09:34,570 --> 00:09:40,240 Sekarang status pengiriman harus dipicu setiap kali input kami berubah di sini, jadi di 120 00:09:43,290 --> 00:09:49,830 sini tentang perubahan input, tentu saja Anda tahu dan Anda dapat melihatnya di layar edit produk, kami 121 00:09:49,830 --> 00:09:55,230 mendapatkan tiga nilai - kami mendapatkan pengidentifikasi input, nilai input dan input validitas. 122 00:09:56,100 --> 00:10:03,630 Jadi pada akhirnya kita bisa menyalin ini di sini dari layar edit produk dan memindahkannya ke layar 123 00:10:03,630 --> 00:10:10,630 auth dan mengganti fungsi anonim ini dengan itu atau benar-benar menyimpannya dalam variabel baru di sini, 124 00:10:10,770 --> 00:10:18,620 input change handler yang sekarang memegang fungsi ini. Sekarang sama seperti pada layar edit produk, Anda harus 125 00:10:18,620 --> 00:10:24,620 mengambil ini dengan menggunakan panggilan balik untuk memastikan bahwa ini tidak rerender ketika seharusnya tidak. 126 00:10:24,620 --> 00:10:31,190 Jadi sebenarnya, kita harus mengambilnya di sini termasuk use callback call dan 127 00:10:31,250 --> 00:10:38,360 dependensi use callback, jadi ini sebenarnya yang harus digunakan di sana pada input handler perubahan. 128 00:10:38,460 --> 00:10:45,690 Sekarang pengendali perubahan input ini dapat diikat atau dapat diatur di sini ke alat perubah input masuk sehingga 129 00:10:45,720 --> 00:10:48,340 alat peraga ini menargetkan fungsi 130 00:10:48,840 --> 00:10:55,740 ini dan sekarang dengan itu, kami menyimpan nilai formulir kami atau nilai input kami dalam kondisi formulir 131 00:10:55,740 --> 00:10:59,370 kami yang kami tangani dengan gunakan peredam dan sebagainya. 132 00:10:59,380 --> 00:11:04,630 Jadi sekarang ini bentuk negara saya tertarik di sini di handler pendaftaran saya karena di sana untuk mendaftar, 133 00:11:04,630 --> 00:11:11,830 saya harus lulus dari nilai input negara. email dan bentuk nilai input negara. kata sandi, jadi dua nilai 134 00:11:11,840 --> 00:11:18,850 ini yang dikumpulkan dan sekarang penangan pendaftaran di sini, fungsi ini dapat diikat ke tombol ini di sana, 135 00:11:18,850 --> 00:11:24,320 ke tombol masuk di sini di onPress karena ini adalah fungsi yang ingin 136 00:11:24,560 --> 00:11:28,160 saya tunjuk untuk menjalankannya ketika kita tekan tombol ini. 137 00:11:28,410 --> 00:11:34,810 Mari kita lihat apakah itu berfungsi sebagaimana mestinya. Jika saya mulai memasukkan nilai di sini, 138 00:11:38,160 --> 00:11:42,750 saya memang mendapatkan kesalahan validasi saya tetapi entah bagaimana mereka tidak muncul, 139 00:11:44,040 --> 00:11:50,950 itu masalahnya karena itu bukan pesan kesalahan di sini tetapi teks kesalahan pada input di layar auth. 140 00:11:51,060 --> 00:11:54,920 Jadi jika kita mengubah pesan kesalahan itu menjadi teks kesalahan, sekarang jika kita menguji ini, 141 00:11:55,020 --> 00:11:58,460 jadi jika saya klik di sini, keluar dari sana, saya mendapatkan peringatan saya. 142 00:11:58,500 --> 00:12:00,960 Sekarang jika saya memasukkan alamat email yang valid, 143 00:12:00,960 --> 00:12:08,350 ini hilang, jika saya memasukkan kata sandi yang cukup panjang, itu hilang, jika saya sekarang klik login di sini, mari kita lihat apakah itu 144 00:12:08,350 --> 00:12:08,740 berfungsi. 145 00:12:08,740 --> 00:12:14,880 Mari kita pergi ke Firebase, ke otentikasi dan di sana, Anda sekarang harus melihat pengguna baru, ini 146 00:12:14,950 --> 00:12:17,360 adalah pengguna yang baru saja dibuat. 147 00:12:17,530 --> 00:12:19,810 Jadi mendaftar berfungsi, sekarang mari kita 148 00:12:19,810 --> 00:12:24,060 pastikan kita juga dapat beralih ke mode masuk dan membuatnya bekerja juga. 149 00:12:25,100 --> 00:12:28,970 Ngomong-ngomong, perhatikan juga bahwa ini adalah data yang kami dapatkan, jadi 150 00:12:29,030 --> 00:12:30,150 itulah responsnya, 151 00:12:30,150 --> 00:12:32,300 objek ini dengan email, berapa lama 152 00:12:32,300 --> 00:12:34,440 token itu valid dalam hitungan detik, 153 00:12:34,550 --> 00:12:40,220 lalu token itu sendiri yang merupakan string samar panjang ini, kemudian juga ID dari pengguna yang 154 00:12:40,220 --> 00:12:41,960 dibuat dan token penyegaran itu.