Rumah >hujung hadapan web >tutorial js >Log masuk/daftar dengan firebase Vue JS #STEP

Log masuk/daftar dengan firebase Vue JS #STEP

DDD
DDDasal
2024-10-27 07:01:29446semak imbas

Baru-baru ini saya menemui alat pengesahan yang luar biasa dan mudah ini untuk dilaksanakan dalam projek saya dan saya ingin berkongsi semua fungsi dan langkah demi langkah supaya anda boleh menggunakannya dalam projek anda juga.

Saya seorang pembangun bahagian hadapan dan, sudah tentu, pengetahuan saya tentang bahagian belakang sangat kabur, terutamanya apabila ia datang untuk melaksanakan skrin log masuk/pendaftaran di mana pengguna perlu menyimpan maklumat sensitif dan disulitkan aplikasi, alat yang luar biasa dan sangat mudah digunakan ini muncul sebagai pilihan, jadi, tanpa berlengah lagi, mari lihat contoh dan penjelasan.

Dalam siaran pertama ini, kami akan membuat projek dalam Firebase dan mengkonfigurasi semua yang kami perlukan untuk membuat projek itu berfungsi, jadi...

Login/cadastro com firebase   Vue JS #PASSO


  1. Apabila log masuk ke firebase, pergi ke pilihan Buat projek.
    Login/cadastro com firebase   Vue JS #PASSO

  2. Selepas itu, berikan nama projek anda (saya syorkan meletakkan nama apl anda, dalam kes saya apl log masuk) dan klik Teruskan.
    Login/cadastro com firebase   Vue JS #PASSO

  3. Langkah seterusnya ialah sama ada untuk mengaktifkan Google Analitis untuk projek itu atau tidak, dalam kes saya, saya tidak akan mengaktifkannya, tetapi terpulang kepada anda, selepas itu, cuma klik pada Buat projek.
    Login/cadastro com firebase   Vue JS #PASSO

  4. Tunggu sehingga pemuatan selesai dan klik Teruskan.
    Login/cadastro com firebase   Vue JS #PASSO

  5. Jika semuanya berjalan lancar, skrin ini akan dipaparkan untuk anda.
    Login/cadastro com firebase   Vue JS #PASSO

  6. Langkah seterusnya sekarang, pergi ke pilihan ini Pengesahan.
    Login/cadastro com firebase   Vue JS #PASSO

  7. Di dalamnya, pergi ke Mari kita mulakan.
    Login/cadastro com firebase   Vue JS #PASSO

  8. Pilih pilihan E-mel/kata laluan.
    Login/cadastro com firebase   Vue JS #PASSO

  9. Kemudian dayakan pilihan log masuk dan simpan tetapan.
    Login/cadastro com firebase   Vue JS #PASSO

  10. Anda akan melihat bahawa ia kini akan menunjukkan pilihan yang dipilih pada skrin utama Pengesahan, seperti yang ditunjukkan dalam imej.
    Login/cadastro com firebase   Vue JS #PASSO

  11. Sekarang mari kita pergi ke pilihan Tambah pembekal baharu dan kami juga akan mengkonfigurasi log masuk dengan Google.
    Login/cadastro com firebase   Vue JS #PASSO

  12. Hanya pilih pilihan Google.
    Login/cadastro com firebase   Vue JS #PASSO

  13. Kemudian, anda perlu Aktifkan, sejurus selepas ia akan membuka tab dengan Nama awam projek di mana ia akan mencipta nama rawak, tetapi dalam saya kes, saya saya meletakkan nama yang sama dengan projek log masuk-apl dan ia juga akan meminta e-mel untuk sokongan, di mana ia biasanya akan mencari e-mel anda daripada Google dan anda hanya perlu memilih dan akhirnya Simpan .
    Login/cadastro com firebase   Vue JS #PASSO

  14. Dan sekali lagi ia akan mengubah hala ke skrin Pengesahan utama yang kini menunjukkan dua penyedia aktif.
    Login/cadastro com firebase   Vue JS #PASSO

Bahagian mencipta projek dan mengkonfigurasi bilik pemasangan ini akhirnya berakhir ✨, saya berjanji kami akan mengotorkan tangan kami tidak lama lagi dan memastikan semuanya berfungsi.


Sekarang, kami perlu kembali ke halaman utama Firebase supaya kami boleh mendapatkan kod yang kami perlukan untuk menyepadukan Firebase ke dalam projek kami di sana dalam kod.

  1. Di sini dalam Ikhtisar Projek, mari pilih apl Web.
    Login/cadastro com firebase   Vue JS #PASSO

  2. Jadi mari kita beri nama panggilan kepada aplikasi ini, sekali lagi, saya memilih untuk meletakkan nama aplikasi log masuk dan kemudian klik pada Daftar aplikasi.
    Login/cadastro com firebase   Vue JS #PASSO

  3. Setelah ini selesai, ia akan memberikan kami semua yang kami perlukan untuk menambahkan SDK pada projek kami, daripada arahan untuk memasang firebase kepada tetapan apl web.
    Login/cadastro com firebase   Vue JS #PASSO

Perhatikan bahawa dalam bahagian penambahan SDK ini anda boleh memilih untuk menggunakan npm atau teg skrip, dalam kes saya, kerana ideanya adalah untuk menyepadukan ini ke dalam projek Vue JS jadi saya akan menggunakan NPM juga.

Sekarang, akhirnya mari kita ke perkara yang penting, KOD.
Login/cadastro com firebase   Vue JS #PASSO

Atas ialah kandungan terperinci Log masuk/daftar dengan firebase Vue JS #STEP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn