Відкритий кодКерівництво для початківцівКод

Як створити логін Firebase і зареєструватися в React

Останнє оновлення Лис 10, 2022

Зміст

Створіть свій додаток Firebase

Встановити залежності Firebase

Налаштуйте постачальника Firebase

Використовуйте компонент Firebase для входу та реєстрації

Налаштуйте вхід у Firebase і зареєструйтеся

Висновок

Firebase — це система, яка пропонує розробникам багато платформ для створення веб-додатків. Одним із важливих елементів програми є створення користувачів і можливість входу в систему. Давайте подивимося, як ми можемо написати повний логін Firebase, але дуже простий у реалізації.

Створіть свій додаток Firebase

Спочатку вам потрібно створити проект програми Firebase, тому перейдіть до консолі Firebase і додайте новий проект. Ви додасте програму сюди.

https://console.firebase.google.com/

Він запустить помічника, який запитає назву проекту.

На наступному екрані вас запитають, чи хочете ви ввімкнути аналітику. Вимкніть його та натисніть кнопку Створити проект. Підготовка вашого проекту займе деякий час, після чого ви отримаєте кнопку «Продовжити », яка переведе вас до огляду проекту.

Тепер вам потрібно додати додаток Firebase до проекту Firebase. Має сенс? Проект Firebase дозволяє містити кілька програм Firebase для iOS, Android, Web і Unity. Наразі давайте створимо веб-програму, оскільки ми будемо використовувати React для створення нашого входу Firebase.

Вам буде запропоновано назвати цю програму, і ви отримаєте ключі, які вам знадобляться для підключення до Firebase. Вони виглядатимуть приблизно так:


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",
};

Ми використовуватимемо ці ключі в нашій програмі React, щоб налаштувати постачальника, який дозволить нам отримати доступ до Firebase у будь-якому компоненті постачальника.

Нарешті, перейдіть до Автентифікація на лівій бічній панелі, вкладка Метод входу та ввімкніть Автентифікацію електронною поштою/паролем.

Усе готово!

Встановити залежності Firebase

Firebase доступний для різних стеків, включаючи JavaScript і Node.js, які ми зараз використовуватимемо. Ми збираємося встановити лише дві залежності за допомогою npm:

firebase, що дозволить нам отримати доступ до таких речей, як authбібліотека, яку ми будемо використовувати для виконання входу та створення нового користувача
reactfire, набір корисних інструментів для роботи з Firebase у React. Ми використовуватимемо їх useFirebaseAppдля підключення до контексту та доступу до Firebase

Давайте встановимо їх за допомогою


npm i firebase reactfire

Структура програми React буде дуже простою, а саме:


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

і вони будуть пов’язані таким чином:

Налаштуйте постачальника Firebase

Давайте напишемо перший файл для входу та реєстрації у Firebase! Нам насправді не потрібно його писати, тому що це слід додати до файлу, де ви видаєте ReactDOM.render(), у нашому випадку це буде 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"
};

Це імпортує FirebaseAppProviderта додає ключі конфігурації, які ви передасте йому. Тепер ви можете обернути кореневий компонент, який у нашому випадку знаходиться Appу постачальника:


ReactDOM.render(, document.getElementById('root')
);

Чудово! Тепер усі наведені нижче компоненти матимуть доступ до Firebase!

Використовуйте компонент Firebase для входу та реєстрації

Давайте напишемо Appкомпонент, куди ми будемо імпортувати та використовувати FirebaseUserкомпонент для створення та входу користувача. Тут немає нічого пов’язаного з Firebase. Ми збираємося запровадити вхід і реєстрацію за допомогою того самого компонента, щоб ви могли побачити, як ми можемо повторно використовувати код, тому в цьому компоненті ми запровадимо пару кнопок, натискання яких відображатиме FirebaseUserв режимі входу або режим реєстрації:

Налаштуйте вхід у Firebase і зареєструйтеся

Для цього ми створимо компонент. Спочатку нам потрібно імпортувати кілька модулів:


import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Ми зробимо useStateкілька речей, від того, чи автентифіковано користувача, до встановлення помилок. Ми збираємося використовувати useFirebaseAppхук для доступу до з’єднання Firebase. Це можливо лише тому, що ми налаштували постачальника Firebase на попередньому кроці, і він доступний лише в ієрархії, де його було додано. Нарешті, ми імпортуємо authбібліотеку, щоб ми могли викликати методи Firebase для створення користувачів і входу. Це ефективний спосіб, оскільки ми завантажуємо лише цю бібліотеку, а не інші, наприклад firestoreдля бази даних NoSQL або messagingдля повідомлень і сповіщень.

Далі ми додамо швидкий хук для керування нашими полями введення:

І, нарешті, повний компонент, який ми розберемо нижче, щоб вказати на найцікавіші частини, пов’язані з входом у Firebase і реєстрацією.

Спочатку ми підключимося до екземпляра Firebase:


const firebase = useFirebaseApp();

Як зазначалося раніше, це можливо, тому що ми раніше обернули Appкомпонент постачальником Firebase. Тепер, коли ми підключилися до Firebase, ми можемо використовувати цю authфункцію та викликати signInWithEmailAndPassword:

Коли це вдасться, він встановить повернуті дані, а поля форми буде замінено на


Logged in as ${ auth?.user.email ?? '' }

Повернуті дані є великим об’єктом із дуже цікавими властивостями, тому варто додати console.log()до нашої setReceivedData()функції, щоб побачити, що ще вона включає.

Процес створення користувача подібний, за винятком того, що ми використовуємо функцію createUserWithEmailAndPassword().

Висновок

Щоб перевірити наш вхід у Firebase і зареєструватися, ви можете спробувати ввійти під ім’ям користувача, якого не існує, щоб побачити помилки. Після цього створіть користувача, а потім увійдіть як користувач.

Демо входу та реєстрації у Firebase.
Цікавий факт: Chrome скаржиться, що пароль 123456, який я використовую для тестування, зламано, і це правда.

Якщо ви тепер повернетеся до програми Firebase > Автентифікація > Користувачі, ви побачите нового користувача (може знадобитися скористатися кнопкою оновлення поруч із пунктом Додати користувача).

Підсумовуючи, основні кроки для інтеграції Firebase у наш додаток React:

налаштуйте постачальника Firebase і оберніть кореневий компонент (або корінь ієрархії, де ви хочете його використовувати)
підключення до постачальника Firebase за допомогоюuseFirebaseApp
використовуйте функції аутентифікації!

Перевірте репозиторій GitHub за адресою https://github.com/eliorivero/firebase-login-sign-up. Єдина відмінність цього полягає в тому, що я завантажую ключі для налаштування Firebase із файлу .env, щоб уникнути їхнього оприлюднення.

Якщо у вас виникли запитання, дайте мені знати в коментарях нижче!

Джерело запису: startfunction.com