Jak utworzyć login Firebase i zarejestrować się w React
Firebase to system, który oferuje programistom wiele platform do tworzenia aplikacji internetowych. Jednym z podstawowych elementów aplikacji jest tworzenie użytkowników i umożliwienie im logowania. Zobaczmy, jak możemy napisać login Firebase, który jest kompletny, ale bardzo prosty w implementacji.
Utwórz aplikację Firebase
Najpierw musisz utworzyć projekt aplikacji Firebase, więc przejdź do konsoli Firebase i dodaj nowy projekt. Tutaj dodasz aplikację.
https://console.firebase.google.com/
Uruchomi asystenta, który zapyta Cię o nazwę projektu.
Następny ekran zapyta, czy chcesz włączyć analitykę. Wyłącz go i kliknij przycisk Utwórz projekt. Przygotowanie projektu zajmie trochę czasu, po czym otrzymasz przycisk Kontynuuj, który przeniesie Cię do przeglądu projektu.
Teraz musisz dodać aplikację Firebase do projektu Firebase. Ma sens? Projekt Firebase pozwala zawierać kilka aplikacji Firebase na iOS, Androida, przeglądarkę internetową i Unity. Na razie stwórzmy aplikację internetową, ponieważ będziemy używać Reacta do tworzenia naszego loginu Firebase.
Zostaniesz poproszony o nazwanie tej aplikacji i otrzymasz klucze, których będziesz potrzebować do łączenia się z Firebase. Będą wyglądać mniej więcej tak:
var firebaseConfig = {
apiKey: "1A2B3C4D5E6F7G",
authDomain: "appname-a123b.firebaseapp.com",
databaseURL: "https://appname-a123b.firebaseio.com",
projectId: "appname-a123b",
storageBucket: "appname-a123b.appspot.com",
messagingSenderId: "1234567890",
};Użyjemy tych kluczy w naszej aplikacji React, aby skonfigurować dostawcę, który umożliwi nam dostęp do Firebase w dowolnym komponencie w ramach dostawcy.
Na koniec przejdź do Uwierzytelniania na lewym pasku bocznym, na karcie Metoda logowania i włącz uwierzytelnianie e-mail / hasło .
Wszystko gotowe!
Zainstaluj zależności Firebase
Firebase jest dostępny dla różnych stosów, w tym JavaScript i Node.js, z których będziemy teraz korzystać. Zamierzamy zainstalować tylko dwie zależności z npm:
firebase, co pozwoli nam uzyskać dostęp do takich rzeczy jakauthbiblioteka, której użyjemy do wykonania logowania, a także tworzenia nowego użytkownikareactfire, zbiór przydatnych narzędzi do pracy z Firebase w React. Użyjemy ichuseFirebaseApp, aby połączyć się z kontekstem i uzyskać dostęp do Firebase
Zainstalujmy je za pomocą
npm i firebase reactfireStruktura aplikacji React będzie bardzo prosta i wygląda następująco:
|-- index.js
|-- App.js
|-- FirebaseUser
|-- index.jsi będą one powiązane w następujący sposób:
index.js --import--> ./App.js --import--> ./FirebaseUserSkonfiguruj dostawcę Firebase
Napiszmy pierwszy plik do logowania i rejestracji w Firebase! Właściwie nie musimy tego pisać, ponieważ należy to dodać do pliku, w którym wystawiasz ReactDOM.render(), w naszym przypadku będzie to index.js:
import { FirebaseAppProvider } from 'reactfire';
const firebaseConfig = {
apiKey: "1A2B3C4D5E6F7G",
authDomain: "appname-a123b.firebaseapp.com",
databaseURL: "https://appname-a123b.firebaseio.com",
projectId: "appname-a123b",
storageBucket: "appname-a123b.appspot.com",
messagingSenderId: "925199572988",
appId: "1:123456789:web:12a34b56c78d90e"
};Spowoduje to zaimportowanie FirebaseAppProvideri dodanie kluczy konfiguracyjnych, które do niego przekażesz. Możesz teraz owinąć komponent główny, który w naszym przypadku jest Appu dostawcy:
ReactDOM.render(, document.getElementById('root')
);Świetny! Teraz wszystkie poniższe komponenty będą mogły uzyskać dostęp do Firebase!
Użyj komponentu logowania i rejestracji Firebase
Napiszmy teraz Appkomponent, w którym zaimportujemy i użyjemy FirebaseUserkomponentu do utworzenia i zalogowania użytkownika. Nie ma tu nic związanego z Firebase. Zaimplementujemy logowanie i rejestrację przy użyciu tego samego komponentu, abyś mógł zobaczyć, jak możemy ponownie użyć kodu, więc w tym komponencie zaimplementujemy parę przycisków, które po kliknięciu będą renderować FirebaseUserw trybie logowania lub tryb rejestracji:
import React, { useState } from 'react';
import FirebaseUser from './FirebaseUser';
function App() {
const [ signInOrUp, setSignInOrUp ] = useState( '' );
return (Firebase login
{
signInOrUp?(): (<>
setSignInOrUp( 'signin') } >Log in with existing user
setSignInOrUp( 'signup') } >Create a new user) }
);
}
export default App;
Skonfiguruj login Firebase i zarejestruj się
Stworzymy do tego komponent. Najpierw musimy zaimportować kilka modułów:
import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';Zajmiemy useStatesię kilkoma rzeczami, od sprawdzenia, czy użytkownik jest uwierzytelniony, po ustawienie błędów. Użyjemy useFirebaseApphaka, aby uzyskać dostęp do połączenia Firebase. Jest to możliwe tylko dlatego, że skonfigurowaliśmy dostawcę Firebase w poprzednim kroku i jest on dostępny tylko w hierarchii, w której został dodany. Na koniec zaimportujemy authbibliotekę, aby móc wywoływać metody Firebase do tworzenia użytkowników i logowania. Jest to wydajny sposób, ponieważ ładujemy tylko tę bibliotekę, a nie inne, takie jak firestorebaza danych NoSQL czy messagingwiadomości i powiadomienia.
Następnie dodamy szybki zaczep do zarządzania naszymi polami wejściowymi:
const useField =() => {
const [ value, setValue ] = useState( '' );
return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };
};I wreszcie pełny komponent, który podzielimy poniżej, aby wskazać najciekawsze fragmenty, te związane z logowaniem i rejestracją w Firebase.
function FirebaseUser ({ action = 'signin' }) {
const email = useField();
const password = useField();
const [ auth, setAuth ] = useState( null );
const [ error, setError ] = useState( '' );
const firebase = useFirebaseApp();
const setReceivedData = data => setAuth( data );
const setReceivedError = error => setError( error.message );
const signIn = e => {
e.preventDefault();
setError( '' );
firebase.auth()
.signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};
const signUp = e => {
e.preventDefault();
setError( '' );
firebase.auth()
.createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};
const manage = 'signin' === action? {
success: `Logged in as ${ auth?.user.email ?? '' }`,
method: signIn,
label: 'Sign In'
}: {
success: `Signed up as ${ auth?.user.email ?? '' }`,
method: signUp,
label: 'Sign Up'
};
return ({
auth? ({ manage.success }
): (<>
{ manage.label }
{
error && { error }
}) }
);
}
export default FirebaseUser;
Najpierw łączymy się z instancją Firebase:
const firebase = useFirebaseApp();Jak wspomniano wcześniej, jest to możliwe, ponieważ wcześniej opakowaliśmy Appkomponent z dostawcą Firebase. Teraz, gdy jesteśmy już podłączeni do Firebase, możemy skorzystać z authfunkcji i wywołać signInWithEmailAndPassword:
const signIn = e => {
e.preventDefault();
setError( '' );
firebase.auth()
.signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};Gdy się powiedzie, ustawi zwrócone dane, a pola formularza zostaną zastąpione
Logged in as ${ auth?.user.email ?? '' }Zwracane dane to duży obiekt o bardzo ciekawych właściwościach, więc warto dodać console.log()do naszej setReceivedData()funkcji, aby zobaczyć, co jeszcze zawiera.
Proces tworzenia użytkownika jest podobny, z wyjątkiem tego, że używamy funkcji createUserWithEmailAndPassword().
Wniosek
Aby przetestować nasz login i rejestrację Firebase, możesz spróbować zalogować się dla nieistniejącego użytkownika, aby zobaczyć błędy. Następnie utwórz użytkownika, a następnie zaloguj się jako użytkownik.
Demo logowania i rejestracji Firebase.
Ciekawostka: Chrome skarży się, że hasło 123456, którego używam do testowania, zostało złamane, co jest prawdą.
Jeśli teraz wrócisz do aplikacji Firebase > Uwierzytelnianie > Użytkownicy, zobaczysz nowego użytkownika (może być konieczne użycie przycisku odświeżania obok Dodaj użytkownika).
Podsumowując, niezbędne kroki w celu zintegrowania Firebase z naszą aplikacją React to:
- skonfiguruj dostawcę Firebase i zapakuj komponent główny (lub katalog główny hierarchii, w którym chcesz go używać)
- Połącz się z dostawcą Firebase za pomocą
useFirebaseApp - korzystaj z funkcji uwierzytelniania!
Sprawdź repozytorium GitHub na https://github.com/eliorivero/firebase-login-sign-up. Jedyną różnicą w tym przypadku jest to, że ładuję klucze do konfiguracji Firebase z pliku .env, aby uniknąć ich publicznego ujawnienia.
Jeśli masz jakieś pytania, daj mi znać w komentarzach poniżej!