Добавление аутентификации пользователя на ваш веб-сайт с помощью Firebase

Почему база данных?

Firebase Authentication — это сервис Firebase, который позволяет вам легко добавить аутентификацию пользователя в ваше приложение React. Это полезно, поскольку позволяет защитить ваше приложение, ограничивая доступ к определенным ресурсам или действиям только для пользователей, прошедших проверку подлинности.

Использование Firebase Authentication в приложении React имеет несколько преимуществ:

  1. Его просто настроить и использовать: с библиотеками и SDK, доступными для различных платформ, включая React, Firebase предоставляет простой и понятный способ добавить аутентификацию пользователя в ваше приложение.
  2. Он предлагает несколько методов аутентификации: Firebase Authentication принимает различные методы аутентификации, включая адрес электронной почты и пароль, номер телефона и социальные сети. Это позволяет вам выбрать метод аутентификации, который наилучшим образом соответствует потребностям вашего приложения.
  3. Это безопасно: Firebase использует стандартные методы обеспечения безопасности, чтобы обеспечить безопасное хранение и передачу пользовательских данных.
  4. Его можно расширять: вам не нужно беспокоиться о создании и обслуживании собственной инфраструктуры аутентификации, поскольку Firebase может обрабатывать миллионы пользователей и миллионы аутентификаций в день.

Создание проекта Firebase

Вы можете создать проект Firebase, выполнив следующие действия:

  1. Перейдите в консоль Firebase.
  2. Выберите опцию «Добавить проект».
  3. Дайте вашему проекту имя и выберите свою страну/регион.
  4. Выберите «Создать проект» в раскрывающемся меню.
  5. Примите условия, прежде чем переходить к кнопке «Создать проект».

Через несколько секунд ваш проект Firebase будет создан. Затем вы можете добавить функции Firebase, такие как аутентификация, база данных в реальном времени и хостинг, в свой проект с помощью консоли Firebase.

Для React-интерфейса:

Добавление аутентификации Firebase в приложение React

Чтобы добавить аутентификацию Firebase в приложение React, вам необходимо выполнить следующие шаги:

  1. Установите Firebase SDK:
npm install firebase

2. Импортируйте модули Firebase и FirebaseAuth в ваш компонент React:

import firebase from 'firebase';
import 'firebase/auth';

3. Инициализируйте Firebase в своем компоненте, вызвав функцию initializeApp и передав объект конфигурации вашего проекта Firebase:

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
});

4. Чтобы зарегистрировать пользователя, вызовите функцию createUserWithEmailAndPassword, передав в качестве аргументов адрес электронной почты и пароль пользователя:

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((user) => {
    // User is signed up
  })
  .catch((error) => {
    // An error occurred
  });

5. Чтобы войти в систему, вызовите функцию signInWithEmailAndPassword, передав в качестве аргументов адрес электронной почты и пароль пользователя:

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((user) => {
    // User is signed in
  })
  .catch((error) => {
    // An error occurred
  });

6. Чтобы выйти из системы, вызовите функцию signOut:

firebase.auth().signOut()
  .then(() => {
    // User is signed out
  })
  .catch((error) => {
    // An error occurred
  });

7. Чтобы проверить, вошел ли пользователь в систему, вы можете использовать функцию onAuthStateChanged, которая отслеживает изменения состояния аутентификации пользователя:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in
  } else {
    // User is not signed in
  }
});

Создание пользовательского хука авторизации

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const useUser = () => {
    const [user, setUser] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(getAuth(), user => {
            setUser(user);
            setIsLoading(false);
        });

        return unsubscribe;
    }, []);

    return { user, isLoading };
}

export default useUser;

Для серверной части узла JS:

Защита конечных точек с помощью токенов авторизации

Firebase предлагает ряд методов для защиты ваших конечных точек, включая использование токенов аутентификации.

Использование встроенных сервисов аутентификации Firebase для аутентификации пользователей с помощью различных провайдеров (например, адрес электронной почты/пароль, Google, Facebook и т. д.) — это один из способов защитить ваши конечные точки. После того как пользователь прошел аутентификацию, вы можете сгенерировать токен аутентификации, который этот пользователь будет использовать при отправке запросов к вашим конечным точкам.

Чтобы использовать токены аутентификации с вашим проектом Firebase, вы должны сначала включить службу аутентификации (электронная почта/пароль, Google и т. д.). После этого вы можете использовать Firebase Authentication SDK для аутентификации пользователей и создания токенов.

import fs from 'fs';
import path from 'path';
import admin from 'firebase-admin';
import express from 'express';
import 'dotenv/config';
import { db, connectToDb } from './db.js';

import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const credentials = JSON.parse(
    fs.readFileSync('./credentials.json')
);
admin.initializeApp({
    credential: admin.credential.cert(credentials),
});

const app = express();
app.use(express.json());
app.use(express.static(path.join(__dirname, '../build')));

app.get(/^(?!\/api).+/, (req, res) => {
    res.sendFile(path.join(__dirname, '../build/index.html'));
})

app.use(async (req, res, next) => {
    const { authtoken } = req.headers;

    if (authtoken) {
        try {
            req.user = await admin.auth().verifyIdToken(authtoken);
        } catch (e) {
            return res.sendStatus(400);
        }
    }

    req.user = req.user || {};

    next();
});

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