‫-: Sekarang saatnya untuk menggunakan API login yang
‫kita buat di bagian
‫sebelumnya dan ada banyak hal yang
‫harus dilakukan di sini untuk membuat front-end berinteraksi dengan back-end.
‫Jadi kami melakukan ini dalam kuliah terpisah.
‫Bagaimanapun, mari kita mulai sekarang.
‫Dan beginilah cara kerjanya.
‫Jadi, kami akan mengizinkan pengguna untuk masuk ke situs
‫web kami dengan melakukan permintaan HTTP, atau panggilan ATEX karena
‫banyak orang suka menyebutnya juga.
‫Dan kami melakukan permintaan HTTP ke titik akhir API login yang
‫kami terapkan sebelum menggunakan data yang
‫diberikan pengguna dalam formulir yang kami miliki di sini.
‫Jadi, ingat bahwa API kami kemudian akan mengirim kembali
‫cookie yang secara otomatis disimpan di browser.
‫Dan juga secara otomatis akan dikirim
‫kembali dengan setiap permintaan berikutnya.
‫Dan seperti yang akan Anda lihat, ini
‫adalah kunci fundamental untuk membuat sistem otentikasi kami bekerja.
‫Tapi bagaimanapun, karena
‫kita melakukan permintaan HTTP ini di
‫browser, tentu saja, sekali lagi, kita akan bekerja di sisi klien.
‫Namun, karena kami
‫melakukan permintaan HTTP di browser, kami
‫masih akan mengerjakan kode skrip pekerjaan sisi klien.
‫Jadi seperti yang kita lakukan dengan implementasi Mapbox.
‫Baiklah?
‫Jadi sekarang mari kita lanjutkan dan buat file baru di sini.
‫Dan itu di publik, js, dan file baru, yang akan
‫saya sebut login. js dan di
‫video berikutnya, kita sebenarnya akan menggabungkan
‫semua file JavaScript terpisah
‫yang kita buat di sini untuk
‫front-end menjadi satu bundel besar.
‫Baiklah?
‫Namun untuk saat ini, mari kita fokus pada
‫membuat fungsi login ini berfungsi.
‫Tapi bagaimanapun, sekarang mari kita mulai dengan
‫menambahkan event listener, mendengarkan event submit pada form login kita, oke?
‫Jadi, formulir login kami memiliki kelas formulir ini di sini.
‫Oke, jadi sekarang mari kita pilih ini
‫untuk elemen dan kemudian di sana, dengarkan acara kirim.
‫Saya harap Anda terbiasa dengan logika semacam
‫ini di JavaScript sisi klien.
‫Dan semoga, ini bukan hal baru bagi Anda.
‫Jadi, dokumen. querySelector, yang kita
‫gunakan untuk memilih berdasarkan kelas.
‫Tambahkan nama Selector
‫itu, dan sekarang tambahkan EventListener, dengarkan acara kirim.
‫Jadi pada dasarnya, suatu peristiwa yang akan
‫dijalankan browser setiap kali pengguna mengklik tombol kirim pada formulir.
‫Tambahkan kemudian di
‫fungsi kumpulkan, kita akan memiliki akses ke acara itu sendiri, oke?
‫Dan hal ketiga yang sebenarnya kita
‫lakukan adalah mengatakan event. mencegahDefault.
‫Oke?
‫Jadi ini mencegah formulir memuat halaman lain mana pun.
‫Selanjutnya, mari kita dapatkan email
‫dan nilai kata sandi yang dimasukkan pengguna.
‫Jadi ini, dalam elemen ini, dengan email ID,
‫dan kata sandi ID, oke?
‫Jadi dua bidang input
‫ini dan mari kita dapatkan data ini juga.
‫(mengetik pada keyboard) Jadi dokumen,
‫dapatkan elemen dengan
‫ID.
‫Email, dan kemudian kami menggunakan properti nilai untuk
‫mencapai nilai itu di luar sana.
‫Bukan nodeValue, hanya nilai.
‫Mari kita gandakan baris ini, oke?
‫Jadi sekarang mari kita lakukan login
‫yang sebenarnya di fungsi yang terpisah, oke?
‫Sekarang kita sampai di
‫sini, kesalahan eslint ini dan itu lagi
‫karena kita hanya mengonfigurasi eslint untuk bukan kode JS.
‫Jadi mari kita nonaktifkan itu seperti yang kita lakukan di sini.
‫Jadi ambil saja potongan kode ini.
‫Baiklah?
‫Dan sekarang seperti yang
‫saya katakan, sekarang mari kita buat fungsi login itu.
‫Jadi dan seperti
‫ini, dan fungsi ini akan menerima
‫email dan kata sandi.
‫Dan pertama-tama,
‫mari kita lihat apakah kode ini benar-benar berfungsi.
‫Jadi kita akan
‫mengingatkan, jadi pada dasarnya buat jendela peringatan.
‫Dan dengan email dan kata sandi ini.
‫Baiklah?
‫Sekarang tentu saja kita juga perlu
‫memanggil fungsi ini lagi dengan email dan kata sandi.
‫Dan akhirnya, kita juga perlu memasukkan file login ini
‫ke dalam template dasar kita, oke?
‫Dan lagi, seperti yang saya katakan di
‫awal, di video berikutnya,
‫kita akan menggabungkan semua kode front-end ini
‫menjadi satu file JavaScript besar.
‫Baiklah?
‫Jadi itu jauh lebih baik untuk
‫kinerja dan juga pengalaman pengembang yang lebih baik untuk kami sendiri.
‫Bagaimanapun, ini sekarang harus bekerja.
‫Mari kita muat ulang halaman ini di sini.
‫Jadi saya harus mengisi, memvalidasi di
‫sini, bagaimanapun, Chrome bahkan tidak akan mengizinkan saya mengirimkan formulir.
‫Baiklah, jadi di sini kami mendapatkan peringatan
‫kami dengan email yang baru saja
‫kami masukkan dan kemudian kata
‫sandi, saya kira,
‫tidak muncul karena kami menentukan dua nilai di sana.
‫Jadi sebagai gantinya, mari tentukan objek di sini dan lihat apakah
‫itu berfungsi lagi.
‫(mengetik di keyboard) Yah, saya kira itu mencoba
‫mengubah objek itu
‫menjadi string di sini.
‫Oke, tapi, itu tidak terlalu penting di sini.
‫Saya biasanya lebih terbiasa menggunakan Console. log bukannya waspada.
‫Baiklah?
‫Tapi bagaimanapun, saya yakin itu bekerja sekarang di sini.
‫Jadi sekarang mari kita lanjutkan dan buat fungsi ini.
‫Jadi, untuk melakukan permintaan HTTP untuk login ini, kita
‫akan
‫menggunakan perpustakaan yang sangat populer bernama Axios, oke?
‫Dan di video berikutnya kita sebenarnya akan
‫mendownload library ini dari NPM dan menggabungkannya dengan semua
‫skrip kita yang lain,
‫tapi untuk sekarang, mari kita gunakan dari CDN.
‫Jadi, mari kita CDN Google
‫Axios saja, oke?
‫Lalu, lanjutkan dan salin yang ini di sini,
‫dan kemudian, di skrip
‫dasar kita, mari letakkan di sini di skrip pertama, oke?
‫Jadi ini
‫akan mengekspos objek Axios ke lingkup
‫global, yang kemudian dapat kita gunakan dalam fungsi login kita, oke?
‫Jadi sekarang kita bisa mengatakan Axios,
‫dan kemudian memberikan opsi untuk permintaan kita.
‫Jadi pertama-tama, katakanlah kita sedang melakukan post-request.
‫Kemudian, kita membutuhkan URL.
‫Baiklah?
‫Jadi mari kita dapatkan itu dari Postman.
‫Jadi, ini adalah URL kami di sini.
‫Dan kami juga
‫akan, tentu saja, menambahkan host di sana.
‫Jadi di sini tentu saja, ini adalah http dan
‫host lokal pada dasarnya.
‫Dan, jadi
‫ini adalah input login kita, dan sekarang
‫kita perlu menentukan data yang
‫kita kirim bersama dengan permintaan di dalam body.
‫Baiklah?
‫Dan itu adalah email: email.
‫Jadi, seperti yang sudah Anda ketahui, kami dapat menghapus email ini.
‫Oke?
‫Jadi di sini disebut
‫email, karena titik akhir kita mengharapkan datanya disebut email, kan?
‫Jadi itulah yang kita miliki di sini di dalam tubuh.
‫Kita perlu menentukan properti yang disebut email, dan
‫satu yang disebut kata sandi.
‫Dan itulah tepatnya yang kami lakukan
‫di sini tetapi kemudian memiliki nama yang sama dengan parameter ini di sini.
‫Jadi cukup dengan mengatakan email
‫dan hal yang sama berlaku untuk kata sandi.
‫Oke?
‫Sekarang, Axios di sini kemudian mengembalikan janji
‫dan jadi mari kita benar-benar
‫menggunakan satu menunggu untuk menunggu nilai itu kembali.
‫Jadi tunggu di sini, lalu async di sini.
‫Sekarang, perlu diingat bahwa ini adalah kode yang menghadap
‫klien dan hanya browser
‫yang lebih modern yang benar-benar dapat menjalankan satu
‫fungsi menunggu tetapi dalam kursus ini, saya tidak akan membahasnya.
‫Oke?
‫Bagaimanapun, mari simpan hasil dari ini yang menunggu
‫janji ke dalam variabel hasil.
‫Dan kemudian, untuk melihat hasilnya,
‫katakanlah konsol. hasil log.
‫Oke?
‫Sekarang satu hal yang sangat saya sukai dari
‫Axios adalah fakta bahwa itu akan menimbulkan
‫kesalahan setiap kali kami mendapatkan kesalahan kembali dari input API kami.
‫Jadi katakanlah ada kata sandi yang salah
‫dan server akan mengirim kembali 403 dan
‫pada dasarnya, kesalahan.
‫Jadi setiap kali ada
‫kesalahan, Axios akan memicu kesalahan juga.
‫Jadi, itu sangat berguna karena, dengan itu, kita sekarang
‫dapat menggunakan blok try catch.
‫Oke?
‫Jadi pada dasarnya untuk melakukan beberapa penanganan kesalahan di
‫sini di sisi klien.
‫Jadi, misalnya,
‫ketika pengguna masuk dengan benar, maka
‫Anda ingin menampilkan beberapa pesan
‫yang mengatakan itu, dan mungkin
‫logika lain, tetapi jika tidak, maka kita akan
‫memasuki
‫blok tangkap, dan kemudian dapat , ambil tindakan lain berdasarkan kesalahan.
‫(mengetik di keyboard) Jadi, mari kita
‫lihat kesalahannya juga.
‫Dan hanya untuk memastikan, saya juga ingin memasukkan email dan
‫kata sandi ke konsol.
‫Jadi, mari kita coba di sini.
‫Muat ulang
‫halaman kami, (mengetik di keyboard) Dan saya memasukkan
‫kata sandi yang salah sekarang, oke?
‫Tes satu, dua, tiga, empat, lima.
‫Mari kita lihat konsol kami di sini juga.
‫Dan kami mendapatkan kesalahan ini di sini dari mapbox, js, tetapi
‫jangan khawatir tentang itu.
‫Kami akan memperbaikinya nanti lagi.
‫Tapi untuk sekarang, mari kita lihat apa yang terjadi di sini.
‫Dan di sini kita mendapatkan beberapa kesalahan yang bagus, oke?
‫Jadi, sebenarnya ketika kita perlu melihat di sini adalah
‫kesalahan. tanggapan.
‫Dan kemudian titik data.
‫Oke, dan Anda akan menemukannya di sini di dokumentasi Axios
‫jika Anda bertanya-tanya dari mana asalnya.
‫Baiklah?
‫Biarkan saya benar-benar melanjutkan dan menyalin email
‫ini karena tidak baik untuk selalu menulisnya secara manual.
‫Dan sekarang kita benar-benar mendapatkan beberapa kesalahan yang diformat dengan baik di sini.
‫Oke?
‫Jadi ini pada dasarnya persis jsencode yang
‫kami kirim kembali dari server kami.
‫Benar?
‫Jadi, ini persis
‫sama seperti yang kita lihat di Postman.
‫Jadi kami mendapatkan seluruh kesalahan kami, pesan, dan juga tumpukan.
‫Jadi kami melihat bahwa kami mungkin tidak memberikan email
‫dan kata sandi dengan benar karena suatu alasan.
‫Jadi mari kita kembali, lihat.
‫Oh, jadi saya melakukan sesuatu yang aneh di sini di
‫mana saya melewati objek dengan
‫email dan kata sandi.
‫Jadi saya pikir itu dari sebelumnya ketika
‫mencoba melakukan peringatan itu dan
‫saya kira saya melakukan ini di tempat yang salah.
‫Jadi, itulah mengapa kami benar-benar melihat undefined di sini.
‫Dan di sini kita mendapatkan objek ini.
‫Jadi pada dasarnya, email adalah seluruh objek ini, dan
‫kata sandi saat itu tidak terdefinisi.
‫Oke?
‫Jadi sekarang, ini harus memperbaikinya,
‫berikan reload.
‫Ah, sekarang kita mendapatkan kesalahan yang benar
‫yang sebenarnya kita harapkan.
‫Jadi sekarang ini email atau kata sandi yang
‫salah karena saya memasukkan kata sandi yang salah, oke?
‫Tapi sekarang, mari kita benar-benar menghapus
‫lima dan kemudian menguji satu, dua, tiga, empat, harus benar.
‫Jadi, mari masuk,
‫dan sekarang kami mendapat 200 respons.
‫Jadi, yang sukses.
‫Jadi mari kita buka
‫ini dan yang sebenarnya menarik bagi kita adalah datanya.
‫Jadi pada dasarnya respon. data karena ini
‫sebenarnya
‫di mana respons jsen kami berada.
‫Jadi di sini, kami
‫mendapatkan, data ini di sini, dan kami juga mendapatkan status dan token.
‫Jadi, inilah token web jsen kami yang benar yang
‫sesuai dengan pengguna yang masuk ini.
‫Sekarang, yang benar-benar
‫menarik adalah melihat cookie kami.
‫Dan kami melakukannya di Google Chrome setidaknya
‫dengan mengklik ikon ini di
‫sini dan kemudian di bawah sini, Anda memiliki cookie.
‫Dan itu juga mengatakan bahwa koneksi kami tidak
‫aman dan
‫itu hanya karena kami tidak menggunakan HTTPS pada saat ini,
‫tetapi tidak masalah tentang itu.
‫Yang penting di sini adalah bahwa kita
‫sekarang memiliki cookie ini dan memang, itu disebut, token
‫web jsen, dan ia memiliki token web jsen yang kita
‫lihat di sini.
‫Jadi, ini hanya akhir, pada dasarnya, dari string, jadi
‫Anda melihat bahwa ini sama dengan apa yang kita miliki di sini.
‫Dan cookie ini di sini, akan benar-benar memungkinkan
‫kita untuk membangun seluruh otentikasi ini.
‫Sekali lagi, karena browser tidak akan mengirimkan cookie
‫ini bersama dengan setiap permintaan baru.
‫Dan biarkan saya benar-benar menunjukkan kepada Anda di back-end kami.
‫Jadi mari kita kembali ke sana, dan pergi ke app. js.
‫Jadi sekarang kita kembali ke catatan kita, atau
‫sebenarnya dalam kode Express kita.
‫Sekarang, untuk benar-benar mendapatkan akses
‫ke cookie yang ada dalam permintaan kami.
‫Di Express, kita perlu menginstal middleware tertentu.
‫Jadi kita perlu menginstalnya dari paket NPM.
‫Dan sekali lagi, datanglah ke terminal kami
‫yang lain
‫dan kemudian instal pengurai cookie NPM.
‫Oke?
‫Jadi pada dasarnya, paket ini kemudian akan mengurai
‫semua cookie dari permintaan yang masuk.
‫cookieParser.
‫Baiklah?
‫Dan sekarang mari kita benar-benar menggunakannya dekat dengan parser tubuh ini.
‫Oke?
‫Jadi keduanya sangat mirip.
‫Yang pertama ini mem-parsing data dari
‫isi dan yang kedua mem-parsing data dari cookie.
‫Jadi sekarang, jika di middleware ini, kita
‫bisa menggunakan request. kue.
‫Jadi sekarang untuk setiap
‫permintaan, kami akan selalu menampilkan semua cookie di konsol.
‫Jadi, jika sekarang kita memuat ulang halaman ini, atau
‫benar-benar halaman lain, jadi izinkan
‫saya membuka yang ini di sini di tab baru.
‫Jadi, jika sekarang kita kembali, kita akan melihat kue itu di sini.
‫Dan, memang, ini dia.
‫Jadi ini adalah cookie yang baru saja
‫dikirim ke aplikasi kita dengan memuat halaman itu di browser.
‫Dan jika
‫saya melakukannya lagi, Anda akan melihat yang lain, bukan?
‫Jadi begini.
‫Jadi sekarang kita bisa menggunakan ini untuk melindungi rute kita.
‫Baiklah, jadi mari kita coba itu.
‫Oke?
‫Tapi sebelum kita
‫bisa melakukannya, kita perlu di off
‫controller kita untuk benar-benar menambahkannya di sini juga.
‫Jadi saat ini, kami hanya membaca token web
‫jsen dari header otorisasi.
‫Benar?
‫Dan hanya jika mereka mulai dengan pembawa ini, kan?
‫Jadi untuk token pembawa.
‫Tapi sekarang, kami pada dasarnya juga ingin
‫membaca token web jsen dari cookie.
‫Jadi apa yang bisa kita lakukan di sini pada dasarnya
‫adalah if, jadi jika tidak ada token di
‫header otorisasi, mari kita lihat cookie.
‫Jadi permintaan. kue. token web jsen.
‫Jadi JWT, yang merupakan nama cookie, dan
‫oleh karena itu, di objek cookie, akan
‫ada properti yang disebut JWT.
‫Jadi ini di sini, kan?
‫Jadi jika ini
‫ada, maka tokennya harus persis seperti itu.
‫Jadi permintaan. kue. jwt.
‫Oke.
‫Jadi sekarang dengan ini,
‫kami juga dapat mengautentikasi pengguna berdasarkan token yang dikirim
‫melalui cookie dan tidak hanya header otorisasi.
‫Besar.
‫Dan hanya untuk mengujinya, mari kita lindungi salah
‫satu rute kita di sini dalam tampilan.
‫Dan saya akan melakukannya dengan halaman detail tur ini, oke?
‫Jadi itu hanya
‫untuk pengujian karena tentu saja itu tidak masuk akal,
‫tetapi saya hanya ingin menunjukkan kepada Anda bahwa seperti sekarang
‫ini, login kami sudah berfungsi.
‫Jadi mari impor authController di sini.
‫(mengetik di keyboard) Dan kemudian,
‫seperti sebelumnya, edit di sini ke rute ini.
‫Jadi authController. melindungi.
‫Dan ini bukan hal baru untuk saat ini.
‫Dan hanya jika pengguna masuk, kita bisa pergi
‫ke getTour.
‫Besar.
‫Jadi yang akan saya lakukan sekarang adalah pada dasarnya menghapus cookie ini
‫terlebih dahulu hanya untuk menunjukkan kepada Anda apa yang terjadi
‫ketika pengguna yang
‫tidak masuk mencoba mengakses rute itu sekarang.
‫Jadi pada dasarnya, jika kami menghapus cookie ini, itu seperti
‫pengguna yang logout, bukan?
‫Jadi, jika Anda sekarang melihat tur kami, maka
‫itu akan terlihat baik-baik saja.
‫Tapi, jika kita sekarang mencoba mengakses halaman
‫ini, kita akan mendapatkan kesalahan.
‫Dan memang, itu dia, mengatakan bahwa Anda belum masuk.
‫Cukup adil.
‫Jadi mari kita kembali dan benar-benar masuk.
‫Oke?
‫Jadi di sini kita pergi.
‫Dan kemudian di masa depan, kami tentu saja akan menerapkan seperti beberapa jendela peringatan
‫di sini dan
‫semua hal bagus itu.
‫Tapi untuk sekarang, sekali lagi, mari kita membuatnya bekerja.
‫Jadi Anda lihat kami kembali
‫menikmati kue kami yang enak di sini, oke?
‫Jadi, sekarang mari kita coba mengakses rute yang dilindungi ini.
‫Dan memang, sekarang berhasil.
‫Fantastis, itu sudah sangat bagus, bukan?
‫Sekarang idealnya, ketika seorang pengguna masuk, kita kemudian tidak
‫ingin menampilkan tombol-tombol ini di
‫sini, tetapi sebagai gantinya, seperti beberapa menu pengguna atau gambar pengguna.
‫Jadi pada dasarnya
‫menunjukkan, pengguna itu benar-benar masuk, bukan?
‫Jadi mari kita lakukan itu di video berikutnya, bersama dengan menggabungkan semua
‫file JavaScript kita
‫bersama-sama di front-end seperti yang saya jelaskan sebelumnya.
‫Jadi tunggu apalagi, langsung saja ke yang berikutnya.
‫Sampai jumpa.