Когда вы открываете приложение на своем телефоне или переходите на веб-сайт из браузера, контент, который вы видите по умолчанию, - это то, что видят все остальные. Но как только вы войдете в систему или зарегистрируетесь в приложении, вам будет предоставлен контент, основанный на вашей информации, интересах и предпочтениях. Этот процесс аутентификации не только создает индивидуальный пользовательский интерфейс, но также действует как уровень безопасности для пользователей. Никто другой не может получить доступ к вашему профилю без учетных данных, которые вы установили для приложения. Раньше создание такой системы аутентификации было утомительной задачей, но с Firebase это стало намного проще. По сути, вам потребуется не более 5 шагов, чтобы собрать все воедино, и я здесь, чтобы показать вам именно это.

Я опубликую серию статей, посвященных отдельным сервисам Firebase в сочетании с ReactJS, чтобы вы получили представление о том, как их практически использовать во всех своих проектах.

Шаг 1. Настройте проект React + Firebase.

Шаг 2. Включение типа служб аутентификации, которые вы будете использовать, в консоли Firebase. (В этой статье мы будем использовать обычный логин «Электронная почта + пароль».)

Шаг 3: Создание основных компонентов реакции.

Шаг 4. Использование простых облачных функций, предоставляемых Firebase для аутентификации.

Шаг 1. Настройте свой проект

У меня есть статья, которая поможет вам с настройкой. В нем рассказывается, как настроить простой проект React + Firebase менее чем за 10 минут. Супер просто читать, нажмите здесь.

Шаг 2. Включение служб Firebase

Чтобы включить службы аутентификации, войдите в свою учетную запись Firebase и перейдите в консоль проекта. На вкладке аутентификации нажмите «Метод входа» и включите «Электронная почта / пароль». Вот и все.

Шаг 3. Создание необходимых компонентов React.

Теперь основными элементами, которые мы будем использовать в нашем проекте React, будут:

  • Вход + Регистрация Компонент
  • Домашняя страница (страница отображается после аутентификации пользователя)
  • Файл конфигурации Firebase, полученный на шаге 1.

Компоненты входа / регистрации - это ваши типичные поля ввода + компоненты типа кнопки отправки. Я использовал перехватчики реакции для поддержания состояния полей ввода, но вы можете использовать что угодно для управления своим состоянием.

Откройте его в своем браузере. Они будут выглядеть примерно так (я добавил в приложение базовые стили. Вы можете получить их из исходного кода, которым я поделился в конце этой статьи).

Также есть домашняя страница, к которой можно получить доступ после аутентификации пользователя. Это просто текст с кнопкой выхода.

Теперь файл конфигурации firebase, который вы получаете после завершения настройки на шаге 1, экспортирует функцию аутентификации из экземпляра firebase.

export const auth = firebase.auth()

Эта константа аутентификации будет импортирована во все компоненты, которые будут выполнять действия, связанные с аутентификацией. Так что в нашем случае мы будем импортировать его в SignIn, SignUp и Home Page. После того, как вы импортировали функцию auth firebase, вы просто вызываете «createUserWithEmailAndPassword» в случае компонента signUp и «signInWithEmailAndPassword» в случае компонента входа. Это так просто! Это возвращает обещание, поэтому добавьте then или catch для выполнения любых последующих операций. В нашем случае мы будем пользователем главной страницы, поэтому мы используем хук useHistory, предоставляемый «response-router-dom» (если он не установлен, установите его в свой проект, набрав «npm i react -router-dom »). Эту ловушку useHistory можно использовать для отправки маршрутов в экземпляр глобальной истории. Итак, теперь ваши компоненты входа и подписки будут выглядеть следующим образом

Осталась одна мелочь с нашим проектом. Если пользователь аутентифицирован, он / она должен быть перенаправлен непосредственно на домашнюю страницу, а если пользователь не аутентифицирован, то ему / ей не должно быть разрешено переходить на домашнюю страницу, то есть перенаправляться на страницу входа. Вы можете сделать это, используя «onAuthStateChanged», прослушиватель, предоставляемый firebase. Эта функция позволяет вам проверить текущий статус пользователя и на основании этого перенаправить его / ее на страницу входа (если не аутентифицирован) или на домашнюю страницу (если аутентифицирован).

useEffect(() => {
   auth.onAuthStateChanged(user => {
      if (user) history.push('/main')
   })
}, []) // THIS BLOCK SHOULD BE ADDED IN SIGNIN AND SINGUP PAGES

Для этой цели я использовал ловушку useEffect с пустым списком зависимостей, чтобы этот блок кода выполнялся ровно один раз при монтировании.

useEffect(() => {
   auth.onAuthStateChanged(user => {
      if (!user) history.push('/auth');
   })
},[]) // THIS BLOCK SHOULD BE ADDED IN HOME PAGE

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

Если в какой-то момент вы что-то застряли, я привожу исходный код здесь для справки. Я также регулярно размещаю программный контент на YouTube, так что не забудьте посмотреть его здесь. Ваше здоровье!