1 00:00:01,160 --> 00:00:04,610 ‫-: Sekarang saatnya untuk menggunakan API login yang 2 00:00:04,610 --> 00:00:06,830 ‫kita buat di bagian 3 00:00:06,830 --> 00:00:09,100 ‫sebelumnya dan ada banyak hal yang 4 00:00:09,100 --> 00:00:12,880 ‫harus dilakukan di sini untuk membuat front-end berinteraksi dengan back-end. 5 00:00:12,880 --> 00:00:15,680 ‫Jadi kami melakukan ini dalam kuliah terpisah. 6 00:00:15,680 --> 00:00:17,833 ‫Bagaimanapun, mari kita mulai sekarang. 7 00:00:19,740 --> 00:00:21,570 ‫Dan beginilah cara kerjanya. 8 00:00:21,570 --> 00:00:25,180 ‫Jadi, kami akan mengizinkan pengguna untuk masuk ke situs 9 00:00:25,180 --> 00:00:28,990 ‫web kami dengan melakukan permintaan HTTP, atau panggilan ATEX karena 10 00:00:28,990 --> 00:00:31,580 ‫banyak orang suka menyebutnya juga. 11 00:00:31,580 --> 00:00:35,890 ‫Dan kami melakukan permintaan HTTP ke titik akhir API login yang 12 00:00:35,890 --> 00:00:38,340 ‫kami terapkan sebelum menggunakan data yang 13 00:00:38,340 --> 00:00:41,820 ‫diberikan pengguna dalam formulir yang kami miliki di sini. 14 00:00:41,820 --> 00:00:45,614 ‫Jadi, ingat bahwa API kami kemudian akan mengirim kembali 15 00:00:45,614 --> 00:00:49,010 ‫cookie yang secara otomatis disimpan di browser. 16 00:00:49,010 --> 00:00:51,650 ‫Dan juga secara otomatis akan dikirim 17 00:00:51,650 --> 00:00:53,990 ‫kembali dengan setiap permintaan berikutnya. 18 00:00:53,990 --> 00:00:56,950 ‫Dan seperti yang akan Anda lihat, ini 19 00:00:56,950 --> 00:01:00,040 ‫adalah kunci fundamental untuk membuat sistem otentikasi kami bekerja. 20 00:01:00,040 --> 00:01:01,940 ‫Tapi bagaimanapun, karena 21 00:01:01,940 --> 00:01:04,518 ‫kita melakukan permintaan HTTP ini di 22 00:01:04,518 --> 00:01:09,220 ‫browser, tentu saja, sekali lagi, kita akan bekerja di sisi klien. 23 00:01:09,220 --> 00:01:10,900 ‫Namun, karena kami 24 00:01:10,900 --> 00:01:13,570 ‫melakukan permintaan HTTP di browser, kami 25 00:01:13,570 --> 00:01:17,010 ‫masih akan mengerjakan kode skrip pekerjaan sisi klien. 26 00:01:17,010 --> 00:01:20,410 ‫Jadi seperti yang kita lakukan dengan implementasi Mapbox. 27 00:01:20,410 --> 00:01:21,570 ‫Baiklah? 28 00:01:21,570 --> 00:01:24,430 ‫Jadi sekarang mari kita lanjutkan dan buat file baru di sini. 29 00:01:24,430 --> 00:01:29,063 ‫Dan itu di publik, js, dan file baru, yang akan 30 00:01:30,190 --> 00:01:33,030 ‫saya sebut login. js dan di 31 00:01:33,960 --> 00:01:36,380 ‫video berikutnya, kita sebenarnya akan menggabungkan 32 00:01:36,380 --> 00:01:38,260 ‫semua file JavaScript terpisah 33 00:01:38,260 --> 00:01:40,630 ‫yang kita buat di sini untuk 34 00:01:40,630 --> 00:01:42,970 ‫front-end menjadi satu bundel besar. 35 00:01:42,970 --> 00:01:43,820 ‫Baiklah? 36 00:01:43,820 --> 00:01:47,240 ‫Namun untuk saat ini, mari kita fokus pada 37 00:01:47,240 --> 00:01:49,510 ‫membuat fungsi login ini berfungsi. 38 00:01:49,510 --> 00:01:52,820 ‫Tapi bagaimanapun, sekarang mari kita mulai dengan 39 00:01:52,820 --> 00:01:57,139 ‫menambahkan event listener, mendengarkan event submit pada form login kita, oke? 40 00:01:57,139 --> 00:02:01,260 ‫Jadi, formulir login kami memiliki kelas formulir ini di sini. 41 00:02:01,260 --> 00:02:04,307 ‫Oke, jadi sekarang mari kita pilih ini 42 00:02:04,307 --> 00:02:07,820 ‫untuk elemen dan kemudian di sana, dengarkan acara kirim. 43 00:02:07,820 --> 00:02:10,430 ‫Saya harap Anda terbiasa dengan logika semacam 44 00:02:10,430 --> 00:02:12,510 ‫ini di JavaScript sisi klien. 45 00:02:12,510 --> 00:02:14,810 ‫Dan semoga, ini bukan hal baru bagi Anda. 46 00:02:15,810 --> 00:02:19,193 ‫Jadi, dokumen. querySelector, yang kita 47 00:02:20,260 --> 00:02:23,063 ‫gunakan untuk memilih berdasarkan kelas. 48 00:02:24,940 --> 00:02:27,040 ‫Tambahkan nama Selector 49 00:02:27,040 --> 00:02:32,040 ‫itu, dan sekarang tambahkan EventListener, dengarkan acara kirim. 50 00:02:32,940 --> 00:02:35,740 ‫Jadi pada dasarnya, suatu peristiwa yang akan 51 00:02:35,740 --> 00:02:39,363 ‫dijalankan browser setiap kali pengguna mengklik tombol kirim pada formulir. 52 00:02:40,220 --> 00:02:41,810 ‫Tambahkan kemudian di 53 00:02:41,810 --> 00:02:46,123 ‫fungsi kumpulkan, kita akan memiliki akses ke acara itu sendiri, oke? 54 00:02:47,680 --> 00:02:49,500 ‫Dan hal ketiga yang sebenarnya kita 55 00:02:49,500 --> 00:02:52,843 ‫lakukan adalah mengatakan event. mencegahDefault. 56 00:02:56,770 --> 00:02:57,750 ‫Oke? 57 00:02:57,750 --> 00:03:01,580 ‫Jadi ini mencegah formulir memuat halaman lain mana pun. 58 00:03:01,580 --> 00:03:03,925 ‫Selanjutnya, mari kita dapatkan email 59 00:03:03,925 --> 00:03:06,740 ‫dan nilai kata sandi yang dimasukkan pengguna. 60 00:03:06,740 --> 00:03:10,485 ‫Jadi ini, dalam elemen ini, dengan email ID, 61 00:03:10,485 --> 00:03:13,310 ‫dan kata sandi ID, oke? 62 00:03:13,310 --> 00:03:15,020 ‫Jadi dua bidang input 63 00:03:15,020 --> 00:03:18,114 ‫ini dan mari kita dapatkan data ini juga. 64 00:03:18,114 --> 00:03:21,364 ‫(mengetik pada keyboard) Jadi dokumen, 65 00:03:24,933 --> 00:03:26,440 ‫dapatkan elemen dengan 66 00:03:26,440 --> 00:03:27,933 ‫ID. 67 00:03:29,310 --> 00:03:32,230 ‫Email, dan kemudian kami menggunakan properti nilai untuk 68 00:03:32,230 --> 00:03:34,670 ‫mencapai nilai itu di luar sana. 69 00:03:34,670 --> 00:03:37,893 ‫Bukan nodeValue, hanya nilai. 70 00:03:39,520 --> 00:03:42,930 ‫Mari kita gandakan baris ini, oke? 71 00:03:42,930 --> 00:03:45,330 ‫Jadi sekarang mari kita lakukan login 72 00:03:45,330 --> 00:03:47,940 ‫yang sebenarnya di fungsi yang terpisah, oke? 73 00:03:47,940 --> 00:03:49,880 ‫Sekarang kita sampai di 74 00:03:49,880 --> 00:03:53,040 ‫sini, kesalahan eslint ini dan itu lagi 75 00:03:53,040 --> 00:03:56,450 ‫karena kita hanya mengonfigurasi eslint untuk bukan kode JS. 76 00:03:56,450 --> 00:03:59,963 ‫Jadi mari kita nonaktifkan itu seperti yang kita lakukan di sini. 77 00:04:01,340 --> 00:04:03,233 ‫Jadi ambil saja potongan kode ini. 78 00:04:07,790 --> 00:04:08,630 ‫Baiklah? 79 00:04:08,630 --> 00:04:09,910 ‫Dan sekarang seperti yang 80 00:04:09,910 --> 00:04:12,123 ‫saya katakan, sekarang mari kita buat fungsi login itu. 81 00:04:15,270 --> 00:04:16,370 ‫Jadi dan seperti 82 00:04:17,380 --> 00:04:19,120 ‫ini, dan fungsi ini akan menerima 83 00:04:19,120 --> 00:04:20,520 ‫email dan kata sandi. 84 00:04:24,840 --> 00:04:25,770 ‫Dan pertama-tama, 85 00:04:25,770 --> 00:04:29,080 ‫mari kita lihat apakah kode ini benar-benar berfungsi. 86 00:04:29,080 --> 00:04:30,533 ‫Jadi kita akan 87 00:04:31,560 --> 00:04:33,740 ‫mengingatkan, jadi pada dasarnya buat jendela peringatan. 88 00:04:33,740 --> 00:04:36,563 ‫Dan dengan email dan kata sandi ini. 89 00:04:38,910 --> 00:04:39,743 ‫Baiklah? 90 00:04:42,920 --> 00:04:45,710 ‫Sekarang tentu saja kita juga perlu 91 00:04:45,710 --> 00:04:49,300 ‫memanggil fungsi ini lagi dengan email dan kata sandi. 92 00:04:49,300 --> 00:04:54,300 ‫Dan akhirnya, kita juga perlu memasukkan file login ini 93 00:04:54,600 --> 00:04:58,370 ‫ke dalam template dasar kita, oke? 94 00:04:58,370 --> 00:05:00,600 ‫Dan lagi, seperti yang saya katakan di 95 00:05:00,600 --> 00:05:02,340 ‫awal, di video berikutnya, 96 00:05:02,340 --> 00:05:04,640 ‫kita akan menggabungkan semua kode front-end ini 97 00:05:04,640 --> 00:05:06,423 ‫menjadi satu file JavaScript besar. 98 00:05:07,820 --> 00:05:08,653 ‫Baiklah? 99 00:05:08,653 --> 00:05:10,810 ‫Jadi itu jauh lebih baik untuk 100 00:05:10,810 --> 00:05:14,143 ‫kinerja dan juga pengalaman pengembang yang lebih baik untuk kami sendiri. 101 00:05:15,250 --> 00:05:18,330 ‫Bagaimanapun, ini sekarang harus bekerja. 102 00:05:18,330 --> 00:05:20,093 ‫Mari kita muat ulang halaman ini di sini. 103 00:05:25,783 --> 00:05:27,620 ‫Jadi saya harus mengisi, memvalidasi di 104 00:05:27,620 --> 00:05:30,563 ‫sini, bagaimanapun, Chrome bahkan tidak akan mengizinkan saya mengirimkan formulir. 105 00:05:32,920 --> 00:05:35,100 ‫Baiklah, jadi di sini kami mendapatkan peringatan 106 00:05:35,100 --> 00:05:37,020 ‫kami dengan email yang baru saja 107 00:05:37,020 --> 00:05:38,860 ‫kami masukkan dan kemudian kata 108 00:05:38,860 --> 00:05:40,080 ‫sandi, saya kira, 109 00:05:40,080 --> 00:05:42,983 ‫tidak muncul karena kami menentukan dua nilai di sana. 110 00:05:46,140 --> 00:05:50,470 ‫Jadi sebagai gantinya, mari tentukan objek di sini dan lihat apakah 111 00:05:50,470 --> 00:05:52,020 ‫itu berfungsi lagi. 112 00:05:54,072 --> 00:05:57,322 ‫(mengetik di keyboard) Yah, saya kira itu mencoba 113 00:06:03,770 --> 00:06:05,410 ‫mengubah objek itu 114 00:06:05,410 --> 00:06:07,473 ‫menjadi string di sini. 115 00:06:08,400 --> 00:06:11,530 ‫Oke, tapi, itu tidak terlalu penting di sini. 116 00:06:11,530 --> 00:06:15,573 ‫Saya biasanya lebih terbiasa menggunakan Console. log bukannya waspada. 117 00:06:16,530 --> 00:06:17,900 ‫Baiklah? 118 00:06:17,900 --> 00:06:20,960 ‫Tapi bagaimanapun, saya yakin itu bekerja sekarang di sini. 119 00:06:20,960 --> 00:06:23,783 ‫Jadi sekarang mari kita lanjutkan dan buat fungsi ini. 120 00:06:24,640 --> 00:06:28,910 ‫Jadi, untuk melakukan permintaan HTTP untuk login ini, kita 121 00:06:28,910 --> 00:06:29,890 ‫akan 122 00:06:29,890 --> 00:06:34,130 ‫menggunakan perpustakaan yang sangat populer bernama Axios, oke? 123 00:06:34,130 --> 00:06:36,430 ‫Dan di video berikutnya kita sebenarnya akan 124 00:06:36,430 --> 00:06:39,460 ‫mendownload library ini dari NPM dan menggabungkannya dengan semua 125 00:06:39,460 --> 00:06:41,000 ‫skrip kita yang lain, 126 00:06:41,000 --> 00:06:43,713 ‫tapi untuk sekarang, mari kita gunakan dari CDN. 127 00:06:45,240 --> 00:06:48,860 ‫Jadi, mari kita CDN Google 128 00:06:48,860 --> 00:06:52,260 ‫Axios saja, oke? 129 00:06:52,260 --> 00:06:55,513 ‫Lalu, lanjutkan dan salin yang ini di sini, 130 00:06:57,650 --> 00:06:59,403 ‫dan kemudian, di skrip 131 00:07:00,610 --> 00:07:04,583 ‫dasar kita, mari letakkan di sini di skrip pertama, oke? 132 00:07:06,230 --> 00:07:07,300 ‫Jadi ini 133 00:07:07,300 --> 00:07:10,080 ‫akan mengekspos objek Axios ke lingkup 134 00:07:10,080 --> 00:07:14,500 ‫global, yang kemudian dapat kita gunakan dalam fungsi login kita, oke? 135 00:07:14,500 --> 00:07:17,123 ‫Jadi sekarang kita bisa mengatakan Axios, 136 00:07:18,000 --> 00:07:21,003 ‫dan kemudian memberikan opsi untuk permintaan kita. 137 00:07:22,320 --> 00:07:26,380 ‫Jadi pertama-tama, katakanlah kita sedang melakukan post-request. 138 00:07:26,380 --> 00:07:28,593 ‫Kemudian, kita membutuhkan URL. 139 00:07:29,770 --> 00:07:31,140 ‫Baiklah? 140 00:07:31,140 --> 00:07:33,313 ‫Jadi mari kita dapatkan itu dari Postman. 141 00:07:39,530 --> 00:07:41,543 ‫Jadi, ini adalah URL kami di sini. 142 00:07:43,250 --> 00:07:45,040 ‫Dan kami juga 143 00:07:45,040 --> 00:07:47,853 ‫akan, tentu saja, menambahkan host di sana. 144 00:07:49,400 --> 00:07:52,910 ‫Jadi di sini tentu saja, ini adalah http dan 145 00:07:55,440 --> 00:07:57,093 ‫host lokal pada dasarnya. 146 00:08:01,250 --> 00:08:02,530 ‫Dan, jadi 147 00:08:02,530 --> 00:08:05,260 ‫ini adalah input login kita, dan sekarang 148 00:08:05,260 --> 00:08:07,490 ‫kita perlu menentukan data yang 149 00:08:07,490 --> 00:08:10,473 ‫kita kirim bersama dengan permintaan di dalam body. 150 00:08:13,040 --> 00:08:13,873 ‫Baiklah? 151 00:08:13,873 --> 00:08:17,870 ‫Dan itu adalah email: email. 152 00:08:17,870 --> 00:08:21,600 ‫Jadi, seperti yang sudah Anda ketahui, kami dapat menghapus email ini. 153 00:08:21,600 --> 00:08:22,433 ‫Oke? 154 00:08:22,433 --> 00:08:24,810 ‫Jadi di sini disebut 155 00:08:24,810 --> 00:08:29,210 ‫email, karena titik akhir kita mengharapkan datanya disebut email, kan? 156 00:08:29,210 --> 00:08:31,250 ‫Jadi itulah yang kita miliki di sini di dalam tubuh. 157 00:08:31,250 --> 00:08:33,997 ‫Kita perlu menentukan properti yang disebut email, dan 158 00:08:33,997 --> 00:08:35,790 ‫satu yang disebut kata sandi. 159 00:08:35,790 --> 00:08:37,830 ‫Dan itulah tepatnya yang kami lakukan 160 00:08:37,830 --> 00:08:41,630 ‫di sini tetapi kemudian memiliki nama yang sama dengan parameter ini di sini. 161 00:08:41,630 --> 00:08:44,030 ‫Jadi cukup dengan mengatakan email 162 00:08:45,000 --> 00:08:48,123 ‫dan hal yang sama berlaku untuk kata sandi. 163 00:08:49,720 --> 00:08:50,760 ‫Oke? 164 00:08:50,760 --> 00:08:53,350 ‫Sekarang, Axios di sini kemudian mengembalikan janji 165 00:08:53,350 --> 00:08:55,890 ‫dan jadi mari kita benar-benar 166 00:08:55,890 --> 00:08:59,210 ‫menggunakan satu menunggu untuk menunggu nilai itu kembali. 167 00:08:59,210 --> 00:09:04,210 ‫Jadi tunggu di sini, lalu async di sini. 168 00:09:05,110 --> 00:09:07,950 ‫Sekarang, perlu diingat bahwa ini adalah kode yang menghadap 169 00:09:07,950 --> 00:09:09,750 ‫klien dan hanya browser 170 00:09:09,750 --> 00:09:12,290 ‫yang lebih modern yang benar-benar dapat menjalankan satu 171 00:09:12,290 --> 00:09:15,573 ‫fungsi menunggu tetapi dalam kursus ini, saya tidak akan membahasnya. 172 00:09:17,130 --> 00:09:18,310 ‫Oke? 173 00:09:18,310 --> 00:09:22,510 ‫Bagaimanapun, mari simpan hasil dari ini yang menunggu 174 00:09:22,510 --> 00:09:25,640 ‫janji ke dalam variabel hasil. 175 00:09:25,640 --> 00:09:28,623 ‫Dan kemudian, untuk melihat hasilnya, 176 00:09:30,000 --> 00:09:33,453 ‫katakanlah konsol. hasil log. 177 00:09:34,500 --> 00:09:35,333 ‫Oke? 178 00:09:35,333 --> 00:09:37,870 ‫Sekarang satu hal yang sangat saya sukai dari 179 00:09:37,870 --> 00:09:40,240 ‫Axios adalah fakta bahwa itu akan menimbulkan 180 00:09:40,240 --> 00:09:43,780 ‫kesalahan setiap kali kami mendapatkan kesalahan kembali dari input API kami. 181 00:09:43,780 --> 00:09:46,480 ‫Jadi katakanlah ada kata sandi yang salah 182 00:09:46,480 --> 00:09:48,980 ‫dan server akan mengirim kembali 403 dan 183 00:09:48,980 --> 00:09:50,610 ‫pada dasarnya, kesalahan. 184 00:09:50,610 --> 00:09:52,768 ‫Jadi setiap kali ada 185 00:09:52,768 --> 00:09:55,290 ‫kesalahan, Axios akan memicu kesalahan juga. 186 00:09:55,290 --> 00:09:58,680 ‫Jadi, itu sangat berguna karena, dengan itu, kita sekarang 187 00:09:58,680 --> 00:10:00,763 ‫dapat menggunakan blok try catch. 188 00:10:02,660 --> 00:10:03,493 ‫Oke? 189 00:10:03,493 --> 00:10:05,840 ‫Jadi pada dasarnya untuk melakukan beberapa penanganan kesalahan di 190 00:10:05,840 --> 00:10:07,173 ‫sini di sisi klien. 191 00:10:08,750 --> 00:10:09,770 ‫Jadi, misalnya, 192 00:10:09,770 --> 00:10:12,090 ‫ketika pengguna masuk dengan benar, maka 193 00:10:12,090 --> 00:10:14,375 ‫Anda ingin menampilkan beberapa pesan 194 00:10:14,375 --> 00:10:16,470 ‫yang mengatakan itu, dan mungkin 195 00:10:16,470 --> 00:10:19,540 ‫logika lain, tetapi jika tidak, maka kita akan 196 00:10:19,540 --> 00:10:20,543 ‫memasuki 197 00:10:21,770 --> 00:10:26,093 ‫blok tangkap, dan kemudian dapat , ambil tindakan lain berdasarkan kesalahan. 198 00:10:27,022 --> 00:10:30,272 ‫(mengetik di keyboard) Jadi, mari kita 199 00:10:31,670 --> 00:10:34,023 ‫lihat kesalahannya juga. 200 00:10:37,480 --> 00:10:42,120 ‫Dan hanya untuk memastikan, saya juga ingin memasukkan email dan 201 00:10:43,200 --> 00:10:45,253 ‫kata sandi ke konsol. 202 00:10:49,130 --> 00:10:51,583 ‫Jadi, mari kita coba di sini. 203 00:10:52,430 --> 00:10:53,663 ‫Muat ulang 204 00:10:55,249 --> 00:10:58,499 ‫halaman kami, (mengetik di keyboard) Dan saya memasukkan 205 00:11:02,240 --> 00:11:05,160 ‫kata sandi yang salah sekarang, oke? 206 00:11:05,160 --> 00:11:06,993 ‫Tes satu, dua, tiga, empat, lima. 207 00:11:09,100 --> 00:11:12,070 ‫Mari kita lihat konsol kami di sini juga. 208 00:11:12,070 --> 00:11:15,740 ‫Dan kami mendapatkan kesalahan ini di sini dari mapbox, js, tetapi 209 00:11:15,740 --> 00:11:17,330 ‫jangan khawatir tentang itu. 210 00:11:17,330 --> 00:11:19,430 ‫Kami akan memperbaikinya nanti lagi. 211 00:11:21,848 --> 00:11:24,890 ‫Tapi untuk sekarang, mari kita lihat apa yang terjadi di sini. 212 00:11:24,890 --> 00:11:28,900 ‫Dan di sini kita mendapatkan beberapa kesalahan yang bagus, oke? 213 00:11:28,900 --> 00:11:32,670 ‫Jadi, sebenarnya ketika kita perlu melihat di sini adalah 214 00:11:32,670 --> 00:11:34,253 ‫kesalahan. tanggapan. 215 00:11:36,630 --> 00:11:38,910 ‫Dan kemudian titik data. 216 00:11:38,910 --> 00:11:42,550 ‫Oke, dan Anda akan menemukannya di sini di dokumentasi Axios 217 00:11:42,550 --> 00:11:45,113 ‫jika Anda bertanya-tanya dari mana asalnya. 218 00:11:46,660 --> 00:11:47,493 ‫Baiklah? 219 00:11:49,290 --> 00:11:52,140 ‫Biarkan saya benar-benar melanjutkan dan menyalin email 220 00:11:53,450 --> 00:11:56,713 ‫ini karena tidak baik untuk selalu menulisnya secara manual. 221 00:12:00,200 --> 00:12:04,263 ‫Dan sekarang kita benar-benar mendapatkan beberapa kesalahan yang diformat dengan baik di sini. 222 00:12:05,440 --> 00:12:06,273 ‫Oke? 223 00:12:06,273 --> 00:12:08,810 ‫Jadi ini pada dasarnya persis jsencode yang 224 00:12:08,810 --> 00:12:11,310 ‫kami kirim kembali dari server kami. 225 00:12:11,310 --> 00:12:12,143 ‫Benar? 226 00:12:12,143 --> 00:12:13,320 ‫Jadi, ini persis 227 00:12:13,320 --> 00:12:15,220 ‫sama seperti yang kita lihat di Postman. 228 00:12:15,220 --> 00:12:20,220 ‫Jadi kami mendapatkan seluruh kesalahan kami, pesan, dan juga tumpukan. 229 00:12:20,270 --> 00:12:23,420 ‫Jadi kami melihat bahwa kami mungkin tidak memberikan email 230 00:12:23,420 --> 00:12:26,523 ‫dan kata sandi dengan benar karena suatu alasan. 231 00:12:27,550 --> 00:12:30,330 ‫Jadi mari kita kembali, lihat. 232 00:12:30,330 --> 00:12:34,230 ‫Oh, jadi saya melakukan sesuatu yang aneh di sini di 233 00:12:34,230 --> 00:12:36,230 ‫mana saya melewati objek dengan 234 00:12:36,230 --> 00:12:38,003 ‫email dan kata sandi. 235 00:12:38,980 --> 00:12:41,060 ‫Jadi saya pikir itu dari sebelumnya ketika 236 00:12:41,060 --> 00:12:42,900 ‫mencoba melakukan peringatan itu dan 237 00:12:42,900 --> 00:12:45,670 ‫saya kira saya melakukan ini di tempat yang salah. 238 00:12:45,670 --> 00:12:49,570 ‫Jadi, itulah mengapa kami benar-benar melihat undefined di sini. 239 00:12:49,570 --> 00:12:51,260 ‫Dan di sini kita mendapatkan objek ini. 240 00:12:51,260 --> 00:12:53,820 ‫Jadi pada dasarnya, email adalah seluruh objek ini, dan 241 00:12:53,820 --> 00:12:56,023 ‫kata sandi saat itu tidak terdefinisi. 242 00:12:58,290 --> 00:12:59,123 ‫Oke? 243 00:12:59,123 --> 00:13:01,400 ‫Jadi sekarang, ini harus memperbaikinya, 244 00:13:01,400 --> 00:13:02,613 ‫berikan reload. 245 00:13:07,930 --> 00:13:10,760 ‫Ah, sekarang kita mendapatkan kesalahan yang benar 246 00:13:10,760 --> 00:13:12,500 ‫yang sebenarnya kita harapkan. 247 00:13:12,500 --> 00:13:15,580 ‫Jadi sekarang ini email atau kata sandi yang 248 00:13:15,580 --> 00:13:18,880 ‫salah karena saya memasukkan kata sandi yang salah, oke? 249 00:13:18,880 --> 00:13:21,441 ‫Tapi sekarang, mari kita benar-benar menghapus 250 00:13:21,441 --> 00:13:24,973 ‫lima dan kemudian menguji satu, dua, tiga, empat, harus benar. 251 00:13:25,860 --> 00:13:28,010 ‫Jadi, mari masuk, 252 00:13:28,010 --> 00:13:31,810 ‫dan sekarang kami mendapat 200 respons. 253 00:13:31,810 --> 00:13:33,253 ‫Jadi, yang sukses. 254 00:13:34,290 --> 00:13:35,890 ‫Jadi mari kita buka 255 00:13:35,890 --> 00:13:39,410 ‫ini dan yang sebenarnya menarik bagi kita adalah datanya. 256 00:13:39,410 --> 00:13:42,030 ‫Jadi pada dasarnya respon. data karena ini 257 00:13:42,030 --> 00:13:43,260 ‫sebenarnya 258 00:13:43,260 --> 00:13:46,960 ‫di mana respons jsen kami berada. 259 00:13:46,960 --> 00:13:48,653 ‫Jadi di sini, kami 260 00:13:50,210 --> 00:13:55,210 ‫mendapatkan, data ini di sini, dan kami juga mendapatkan status dan token. 261 00:13:55,410 --> 00:13:59,030 ‫Jadi, inilah token web jsen kami yang benar yang 262 00:13:59,030 --> 00:14:01,550 ‫sesuai dengan pengguna yang masuk ini. 263 00:14:01,550 --> 00:14:03,170 ‫Sekarang, yang benar-benar 264 00:14:03,170 --> 00:14:05,400 ‫menarik adalah melihat cookie kami. 265 00:14:05,400 --> 00:14:07,540 ‫Dan kami melakukannya di Google Chrome setidaknya 266 00:14:07,540 --> 00:14:09,560 ‫dengan mengklik ikon ini di 267 00:14:09,560 --> 00:14:12,180 ‫sini dan kemudian di bawah sini, Anda memiliki cookie. 268 00:14:12,180 --> 00:14:14,900 ‫Dan itu juga mengatakan bahwa koneksi kami tidak 269 00:14:14,900 --> 00:14:15,940 ‫aman dan 270 00:14:15,940 --> 00:14:19,330 ‫itu hanya karena kami tidak menggunakan HTTPS pada saat ini, 271 00:14:19,330 --> 00:14:20,920 ‫tetapi tidak masalah tentang itu. 272 00:14:20,920 --> 00:14:23,530 ‫Yang penting di sini adalah bahwa kita 273 00:14:24,630 --> 00:14:27,620 ‫sekarang memiliki cookie ini dan memang, itu disebut, token 274 00:14:27,620 --> 00:14:31,060 ‫web jsen, dan ia memiliki token web jsen yang kita 275 00:14:31,060 --> 00:14:32,203 ‫lihat di sini. 276 00:14:33,360 --> 00:14:36,620 ‫Jadi, ini hanya akhir, pada dasarnya, dari string, jadi 277 00:14:36,620 --> 00:14:40,710 ‫Anda melihat bahwa ini sama dengan apa yang kita miliki di sini. 278 00:14:40,710 --> 00:14:43,560 ‫Dan cookie ini di sini, akan benar-benar memungkinkan 279 00:14:43,560 --> 00:14:46,030 ‫kita untuk membangun seluruh otentikasi ini. 280 00:14:46,030 --> 00:14:49,000 ‫Sekali lagi, karena browser tidak akan mengirimkan cookie 281 00:14:49,000 --> 00:14:51,470 ‫ini bersama dengan setiap permintaan baru. 282 00:14:51,470 --> 00:14:55,070 ‫Dan biarkan saya benar-benar menunjukkan kepada Anda di back-end kami. 283 00:14:55,070 --> 00:14:59,930 ‫Jadi mari kita kembali ke sana, dan pergi ke app. js. 284 00:14:59,930 --> 00:15:02,320 ‫Jadi sekarang kita kembali ke catatan kita, atau 285 00:15:02,320 --> 00:15:03,943 ‫sebenarnya dalam kode Express kita. 286 00:15:05,320 --> 00:15:07,360 ‫Sekarang, untuk benar-benar mendapatkan akses 287 00:15:07,360 --> 00:15:09,690 ‫ke cookie yang ada dalam permintaan kami. 288 00:15:09,690 --> 00:15:13,050 ‫Di Express, kita perlu menginstal middleware tertentu. 289 00:15:13,050 --> 00:15:16,630 ‫Jadi kita perlu menginstalnya dari paket NPM. 290 00:15:16,630 --> 00:15:19,960 ‫Dan sekali lagi, datanglah ke terminal kami 291 00:15:19,960 --> 00:15:21,550 ‫yang lain 292 00:15:22,660 --> 00:15:25,313 ‫dan kemudian instal pengurai cookie NPM. 293 00:15:26,210 --> 00:15:27,043 ‫Oke? 294 00:15:27,043 --> 00:15:29,380 ‫Jadi pada dasarnya, paket ini kemudian akan mengurai 295 00:15:29,380 --> 00:15:31,653 ‫semua cookie dari permintaan yang masuk. 296 00:15:37,360 --> 00:15:38,193 ‫cookieParser. 297 00:15:44,600 --> 00:15:45,680 ‫Baiklah? 298 00:15:45,680 --> 00:15:50,377 ‫Dan sekarang mari kita benar-benar menggunakannya dekat dengan parser tubuh ini. 299 00:15:54,770 --> 00:15:56,003 ‫Oke? 300 00:15:56,003 --> 00:15:57,050 ‫Jadi keduanya sangat mirip. 301 00:15:57,050 --> 00:15:59,750 ‫Yang pertama ini mem-parsing data dari 302 00:15:59,750 --> 00:16:03,070 ‫isi dan yang kedua mem-parsing data dari cookie. 303 00:16:03,070 --> 00:16:06,600 ‫Jadi sekarang, jika di middleware ini, kita 304 00:16:06,600 --> 00:16:09,803 ‫bisa menggunakan request. kue. 305 00:16:11,470 --> 00:16:13,080 ‫Jadi sekarang untuk setiap 306 00:16:13,080 --> 00:16:16,593 ‫permintaan, kami akan selalu menampilkan semua cookie di konsol. 307 00:16:19,360 --> 00:16:22,440 ‫Jadi, jika sekarang kita memuat ulang halaman ini, atau 308 00:16:22,440 --> 00:16:24,490 ‫benar-benar halaman lain, jadi izinkan 309 00:16:24,490 --> 00:16:27,283 ‫saya membuka yang ini di sini di tab baru. 310 00:16:29,780 --> 00:16:33,420 ‫Jadi, jika sekarang kita kembali, kita akan melihat kue itu di sini. 311 00:16:33,420 --> 00:16:35,820 ‫Dan, memang, ini dia. 312 00:16:35,820 --> 00:16:38,810 ‫Jadi ini adalah cookie yang baru saja 313 00:16:38,810 --> 00:16:42,960 ‫dikirim ke aplikasi kita dengan memuat halaman itu di browser. 314 00:16:42,960 --> 00:16:44,223 ‫Dan jika 315 00:16:45,710 --> 00:16:49,710 ‫saya melakukannya lagi, Anda akan melihat yang lain, bukan? 316 00:16:49,710 --> 00:16:51,120 ‫Jadi begini. 317 00:16:51,120 --> 00:16:54,790 ‫Jadi sekarang kita bisa menggunakan ini untuk melindungi rute kita. 318 00:16:54,790 --> 00:16:56,863 ‫Baiklah, jadi mari kita coba itu. 319 00:16:58,860 --> 00:16:59,693 ‫Oke? 320 00:16:59,693 --> 00:17:01,070 ‫Tapi sebelum kita 321 00:17:01,070 --> 00:17:03,080 ‫bisa melakukannya, kita perlu di off 322 00:17:03,080 --> 00:17:05,770 ‫controller kita untuk benar-benar menambahkannya di sini juga. 323 00:17:05,770 --> 00:17:08,840 ‫Jadi saat ini, kami hanya membaca token web 324 00:17:08,840 --> 00:17:10,503 ‫jsen dari header otorisasi. 325 00:17:11,390 --> 00:17:12,223 ‫Benar? 326 00:17:12,223 --> 00:17:15,230 ‫Dan hanya jika mereka mulai dengan pembawa ini, kan? 327 00:17:15,230 --> 00:17:17,170 ‫Jadi untuk token pembawa. 328 00:17:17,170 --> 00:17:19,640 ‫Tapi sekarang, kami pada dasarnya juga ingin 329 00:17:19,640 --> 00:17:21,970 ‫membaca token web jsen dari cookie. 330 00:17:21,970 --> 00:17:25,633 ‫Jadi apa yang bisa kita lakukan di sini pada dasarnya 331 00:17:27,870 --> 00:17:30,860 ‫adalah if, jadi jika tidak ada token di 332 00:17:30,860 --> 00:17:33,333 ‫header otorisasi, mari kita lihat cookie. 333 00:17:34,170 --> 00:17:36,807 ‫Jadi permintaan. kue. token web jsen. 334 00:17:36,807 --> 00:17:39,520 ‫Jadi JWT, yang merupakan nama cookie, dan 335 00:17:39,520 --> 00:17:42,550 ‫oleh karena itu, di objek cookie, akan 336 00:17:42,550 --> 00:17:45,110 ‫ada properti yang disebut JWT. 337 00:17:45,110 --> 00:17:47,137 ‫Jadi ini di sini, kan? 338 00:17:49,120 --> 00:17:51,280 ‫Jadi jika ini 339 00:17:51,280 --> 00:17:55,080 ‫ada, maka tokennya harus persis seperti itu. 340 00:17:55,080 --> 00:17:58,040 ‫Jadi permintaan. kue. jwt. 341 00:17:58,040 --> 00:17:58,873 ‫Oke. 342 00:18:00,117 --> 00:18:00,950 ‫Jadi sekarang dengan ini, 343 00:18:02,085 --> 00:18:03,593 ‫kami juga dapat mengautentikasi pengguna berdasarkan token yang dikirim 344 00:18:05,590 --> 00:18:06,840 ‫melalui cookie dan tidak hanya header otorisasi. 345 00:18:06,840 --> 00:18:10,400 ‫Besar. 346 00:18:10,400 --> 00:18:13,210 ‫Dan hanya untuk mengujinya, mari kita lindungi salah 347 00:18:13,210 --> 00:18:15,780 ‫satu rute kita di sini dalam tampilan. 348 00:18:15,780 --> 00:18:16,613 ‫Dan saya akan melakukannya dengan halaman detail tur ini, oke? 349 00:18:16,613 --> 00:18:18,580 ‫Jadi itu hanya 350 00:18:18,580 --> 00:18:22,610 ‫untuk pengujian karena tentu saja itu tidak masuk akal, 351 00:18:22,610 --> 00:18:27,170 ‫tetapi saya hanya ingin menunjukkan kepada Anda bahwa seperti sekarang 352 00:18:27,170 --> 00:18:29,460 ‫ini, login kami sudah berfungsi. 353 00:18:29,460 --> 00:18:31,920 ‫Jadi mari impor authController di sini. 354 00:18:31,920 --> 00:18:33,800 ‫(mengetik di keyboard) Dan kemudian, 355 00:18:33,800 --> 00:18:36,723 ‫seperti sebelumnya, edit di sini ke rute ini. 356 00:18:37,860 --> 00:18:39,993 ‫Jadi authController. melindungi. 357 00:18:41,708 --> 00:18:44,958 ‫Dan ini bukan hal baru untuk saat ini. 358 00:18:49,884 --> 00:18:54,860 ‫Dan hanya jika pengguna masuk, kita bisa pergi 359 00:18:54,860 --> 00:18:58,770 ‫ke getTour. 360 00:18:58,770 --> 00:19:00,930 ‫Besar. 361 00:19:00,930 --> 00:19:03,200 ‫Jadi yang akan saya lakukan sekarang adalah pada dasarnya menghapus cookie ini 362 00:19:03,200 --> 00:19:04,993 ‫terlebih dahulu hanya untuk menunjukkan kepada Anda apa yang terjadi 363 00:19:06,400 --> 00:19:07,233 ‫ketika pengguna yang 364 00:19:08,460 --> 00:19:09,710 ‫tidak masuk mencoba mengakses rute itu sekarang. 365 00:19:09,710 --> 00:19:12,450 ‫Jadi pada dasarnya, jika kami menghapus cookie ini, itu seperti 366 00:19:12,450 --> 00:19:13,850 ‫pengguna yang logout, bukan? 367 00:19:13,850 --> 00:19:17,293 ‫Jadi, jika Anda sekarang melihat tur kami, maka 368 00:19:18,180 --> 00:19:20,950 ‫itu akan terlihat baik-baik saja. 369 00:19:20,950 --> 00:19:24,563 ‫Tapi, jika kita sekarang mencoba mengakses halaman 370 00:19:25,730 --> 00:19:28,970 ‫ini, kita akan mendapatkan kesalahan. 371 00:19:28,970 --> 00:19:30,653 ‫Dan memang, itu dia, mengatakan bahwa Anda belum masuk. 372 00:19:31,700 --> 00:19:34,090 ‫Cukup adil. 373 00:19:34,090 --> 00:19:35,580 ‫Jadi mari kita kembali dan benar-benar masuk. 374 00:19:35,580 --> 00:19:39,443 ‫Oke? 375 00:19:40,640 --> 00:19:41,550 ‫Jadi di sini kita pergi. 376 00:19:41,550 --> 00:19:44,903 ‫Dan kemudian di masa depan, kami tentu saja akan menerapkan seperti beberapa jendela peringatan 377 00:19:50,833 --> 00:19:51,666 ‫di sini dan 378 00:19:51,666 --> 00:19:52,610 ‫semua hal bagus itu. 379 00:19:52,610 --> 00:19:53,550 ‫Tapi untuk sekarang, sekali lagi, mari kita membuatnya bekerja. 380 00:19:53,550 --> 00:19:55,570 ‫Jadi Anda lihat kami kembali 381 00:19:55,570 --> 00:19:58,800 ‫menikmati kue kami yang enak di sini, oke? 382 00:19:58,800 --> 00:20:02,380 ‫Jadi, sekarang mari kita coba mengakses rute yang dilindungi ini. 383 00:20:02,380 --> 00:20:04,240 ‫Dan memang, sekarang berhasil. 384 00:20:04,240 --> 00:20:08,550 ‫Fantastis, itu sudah sangat bagus, bukan? 385 00:20:08,550 --> 00:20:12,163 ‫Sekarang idealnya, ketika seorang pengguna masuk, kita kemudian tidak 386 00:20:13,370 --> 00:20:16,050 ‫ingin menampilkan tombol-tombol ini di 387 00:20:16,050 --> 00:20:20,250 ‫sini, tetapi sebagai gantinya, seperti beberapa menu pengguna atau gambar pengguna. 388 00:20:20,250 --> 00:20:22,800 ‫Jadi pada dasarnya 389 00:20:22,800 --> 00:20:26,770 ‫menunjukkan, pengguna itu benar-benar masuk, bukan? 390 00:20:26,770 --> 00:20:31,240 ‫Jadi mari kita lakukan itu di video berikutnya, bersama dengan menggabungkan semua 391 00:20:31,240 --> 00:20:32,650 ‫file JavaScript kita 392 00:20:32,650 --> 00:20:35,545 ‫bersama-sama di front-end seperti yang saya jelaskan sebelumnya. 393 00:20:35,545 --> 00:20:38,090 ‫Jadi tunggu apalagi, langsung saja ke yang berikutnya. 394 00:20:38,090 --> 00:20:41,220 ‫Sampai jumpa.