Sekarang seperti yang saya sebutkan, Firebase memiliki otentikasi bawaan, kami hanya
perlu pergi ke area otentikasi di sana dan kemudian klik metode pengaturan masuk dan di sana pilih kata sandi
dan email atau kata sandi email di sini. Aktifkan ini dan klik simpan dan dengan
itu, kami telah mengaktifkannya.
Sekarang kami dapat mengirim permintaan ke Firebase API untuk membuat pengguna atau untuk login. Sekarang untuk mengetahui ke mana harus mengirim permintaan, Anda
dapat google untuk
Firebase REST Auth API dan Anda akan menemukan dokumen resmi ini di mana Anda akan
belajar cara membuat dan masuk pengguna dengan API mereka.
Sekarang ada banyak titik akhir untuk hal-hal yang berbeda, di sini di aplikasi ini kita akan fokus mendaftar
dan masuk.
Jadi jika kita klik mendaftar dengan email dan kata sandi, kita belajar cara kerjanya.
Kami perlu mengirim permintaan HTTP, permintaan posting dengan jenis konten ini ke URL ini, masukkan kunci API kami sendiri di sini yang akan
saya tunjukkan dari mana Anda mendapatkannya dalam sedetik dan lampirkan badan ini ke permintaan, jadi e- kirimkan kata sandi dan kemudian ini
mengembalikan bidang token aman yang pada dasarnya harus selalu benar. Sebagai tanggapan, kami akan mendapatkan kembali token, itu token
yang saya sebutkan di slide, email yang kami gunakan, token penyegaran yang lebih maju, token ini
di sini akan berakhir sebenarnya setelah jumlah detik
ini yang juga kami dapatkan kembali . Dengan token penyegaran, kami dapat membuatnya kembali, memvalidasi
ulang tanpa meminta pengguna untuk login lagi, kami tidak
akan melakukannya di sini, Anda akan memiliki titik akhir terpisah yang
Anda kirim token penyegaran untuk mendapatkan token ID baru, kami akan tetap sederhana di
sini dan cukup gunakan token itu dan login pengguna lagi setelah waktu kedaluwarsa itu karena waktu kedaluwarsa itu juga
sesuatu yang kita dapatkan sehingga
kita tahu kapan token ini akan menjadi tidak valid dan tidak dapat digunakan lagi karena
kita akan harus membersihkannya di aplikasi kami saat itu, agar kami tidak mencoba melampirkan token yang tidak valid ini
ke permintaan di masa mendatang ke basis data dan localId kami, itu adalah userId dari pengguna yang dibuat Firebase di server-nya
karena kami tidak harus melakukan semua manajemen pengguna itu, Firebase akan melakukan itu, kita tidak perlu menulis
kode sisi server.
Jadi yang perlu kita lakukan adalah mengirim permintaan HTTP dan karena saya
juga akan mengelola ini semua dengan Redux, saya akan membuat pembuat tindakan baru untuk ini dan saya akan
beri nama auth.
Saya juga sudah akan membuat peredam karena kami juga akan mengelola beberapa hal terkait auth di
sana, misalnya token dan userId.
Mari kita mulai dengan tindakan dan
karenanya ekspor pembuat tindakan di sini yang dapat dinamai mendaftar, masuk akal untuk
memulai dengan itu karena masuk pengguna hanya akan mungkin setelah kami membuat
setidaknya satu pengguna. Jadi di sini
dalam mendaftar, saya ingin dapat membuat pengguna baru dan untuk itu, kita
akan memerlukan email dan kata sandi sehingga harus diteruskan ke pembuat tindakan pendaftaran dari luar.
Nah, ini akan mengirim permintaan HTTP dan untuk dapat melakukan itu, kami akan menggunakan paket Redux
Thunk lagi dan karenanya mengembalikan pengiriman async di sini, jadi
kami mengembalikan fungsi yang dapat menggunakan async menunggu yang mendapatkan pengiriman itu berfungsi sebagai argumen yang disahkan
oleh middleware Redux Thunk yang kami mulai gunakan dalam modul HTTP terakhir dari kursus ini dan
ini memungkinkan kami untuk menjalankan kode async sebelum kami mengirim tindakan yang benar-benar mencapai toko kami.
Sekarang untuk itu, kita juga akan memerlukan pengidentifikasi tindakan untuk tindakan yang kemudian ingin kita tangani
di toko kita dan di sana saya hanya akan menggunakan mendaftar, yang juga telah mendaftar sebagai pengidentifikasi string.
Jadi di sini pada akhirnya, kami kemudian akan mengirimkan objek tindakan ini di mana jenisnya mendaftar dan di mana kami
mungkin kemudian juga akan menambahkan beberapa data tambahan tetapi sebelum kita melakukannya, kita perlu mengirim permintaan HTTP.
Sekarang hal itu dapat dilakukan dengan mengambil API seperti yang Anda pelajari di modul terakhir dan karena itu
harus melalui modul itu
terlebih dahulu dan ini adalah URL yang perlu kami kirimi permintaan, sehingga kami dapat menyalinnya. Tambahkan di sini dan sekarang kita memiliki
kunci API itu.
Nah, itu sesuatu yang bisa kita dapatkan dari Firebase dengan mengklik ikon roda
gigi di sini, pengaturan proyek. Di sana
Anda akan menemukan kunci API web dan itulah
yang Anda butuhkan, salin dan ganti kunci API termasuk tanda kurung dengan kunci itu.
Ini adalah URL yang harus kami kirimi permintaan. Sekarang seperti yang diberitahukan oleh dokumen resmi
kepada kami,
kami perlu mengirim permintaan posting, jadi seperti yang telah Anda pelajari,
kami perlu menambahkan argumen kedua ini untuk mengambil objek mana yang memungkinkan kami mengonfigurasi permintaan
itu dan di sana, kami dapat mengatur metode untuk memposting dan juga menambahkan beberapa tajuk karena kita perlu menambahkan
tajuk JSON aplikasi, jadi tajuk jenis konten yang seharusnya memiliki nilai JSON aplikasi dan kita harus menambahkan tubuh dan tubuh itu harus
dalam format JSON yang bisa kita dapatkan dengan JSON. merangkai dan data yang ingin saya rangkai harus menjadi
objek dengan tiga kunci ini - email, kata sandi dan kembalikan token aman. Jadi di sini tentu saja, email merujuk ke email yang kita
peroleh sebagai argumen di sini, sama dengan kata sandi yang merujuk pada argumen kata sandi yang kita dapatkan dan
kemudian ini yang ketiga dan saya akan menyalinnya untuk tidak salah ketik, kembalikan argumen token aman di sini
atau pasangan nilai kunci di mana nilainya seharusnya benar. Permintaan ini harus membuat
pengguna baru.
Sekarang kita bisa menunggu jawabannya dengan kata kunci yang menunggu dan kemudian seperti yang Anda pelajari sebelumnya,
kita dapat memeriksa apakah jawabannya tidak apa-apa, jika itu masalahnya, saya ingin melempar kesalahan baru di mana saya mengatakan ada
yang tidak beres dan kami akan lihat penanganan kesalahan yang lebih terperinci nanti, untuk saat ini dan jika tidak apa-apa, saya ingin
mendapatkan data respons saya dengan menunggu respons JSON yang akan membongkar badan respons dan secara otomatis mengubahnya dari format
JSON ke Javascript, jadi ke objek atau array Javascript dan sekarang kita akan dapat bekerja dengan itu
dan untuk saat ini, saya hanya akan mencatat data respons ini di sini.
Sekarang kami belum menambahkan sisa toko Redux terkait auth kami, kami akan melakukannya nanti tetapi kami memiliki sesuatu
yang harus bekerja, kami harus dapat mengirimkan ini dan karena itu mengirim permintaan pendaftaran seperti itu.
Jadi sekarang kita dapat kembali ke layar auth dan pada akhirnya ketika kita mengklik tombol login ini yang tidak benar berlabel
login pada saat kita benar-benar mendaftar tetapi mari kita biarkan seperti ini untuk saat ini,
jadi
ketika kita klik ini tombol Saya ingin mengirim permintaan pendaftaran ini. Jadi untuk itu, kita perlu, seperti sebelumnya, mengimpor
pengiriman menggunakan dari React Redux sehingga kita dapat mengirim tindakan dan
tentu saja, mengimpor semuanya sebagai tindakan auth dari data folder toko, dari folder tindakan dan di sana dari file auth
dan dengan yang menambahkan, kita dapat menambahkan fungsi
di sini, baik fungsi inline atau seperti
ini, fungsi bernama disimpan dalam konstanta yang saya akan beri
nama penangan pendaftaran, di sana
saya tidak mengharapkan
argumen dan di sana saya kemudian ingin mengirim, jadi
kita perlu untuk mendapatkan akses ke fungsi pengiriman dengan mengeksekusi use dispatch
dan kemudian di sini
kita dapat mengirim tindakan autent ini mendaftar acara atau mendaftar tindakan.
Sekarang masalahnya adalah ini membutuhkan email dan kata sandi dan saat
ini saya tidak menyimpan ini.
Saya mendapatkan ini di input saya tetapi di sini pada perubahan input, saya tidak menyimpan data yang tentu saja saya harus.
Sekarang kita dapat melihat formulir kami yang lain di sini untuk melihat bagaimana kami melakukannya.
Jadi di layar edit produk, kami tentu saja memiliki peredam formulir kami di sini yang mengelola seluruh validitas dan nilai
terkait formulir kami.
Jadi pada akhirnya, kita dapat menyalinnya dan menambahkannya ke layar auth di luar komponen layar auth seperti
ini dan kembali ke layar edit produk untuk kemudian juga mengambil bagian di sana di mana kita
menginisialisasi dengan
menggunakan peredam, jadi salin semua ini dan menambahkannya ke
layar auth juga, sekarang di dalam komponen, mungkin di sini dan untuk itu untuk bekerja, kita juga perlu mengimpor peredam menggunakan dari Bereaksi dan
dengan yang diimpor, sekarang
kita hanya perlu sedikit tweak sedikit. Peredam bentuk ini baik-baik saja dan omong-omong Anda bisa
mengalihdayakan ini ke file terpisah karena kami menggunakan jenis peredam yang sama di layar auth dan
layar produk edit, Anda bahkan dapat membuat kait
kustom jika Anda tahu caranya berfungsi, untuk saat ini saya
hanya akan membiarkannya seperti ini.
Satu hal yang saya butuhkan adalah pembaruan form
input, biarkan saya ambil itu dari layar edit produk juga, konstanta
ini di sini,
mari kita pindahkan itu di layar auth juga.
Jadi sekarang
dengan itu, itu semua baik-baik saja tetapi di sana saya menyebutnya menggunakan peredam dan menginisialisasi ini semua, yang
tentu saja terlihat berbeda.
Kita harus memiliki email yang awalnya kosong dan kata sandi yang awalnya kosong dan untuk
validitasnya sama, kita hanya
punya email yang awalnya tidak valid dan kita punya kata sandi yang awalnya
tidak valid dan karena itu bentuk keseluruhannya juga pada awalnya tidak valid.
Sekarang status pengiriman harus dipicu setiap kali input kami berubah di sini, jadi di
sini tentang perubahan input, tentu saja Anda tahu dan Anda dapat melihatnya di layar edit produk, kami
mendapatkan tiga nilai - kami mendapatkan pengidentifikasi input, nilai input dan input validitas.
Jadi pada akhirnya kita bisa menyalin ini di sini dari layar edit produk dan memindahkannya ke layar
auth dan mengganti fungsi anonim ini dengan itu atau benar-benar menyimpannya dalam variabel baru di sini,
input change handler yang sekarang memegang fungsi ini. Sekarang sama seperti pada layar edit produk, Anda harus
mengambil ini dengan menggunakan panggilan balik untuk memastikan bahwa ini tidak rerender ketika seharusnya tidak.
Jadi sebenarnya, kita harus mengambilnya di sini termasuk use callback call dan
dependensi use callback, jadi ini sebenarnya yang harus digunakan di sana pada input handler perubahan.
Sekarang pengendali perubahan input ini dapat diikat atau dapat diatur di sini ke alat perubah input masuk sehingga
alat peraga ini menargetkan fungsi
ini dan sekarang dengan itu, kami menyimpan nilai formulir kami atau nilai input kami dalam kondisi formulir
kami yang kami tangani dengan gunakan peredam dan sebagainya.
Jadi sekarang ini bentuk negara saya tertarik di sini di handler pendaftaran saya karena di sana untuk mendaftar,
saya harus lulus dari nilai input negara. email dan bentuk nilai input negara. kata sandi, jadi dua nilai
ini yang dikumpulkan dan sekarang penangan pendaftaran di sini, fungsi ini dapat diikat ke tombol ini di sana,
ke tombol masuk di sini di onPress karena ini adalah fungsi yang ingin
saya tunjuk untuk menjalankannya ketika kita tekan tombol ini.
Mari kita lihat apakah itu berfungsi sebagaimana mestinya. Jika saya mulai memasukkan nilai di sini,
saya memang mendapatkan kesalahan validasi saya tetapi entah bagaimana mereka tidak muncul,
itu masalahnya karena itu bukan pesan kesalahan di sini tetapi teks kesalahan pada input di layar auth.
Jadi jika kita mengubah pesan kesalahan itu menjadi teks kesalahan, sekarang jika kita menguji ini,
jadi jika saya klik di sini, keluar dari sana, saya mendapatkan peringatan saya.
Sekarang jika saya memasukkan alamat email yang valid,
ini hilang, jika saya memasukkan kata sandi yang cukup panjang, itu hilang, jika saya sekarang klik login di sini, mari kita lihat apakah itu
berfungsi.
Mari kita pergi ke Firebase, ke otentikasi dan di sana, Anda sekarang harus melihat pengguna baru, ini
adalah pengguna yang baru saja dibuat.
Jadi mendaftar berfungsi, sekarang mari kita
pastikan kita juga dapat beralih ke mode masuk dan membuatnya bekerja juga.
Ngomong-ngomong, perhatikan juga bahwa ini adalah data yang kami dapatkan, jadi
itulah responsnya,
objek ini dengan email, berapa lama
token itu valid dalam hitungan detik,
lalu token itu sendiri yang merupakan string samar panjang ini, kemudian juga ID dari pengguna yang
dibuat dan token penyegaran itu.