Как создать логин Firebase и зарегистрироваться в React
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, чтобы не раскрывать их публично.
Если у вас есть какие-либо вопросы, дайте мне знать в комментариях ниже!