Как мы знаем, веб-приложения представляют собой смесь общедоступных и частных страниц. Мы хотим, чтобы публичные страницы были доступны всем, но мы хотим, чтобы личные страницы были доступны только нашим аутентифицированным пользователям.
Наши реагирующие сайты должны будут обрабатывать перенаправление для неаутентифицированных пользователей, пытающихся получить доступ к частной странице, на место назначения, где им нужно будет войти в систему и пройти аутентификацию. нам также потребуется сохранить и сохранить информацию для входа после успешной аутентификации пользователя.
В этом руководстве мы создадим приложение React, которое будет обрабатывать аутентификацию пользователей. Мы создадим страницу входа, которая будет получать и хранить информацию о пользователе с помощью React Redux.
Если пользователь не прошел аутентификацию и попытается попасть в основной раздел нашего сайта, мы откажем в доступе и перенаправим его на страницу входа, где он получит возможность войти в систему или создать новую учетную запись. Мы достигнем этой функциональности, используя firebase для нашей аутентификации и набор инструментов React Redux для хранения и сохранения нашей информации о пользователе до тех пор, пока пользователь не выйдет из системы.
Прежде чем мы начнем
Сначала нам нужно инициализировать новое веб-приложение React с помощью Create React App. Имя для нашего проекта будет web-authentication-tutorial
Нашим следующим шагом будет установка всех необходимых пакетов, которые нам понадобятся в нашем проекте. В корне нашего проекта запускаем:
yarn add react-router-dom react-hook-form react-redux @reduxjs/toolkit redux-persist redux-thunk react-loader-spinner firebase
Мы не будем вдаваться в подробности о том, что делает каждый из этих пакетов. Но если вы хотите узнать немного больше о React Redux, обязательно ознакомьтесь с нашим блогом Как управлять состоянием с помощью React Redux.
В двух словах, вот для чего будут использоваться эти пакеты.
Пакеты React Redux
Это будет использоваться для хранения и извлечения нашей аутентифицированной информации о пользователе.
React Router дом
Это будет использоваться для реализации динамической процедуры. Это позволит нам отображать страницы и позволит пользователям перемещаться по ним.
Спиннер загрузчика React
Базовый компонент счетчика для индикации состояния загрузки
Firebase
Это будет использоваться для аутентификации и создания наших пользователей
Теперь приступим….
Шаг 1 — настроить навигацию
Первое, что мы хотим сделать, это настроить навигацию для нашего проекта. В корне нашего приложения создадим новую папку и внутри нее создадим наш навигационный компонент:
Путь к папке:src/navigation/Navigation.js
Прежде чем мы сможем использовать нашу навигацию, нам нужно обновить наш файл index.js:
Наконец, нам нужно включить наш навигационный компонент в наш файл app.js:
Прежде чем мы сможем увидеть что-либо с нашей страницы до сих пор. Нам нужно создать несколько страниц…
Шаг 2а — Создайте домашнюю страницу
На этой странице будет просто отображаться наша информация о пользователе и кнопка выхода, позволяющая нашему пользователю выйти из нашего приложения.
Шаг 2b — Создайте страницу входа
Это будет наша страница для аутентификации существующих пользователей. Для этой страницы нам нужно создать несколько компонентов для отображения формы для ввода информации пользователями. Мы будем использовать react-hook-form для обработки нашей формы.
Мы добавим в наш проект новую папку с именем utils
В этой папке мы также создадим новый файл с именем constants.js, где мы установим входные данные для формы входа/регистрации и значения формы по умолчанию, чтобы наш код оставался чистым. .
Путь к папке Utils: src/utils/constants.jsconstants.js:
Путь к папке компонентов формы входа: src/components/form/LoginForm.js‹LoginForm /›:
Путь к папке компонентов формы входа: src/components/form/FormInput.js‹FormInput /›:
И, наконец, наша страница входа будет выглядеть так:
Шаг 3 — Создайте страницу регистрации
Это будет наша страница для аутентификации новых пользователей. Мы будем повторно использовать наши недавно созданные компоненты формы для создания этой страницы.
Это будет выглядеть так:
Шаг 4 — Настройте магазин Redux и наш UserSlice
Нам нужно настроить Redux Store и UserSlice, чтобы хранить информацию о пользователе при аутентификации. Напоминаем, что в этом уроке предполагается, что вы знакомы с тем, что такое redux и что он делает. Поэтому мы не будем вдаваться в подробности об этом пакете. Сегодняшний урок посвящен реализации!
Прежде чем мы продолжим, нам понадобится еще одна папка для хранения всей нашей логики сокращения: src/redux
UserSlice
Наш userSlice будет иметь наши редукторные действия для обработки и хранения информации о пользователе при аутентификации. И очистите нашу информацию о пользователе при выходе.
Путь UserSlice: src/redux/UserSlice.js
Redux Store
В нашем магазине мы внесем в белый список наш UserSlice, чтобы наша информация о пользователе сохранялась до тех пор, пока пользователь не выйдет из системы.
Путь к магазину: src/redux/store.js
Теперь, когда у нас есть все встроенные входы в Redux, мы можем добавить наш Redux-экземпляр в наше приложение, чтобы использовать Redux. Итак, нам нужно обновить наш файл index.js:
Шаг 5 — Инициализация Firebase
Прежде чем мы сможем начать с нашей функции аутентификации, нам нужно настроить наше приложение Firebase. Сначала зайдите в консоль Firebase и следуйте инструкциям по созданию нового приложения Firebase:
После создания нашего приложения firebase нам нужно добавить нашу конфигурацию firebase в наш проект. Итак, в корне нашего проекта создайте новый файл firebase-config.js и обновите его следующим образом (детали конфигурации вы найдете в консоли firebase):
Шаг 6a — Логика аутентификации
Теперь, когда мы настроили наше приложение firebase и добавили нашу конфигурацию в наш проект. Мы готовы построить нашу логику аутентификации.
Первое, что нам нужно сделать, это создать новую папку, в которой у нас будет наш хук аутентификации для обработки нашего потока аутентификации. Он будет состоять из signInCall , signOutCall и signUpCall
Путь хука аутентификации: src/hooks/useAuthentication.js
Прежде чем мы сможем внедрить эту логику в наше приложение, нам нужно обработать авторизованное/неавторизованное перенаправление, где это необходимо. Мы достигнем этого, создав 2 компонента защиты аутентификации, которые будут охватывать наши элементы маршрута. Что приведет нас к…
Шаг 6b — Защита аутентификации
‹AuthGuard /›:path -› src/guards/AuthGuard.js
Это будет наш компонент защиты аутентификации, который будет возвращать наш частный элемент маршрута при аутентификации и перенаправлять пользователя на экран входа в систему, когда не аутентифицирован
Мы будем использовать встроенную функцию Redux useSelector() для извлечения нашего пользователя из нашего магазина Redux.
‹GuestGuard /›:путь -› src/guards/GuestGuard.js
Этот сторож будет использоваться на нашей странице входа и регистрации. Это позволит пользователям посещать эти страницы без аутентификации. Как только пользователь будет аутентифицирован, он перенаправит его на нашу частную домашнюю страницу. Это также предотвратит повторное посещение пользователями страницы входа после фактической аутентификации пользователя.
Мы также будем использовать встроенную функцию Redux useSelector() для извлечения нашего пользователя из нашего хранилища Redux.
Последнее, что нам нужно сделать для этого шага, это обновить наши маршруты, чтобы они были обернуты нашими вновь созданными охранниками, где это необходимо:
Шаг 7 — Реализуйте логику аутентификации
Теперь, когда у нас настроены компоненты защиты. Наконец-то мы можем реализовать нашу логику аутентификации, чтобы позволить нашему пользователю войти в систему или создать новую учетную запись.
Для этого мы будем обновлять нашу страницу входа и регистрации. Мы также добавим состояние загрузки к компонентам формы, которые использовались на наших страницах:
Осталось последнее обновление, которое мы должны внести на нашу домашнюю страницу. Мы собираемся получить нашего пользователя из нашего магазина Redux и отобразить сохраненную электронную почту пользователя на нашем внешнем интерфейсе. Мы также будем реализовывать вызов Signout для нашей кнопки выхода:
Вот и все! Мы успешно внедрили аутентификацию в наше приложение. Вы заметите, что когда вы успешно войдете в систему и попытаетесь посетить страницу входа, вы будете перенаправлены обратно на нашу домашнюю страницу. И наоборот, если вы попытаетесь посетить домашнюю страницу без аутентификации, вы будете перенаправлены обратно на экран входа в систему.
Именно то, что искали!!!
Заключительные мысли
Итак, в заключение, сегодня мы узнали все о потоке аутентификации для Интернета с использованием Firebase. Мы также узнали о средствах проверки подлинности, чтобы некоторые из выбранных нами страниц оставались закрытыми для аутентифицированных пользователей.
Спасибо за прочтение! Если вы фрилансер и хотите улучшить свою игру по написанию предложений и привлечь больше клиентов, попробуйте Бинго. Зайдите на наш веб-сайт, чтобы узнать больше и начать писать выигрышные предложения уже сегодня.
