NgSysV.A Serious Svelte InfoSys: peraturan dan Log Masuk Firebase D/b

Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.

Semakan terakhir: Nov '24

1. Pengenalan

Apabila anda mencipta pangkalan data Firestore pertama anda dengan bantuan pos 2.3, anda mungkin ingat bahawa anda ditanya sama ada anda mahu menggunakan peraturan "pengeluaran" atau "ujian". Cadangan pada masa itu ialah peraturan "ujian" harus dipilih. Jika anda telah menggunakan tab "peraturan" pada halaman Firestore dalam konsol Firebase pada ketika ini, anda akan mendapati peraturan anda ditetapkan kepada sesuatu seperti:

match /{document=**} {
  allow read, write: if request.time < timestamp.date(2024, 10, 31);
}

Di sini, Google telah mencipta peraturan lalai yang menggunakan cap masa untuk membenarkan akses baca dan tulis ke pangkalan data anda selama 30 hari dari hari anda menciptanya. Itu tidak mungkin menjadi apa yang anda mahukan sekarang (dan Google akan mengomel anda untuk mengubahnya, bagaimanapun). Jadi, sudah tiba masanya untuk mengetahui lebih lanjut tentang peraturan Firestore dan cara anda boleh menggunakannya untuk memastikan pangkalan data anda selamat.

Peraturan Pangkalan Data

"peraturan" Firestore membenarkan anda mengehadkan akses baca dan tulis kepada koleksi pangkalan data, dengan merujuk kepada objek permintaan Firebase yang dihantar kepada "pengendali peraturan" Firestore apabila panggilan pangkalan data dibuat. Objek ini mengandungi, antara lain, butiran pengguna yang membuat permintaan, jenis operasi yang dilakukan dan masa semasa. Jika anda ingin melihat senarai penuh hartanah, chatGPT dengan senang hati akan membekalkannya.

Untuk mendapatkan akaun penuh sintaks peraturan Firestore, mungkin lebih baik jika saya merujuk anda kepada dokumen Google sendiri di Bermula dengan Peraturan Firestore. Untuk tujuan sekarang, saya akan menumpukan perhatian pada keperluan segera untuk pangkalan data lalai yang telah dibuat oleh siri siaran ini.

Untuk melihat peraturan pangkalan data dalam tindakan, cuba gunakan tab "peraturan" pada halaman Firestore dalam konsol Firebase anda untuk menukar peraturan anda kepada:

    match /{document=**} {
      allow read: if true;
      allow write: if request.time < timestamp.date(2000, 01, 01);
    }

Peraturan ini hanya membenarkan akses tulis kepada dokumen dalam pangkalan data anda jika masanya lebih awal daripada 1 Jan 2000. Jadi, melainkan anda sedang berjalan dalam mesin masa, anda kini tidak akan dapat mencipta yang baharu dokumen.

Klik butang "Terbitkan" untuk menghidupkan peraturan baharu (anda boleh mengabaikan mesej dengan selamat yang mengatakan bahawa penerbitan mungkin mengambil sedikit masa untuk berkuat kuasa - dalam praktiknya kelewatan nampaknya adalah minimum), dan lihat cara apl web anda bertindak balas

Mulakan pelayan pembangun anda dan lancarkan apl web di http://localhost:5173. Apabila anda cuba menambah produk baharu, anda tidak seharusnya terlalu terkejut apabila anda menerima halaman "500: Ralat Dalaman". Apabila anda pergi ke sesi terminal anda untuk menyiasat punca, anda akan melihat mesej berikut:

match /{document=**} {
  allow read, write: if request.time < timestamp.date(2024, 10, 31);
}

Sekarang anda sudah faham cara peraturan Firestore berfungsi, anda boleh mula memikirkan cara anda boleh menggunakan ini pada halaman paparan produk dan penyelenggaraan produk yang anda buat dalam Post 3.1.

Seperti yang anda ingat, ini menawarkan dua laluan seperti berikut:

• laluan "paparan-produk" di localhost:5173/products-display yang membolehkan pengguna membaca semua dokumen daripada koleksi produk dan
• laluan "penyelenggaraan produk" di localhost:5173/products-maintenance yang membolehkan pengguna menulis dokumen baharu pada koleksi.

Andaiannya ialah walaupun anda berbesar hati untuk membenarkan sesiapa sahaja membaca dokumen produk menggunakan laluan "paparan-produk", anda hanya mahu diizinkan individu menjadi dapat menambah produk baharu menggunakan laluan "penyelenggaraan produk".

Individu akan dibenarkan dengan mengeluarkan gabungan "id pengguna/kata laluan" yang boleh mereka gunakan untuk "log masuk" ke apl web. Prosedur ini akan mewujudkan keadaan "auth" yang berterusan pada peranti klien pengguna yang menjadi sebahagian daripada objek permintaan Firebase yang dihantar kepada pemprosesan peraturan Firestore apabila pengguna cuba mengakses pangkalan data.

Kemudian, jika anda menetapkan peraturan Firestore seperti berikut:

    match /{document=**} {
      allow read: if true;
      allow write: if request.time < timestamp.date(2000, 01, 01);
    }

hanya pengguna "log masuk" akan dapat menulis ke halaman "produk".

Sekarang anda hanya perlu tahu cara menulis halaman "log masuk" untuk mencipta keadaan pengesahan. Sila baca terus!

2. Log Masuk Firebase

Dalam skrin log masuk, bakal pengguna sistem diminta memberikan pengecam peribadi (biasanya alamat e-mel) dan kata laluan yang berkaitan.

Sistem kemudiannya menyemak pengecam dan kata laluan pengguna terhadap senarai selamat kelayakan yang diketahui. Dalam Firebase, anda akan menemui senarai ini dalam konsol Firebase projek anda di bawah tab "Bina -> Pengesahan -> Pengguna". Sila lihat ini. Ambil peluang untuk mendaftarkan alamat e-mel ujian dan kata laluan (pendaftaran "program" juga boleh dilakukan tetapi tidak dilindungi di sini). Perhatikan "medan UID Pengguna" yang diperuntukkan oleh Firebase kepada pendaftaran. Ini ialah versi alamat e-mel yang disulitkan yang unik. Seperti yang anda akan lihat sebentar lagi, ini membentuk elemen penting dalam mekanisme keselamatan Firebase. Perhatikan juga bahawa skrin menyediakan kemudahan untuk memadam akaun dan menukar kata laluan.

Semasa anda berada di sini, lihat tab "Kaedah log masuk" pada skrin "Pengesahan". Gabungan e-mel/kata laluan atau akaun Google ditawarkan. Saya syorkan anda hanya mendayakan pilihan e-mel/kata laluan pada peringkat ini.

Sekarang buat skrin log masuk. Kod sampel yang ditunjukkan di bawah sangat ringkas (dan kebanyakannya adalah penggayaan!):

[FirebaseError: Missing or insufficient permissions.] {
  code: 'permission-denied',
  customData: undefined,
  toString: [Function (anonymous)]
}

Buat folder laluan baharu dan fail page.svelte untuk skrip log masuk dan log keluar. Tetapi jangan cuba menjalankannya lagi kerana saya perlu memberitahu anda tentang beberapa bahagian lagi!

Perhatikan bahawa fail ini kini mengimport pembolehubah pengesahannya daripada fail src/lib/utilities/firebase-client.js pusat. Di dalam ini, apl web membentangkan kunci konfigurasi firebase untuk memastikan Firebase diberi kuasa untuk membuat objek pengesahan. Berikut ialah versi terkini src/lib/utilities/firebase-client.js yang melakukan perkara ini.

match /{document=**} {
  allow read, write: if request.time < timestamp.date(2024, 10, 31);
}

Memandangkan pembolehubah apl, auth dan db yang dieksport di sini diperlukan secara meluas dalam apl web, banyak kod disimpan dengan menjananya di lokasi pusat.

Tetapi beberapa keping "bling" di sini memerlukan penjelasan.

Pertama, anda akan ambil perhatian bahawa saya tidak lagi mengekodkan sifat firebaseConfig seperti apiKey secara langsung dalam kod tetapi saya merujuk parameter Vite yang telah saya takrifkan dalam fail .env projek (fail atau folder dengan "." menandakan bahawa ia adalah data "sistem"). Ini dia:

    match /{document=**} {
      allow read: if true;
      allow write: if request.time < timestamp.date(2000, 01, 01);
    }

Inti fail .env adalah untuk meletakkan kunci firebaseConfig anda dalam fail yang tidak mengandungi kod aplikasi. Ini menjadikannya lebih mudah untuk anda menguruskan keselamatan mereka. Tetapi mari letakkan perkara ini di sebelah pihak buat masa ini supaya anda boleh menumpukan perhatian kepada perkara yang lebih penting. Saya telah menambah nota pada penghujung siaran ini yang saya harap akan menerangkan segala-galanya.

Ciri kedua yang mungkin membingungkan anda ialah apl const = !getApps().length ? initializeApp(firebaseConfig): getApp(); barisan. Ini adalah contoh pernyataan "ternary" Javascript (dapatkan chatGPT untuk menerangkan cara ia berfungsi, jika anda tidak pernah bertemu ini sebelum ini). Kesannya ialah :

• Mulakan apl Firebase hanya jika tiada apl hadir dalam persekitaran Firebase pada masa ini. Apl web akan merujuk firebase-client.js dengan kerap semasa sesi pengguna dan initializeApp() gagal jika apl sudah wujud
• Jika tidak, dapatkan semula apl sedia ada.

Kembali ke arus perdana sekarang, kesan daripada semua ini ialah, apabila log masuk berjaya, Firebase mencipta objek "pengesahan" untuk pengguna yang disahkan dan tupai pergi dengan selamat dalam persekitaran penyemak imbas. Oleh itu, Firebase boleh, secara automatik, menambah token pengesahan yang dijana daripada ini kepada setiap objek permintaan yang dihantar kepada permintaan perkhidmatan pangkalan data FireStore. Maklumat dalam token termasuk sifat seperti pengecam "uID pengguna" yang anda lihat sebelum ini dalam tab pengesahan Firebase. Akibatnya, Firestore boleh memutuskan cara menggunakan peraturan seperti allow write: if request.auth != null.

Ini semua bermakna aktiviti Firestore sebelah pelanggan berfungsi seperti jam - sebaik sahaja anda log masuk, peraturan Firestore mengurus semua kebimbangan keselamatan pangkalan data anda.

Tetapi ada halangan - halangan besar, sebenarnya. Objek "auth" yang dimasukkan oleh Firebase ke dalam persekitaran penyemak imbas tidak tersedia untuk halaman sisi pelayan seperti inventori-penyelenggaraan/ page.server.js.

Anda boleh menunjukkan ini dengan mudah.

1. Terbitkan peraturan Firestore baharu yang membenarkan sesiapa sahaja membaca segala-galanya dalam koleksi produk tetapi pastikan hanya disahkan orang boleh menulis dokumen
   

   match /{document=**} {
     allow read, write: if request.time < timestamp.date(2024, 10, 31);
   }
   

2. Log masuk menggunakan laluan /login dan terima makluman "anda log masuk dengan Google".

3. Lancarkan halaman /products-display. Kerana peraturan Firestore membenarkan sesiapa sahaja membaca semuanya. Halaman itu akan memaparkan senarai semasa produk berdaftar, sama seperti sebelum ini.

4. Cuba tambah produk baharu dengan halaman penyelenggaraan produk. Agh! Ralat!
   

    match /{document=**} {
      allow read: if true;
      allow write: if request.time < timestamp.date(2000, 01, 01);
    }

Apa yang berlaku di sini ialah pembolehubah pengesahan "tupai" penyemak imbas dan selebihnya maklumat sesi Firebase induknya tidak tersedia untuk Firestore pada pelayan. Akibatnya request.auth tidak ditentukan di sana dan oleh itu peraturan Firestore gagal.

Kedudukannya ialah Google telah menolak untuk menyediakan Firebase dengan versi sisi pelayan kemudahan pengurusan sesi yang sangat baik yang menjadikan kehidupan sangat menyeronokkan di pihak pelanggan. Pada masa ini, kod anda telah menggunakan Firestore Client API. Pada pelayan, apabila pangkalan data Firestore telah menetapkan "peraturan" pada koleksi yang merujuk pembolehubah sesi pengesahan Firebase, anda mesti menggunakan API Firestore Pentadbir dan bukannya API Pelanggan. Panggilan dalam API Pentadbiran tidak menyemak peraturan Firestore, jadi jangan gagal apabila pengesahan tidak ditentukan. Tetapi menggunakan API Pentadbiran mempunyai beberapa akibat:

• API Pentadbiran menggunakan "tandatangan panggilan" yang berbeza. Urutan fungsi API pentadbir yang anda gunakan untuk melaksanakan operasi pangkalan data baca/tulis bahagian pelayan secara amnya serupa dengan versi klien tetapi menggunakan sintaks yang berbeza.
• API Pentadbiran memerlukan anda mendapatkan sebarang data pengguna yang mungkin anda perlukan dengan menggunakan kod yang anda tulis sendiri. Sesi Firebase pihak klien yang menyediakan objek auth.currentUser yang tidak ternilai dengan mudah untuk menghantar uID dan nama pengguna dsbnya tidak lagi tersedia di bahagian pelayan. Anda mesti membuat pengaturan anda sendiri untuk menyediakan pengganti.

Mengerang. Adakah terdapat alternatif? Dua siaran seterusnya menunjukkan:

1. Bagaimana anda boleh mengatasi isu ini dengan membangunkan versi "mesra peraturan" apl web anda. Akibat daripada ini akan menjadi prestasi yang lebih lemah (kerana kod sebelah pelayan berjalan lebih pantas), keselamatan yang berkurangan (kerana pengesahan borang pihak pelanggan tidak selamat) dan prospek SEO yang berkurangan (kerana labah-labah web telah mengurangkan semangat untuk mengindeks kod pihak pelanggan)
2. Sebagai alternatif, cara anda boleh berjuang dan membangunkan versi "pelayan-pelanggan" penuh apl web anda. Ini akan memberikan anda prestasi teratas, keselamatan dan SEO tetapi memerlukan anda berunding lagi gelombang teknologi untuk menutup jurang fungsi yang ditinggalkan oleh kehilangan susunan sesi pengguna Firebase

3. Kesimpulan

Ini adalah perjalanan yang sukar dengan pengakhiran yang tidak menggembirakan. Walau bagaimanapun, saya harap anda akan mempunyai tenaga untuk membaca.

Dari sudut pandangan anda sebagai pembangun, kod mesra Peraturan akan menjadi keseronokan yang sempurna kerana anda boleh nyahpepijat sepenuhnya menggunakan alat Inspektor penyemak imbas. Walaupun ia mempunyai had, seperti yang dinyatakan sebelum ini, ia boleh menjadi sangat memuaskan untuk banyak aplikasi mudah.

Sebagai alternatif, sementara versi pelayan pelanggan memberikan beberapa cabaran baharu, ia akan memberi anda pengalaman berharga dalam amalan pembangunan arus perdana dan memberikan prestasi yang benar-benar luar biasa.

Postscript - apakah maksud perniagaan ".env" ini?

Meskipun kelihatan aneh, ini semua bermula dengan perisian kawalan versi "Github" Microsoft. Ini ialah aplikasi web percuma yang membolehkan anda menyalin salinan sumber ke dalam repositori berasaskan web peribadi. Ia telah menjadi standard industri dan anda boleh mempelajarinya di Pengenalan lembut kepada git dan Github.

Tujuan utamanya adalah untuk menyepadukan aktiviti pasukan pembangun yang bekerja secara selari pada projek yang sama. Tetapi anda mungkin berminat untuk menggunakannya kerana, semasa pembangunan dan peningkatan berterusan projek peribadi anda, akan ada masa anda ingin meletakkan petikan "titik pemeriksaan" bagi kod anda di tempat yang selamat. .

Masalahnya ialah terlalu mudah untuk kunci sensitif yang dibenamkan dalam kod sumber disimpan secara tidak sengaja dalam repositori Git. Walaupun repositori boleh ditandakan sebagai "peribadi", keselamatan tidak terjamin.

Salah satu bahagian jawapannya ialah mengatur perkara supaya kunci projek dipegang secara berasingan daripada fail kod. Dengan cara ini mereka tidak perlu disalin ke Git. Meletakkan kunci Firebase anda dalam fail libutilitiesfirebase-client.js anda membantu di sini kerana ini bermakna kunci tidak lagi dikodkan ke dalam berbilang fail page.server.js. Tetapi masih terdapat kod dalam firebase-client.js pusat yang anda ingin simpan dalam repo anda. Menggunakan fail env membolehkan anda akhirnya merungkai kod daripada kunci. Walaupun kunci .env anda kekal dalam projek anda, fail ini tidak lagi perlu disalin ke repositori kod. Oleh itu, ia boleh ditambahkan pada fail .gitignore yang memberitahu Git fail mana yang hendak dikecualikan.

Anda akan mendapati bahawa Svelte mencipta fail .gitignore apabila ia memulakan projek anda dan ia sudah mengandungi butiran folder sistem Vite yang tidak mempunyai tempat dalam pusat pemeriksaan kod sumber. Untuk memastikan bahawa fail ".env" (dan sebarang sejarah pengeditan untuk fail) dikecualikan daripada semua komitmen Git, anda akan menambah entri berikut:

match /{document=**} {
  allow read, write: if request.time < timestamp.date(2024, 10, 31);
}

Perhatikan bahawa, setelah anda melakukan ini, baris /.env dalam direktori VSCode Workspace anda akan menjadi "dikelabukan". Ini memberikan jaminan visual bahawa fail ini tidak akan didedahkan di web oleh komit Git.

Atas ialah kandungan terperinci NgSysV.A Serious Svelte InfoSys: peraturan dan Log Masuk Firebase D/b. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!