Pendaftaran Pengguna dengan Firebase dan React

Pengesahan pengguna yang teguh adalah penting untuk keselamatan aplikasi. Membina fungsi ini dari awal adalah memakan masa dan kompleks, meningkatkan risiko kelemahan keselamatan. Firebase memudahkan proses ini dengan ketara, menawarkan pendekatan yang diselaraskan kepada pengurusan identiti pengguna. Tutorial ini menunjukkan cara melaksanakan pendaftaran, pengesahan, dan pengesahan pengguna menggunakan API modular Firebase V9.

Tutorial ini menganggap kebiasaan dengan React, React Hooks, dan Firebase V8. Anda memerlukan akaun Google dan Node.js yang dipasang.

Jadual Kandungan

• Menyediakan Firebase
• Persediaan Projek
• Integrasi Firebase
• Pendaftaran Pengguna
• Pengurusan Negeri Pengguna (API Konteks React)
• Pengesahan e -mel
• Halaman profil
• Perlindungan laluan peribadi
• Fungsi log masuk
• Ringkasan
• Bacaan lanjut

Menyediakan Firebase

1. Log masuk ke akaun Google anda dan akses konsol Firebase.
2. Buat projek Firebase baru (misalnya, "Firebase-User-Reg-Auth"). Anda boleh melangkau Google Analytics untuk tutorial ini.
3. Navigasi ke bahagian pengesahan di bar sisi konsol Firebase.
4. Dayakan pengesahan e -mel/kata laluan.

Persediaan Projek

Klon repositori starter:

 git clone -b starter https://github.com/tammibriggs/firebase_user_auth.git
CD firebase_user_auth
Pemasangan NPM

Ini termasuk Firebase V9 dalam package.json . Jalankan npm start untuk melancarkan aplikasi.

Integrasi Firebase

1. Dalam konsol Firebase, dapatkan objek konfigurasi web untuk projek anda.
2. Buat firebase.js dalam direktori src aplikasi React anda.
3. Import modul yang diperlukan:

 // src/firebase.js
import {initializeapp} dari 'firebase/app';
import {getAuth} dari 'firebase/auth';

4. Tampalkan objek FirebaseConfig anda dan memulakan firebase:

 // src/firebase.js
const fireBaseConfig = { / * config anda di sini * /};
const app = initializeApp (FireBaseConFig);
const auth = getAuth (app);
eksport {auth};

Pendaftaran Pengguna

Komponen Register.js menggunakan createUserWithEmailAndPassword (Firebase v9). Pengesahan kata laluan memastikan kata laluan yang sepadan. Fungsi pendaftaran mengendalikan penciptaan pengguna dan pengendalian ralat. Acara onSubmit borang mencetuskan proses pendaftaran.

Pengurusan Negeri Pengguna (API Konteks React)

Fail AuthContext.js menyediakan konteks untuk menguruskan keadaan pengguna. AuthProvider berkongsi keadaan pengguna, dan useAuthValue mengaksesnya. App.js membungkus komponen dengan AuthProvider , dan onAuthStateChanged mengemas kini keadaan pengguna.

Pengesahan e -mel

Selepas pendaftaran, sendEmailVerification menghantar e -mel pengesahan. Pengguna diarahkan ke halaman A /verify-email . Halaman ini memaparkan e-mel pengguna dan butang "Resend E-mel" dengan cooldown 60 saat menggunakan useEffect dan Pengurusan Negeri untuk mengelakkan kadar mengehadkan. Setelah disahkan, pengguna secara automatik diarahkan ke profil mereka.

Halaman profil

Komponen Profile.js memaparkan status e -mel dan pengesahan pengguna menggunakan useAuthValue . Butang "Log Out" menggunakan signOut dari Firebase.

Perlindungan laluan peribadi

PrivateRoute.js mengehadkan akses ke halaman profil kepada pengguna yang disahkan menggunakan Redirect . Laluan App.js dikemas kini untuk menggunakan PrivateRoute untuk komponen profil.

Fungsi log masuk

Komponen Login.js menggunakan signInWithEmailAndPassword . Selepas log masuk, ia memeriksa pengesahan e-mel dan mengalihkan ke /verify-email jika perlu, memulakan undur 60 saat.

Ringkasan

Tutorial ini menyediakan panduan komprehensif untuk melaksanakan pengesahan pengguna yang selamat dalam aplikasi React menggunakan Firebase V9. Penggunaan Firebase memudahkan proses dengan ketara, menawarkan penyelesaian yang mantap dan cekap.

Bacaan lanjut

• Dokumentasi Pengesahan Firebase
• REACT Konteks API Dokumentasi

Atas ialah kandungan terperinci Pendaftaran Pengguna dengan Firebase dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!