Разработка Back-end для приложения — большая проблема, особенно для front-end разработчика. Вот в этой ситуации firebase пригодится не только для фронтенд-разработчиков, но и для бэкенд-разработчиков. Firebase помогает разработчикам не сосредотачиваться на таких сложных вопросах, как аутентификация пользователей, управление базами данных, сторонние (социальная аутентификация, такая как Facebook, Twitter и API регистрации и входа в Google). В сегодняшней тенденции даже фронтенд-разработчик должен аутентифицировать своих пользователей. Так что в этом сценарии firebase пригодится. Итак, давайте начнем с аутентификации с помощью firebase в приложении React.
Давайте создадим приложение React с помощью команды npm.
Например, «npx create-react-app firebase-authentication»
Давайте теперь настроим firebase. Перейдите на страницу https://firebase.google.com/ и нажмите кнопку Начать.
Затем добавьте проект и дайте имя этому проекту. И продолжить
Вы можете включить Google Analytics, но я не буду использовать его в этом проекте. Создайте проект, и он приведет вас к консоли приложения (вы должны войти в систему, если вы не вошли в систему).
Вот ваша консоль приложения. Нажмите «Аутентификация» на левой панели и настройте метод входа (это может быть вход через Google или адрес электронной почты и пароль).
В этом случае я включил вход в Google и электронную почту/пароль, но мы будем работать над первой аутентификацией на основе электронной почты/пароля (мы внедрим вход в Google в будущем учебнике).
Перейдите к настройкам проекта слева (выделено) и щелкните правой кнопкой мыши значок веб-сайта (выделено), добавьте наш проект в качестве веб-приложения и дайте имя
И нажмите кнопку Зарегистрировать приложение. Скопируйте фрагмент кода отсюда вот так
Сохраните этот файл как firebaseConfig.js, как показано ниже.
Вот и все, настройка firebase завершена. Вернемся к нашему приложению React.
Мы должны добавить узел firebase с помощью команды npm
«npm install — сохранить firebase».
Затемсоздайте файл с именем "Auth.js", что будет выглядеть так
Не бойся. Давайте объясним, что здесь происходит.
Изначально мы импортировали эти два файла
Добавляет firebase в наше приложение React. Затем мы импортировали
Здесь firebaseConfig для инициализации учетных данных firebase для нашего проекта, а последний useEffect объяснит позже, если вы не знакомы с этой функцией.
Переходите к последним частям
firebaseConfig для инициализации учетных данных firebase для нашего проекта.
Затем функциональный компонент Auth(), он имеет четыре функции
Функция 1:
Это функция, которая будет выполняться, когда мы нажимаем кнопку для регистрации пользователя.
Функция 2:
Это функция, которая будет выполняться, когда мы нажмем кнопку выхода, чтобы выйти из системы.
Функция 3:
Это функция, которая будет выполняться, когда мы нажмем кнопку входа, чтобы войти в систему возвращающегося пользователя.
Функция 4:
Наконец, мы определяем сборку javascript в функции useEffect() и внутри функции.
Используется для отслеживания, вошел ли пользователь в систему или нет.
Прямо вперед ха? Удачного кодирования ………………..
