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 jak authbiblioteka, której użyjemy do wykonania logowania, a także tworzenia nowego użytkownika
• reactfire, zbiór przydatnych narzędzi do pracy z Firebase w React. Użyjemy ich useFirebaseApp, aby połączyć się z kontekstem i uzyskać dostęp do Firebase

Zainstalujmy je za pomocą

npm i firebase reactfire

Struktura aplikacji React będzie bardzo prosta i wygląda następująco:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

i będą one powiązane w następujący sposób:

Skonfiguruj 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:

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:

I wreszcie pełny komponent, który podzielimy poniżej, aby wskazać najciekawsze fragmenty, te związane z logowaniem i rejestracją w Firebase.

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:

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!