Привет! Я в миссии, чтобы сделать 100 проектов React.js, заканчивая 8 марта. Пожалуйста, следуйте за моим профилем Dev.to или мой твиттер Для обновлений и не стесняйтесь обращаться, если у вас есть вопросы. Спасибо за вашу поддержку!
Ссылка на сегодняшнее развернутое приложение: Ссылка Ссылка на репо: гадость
Хорошее правило, когда следование наряду с учебниками, которые вы не сделали раньше: попробуйте узнать только одну новую вещь за раз. Это правило довольно хорошо работало для меня, следуя письменным инструкциям из Интернета, особенно потому, что если что-то сломается, то у вас есть только одна вещь, чтобы его винить.
Для этого проекта я последовал вместе с этим Фантастическое написанное руководство На logocket.com из нигерийского блоггера Yusuff faruq. . Я хотел дать ему особый крик, потому что я искал такое учебное пособие в течение длительного времени, который был специфичен для аутентификации в Firebase с React, и это единственное, что я нашел.
Единственное серьезное различие между моим проектом и автором, а автора, а не мой стиль с CSS Cast Waverwind, я решил пойти с Bootstrap, потому что я знаю это лучше, и то, как я могу сосредоточить все свои усилия по обучению на части урока.
Предварительный просмотр сегодняшнего веб-приложения
Обзор проекта
Проект является приложением CRA с простой структурой каталогов: A Компоненты Папка, а Поставщики папка и а firebase.js файл в корне. Папка компонентов имеет Приложение С Войти С Зарегистрироваться , Profilepage , и Сброс пароля Отказ Поставщики Папка имеет один файл- Userprovider.jsx Отказ
Я говорю вам все это, потому что умные программисты уже знают все, что делает это приложение и где его найти, что именно то, как вы хотите, чтобы ваше приложение было выложено. Кроме того, Firebase делает все это так легко с его предварительно созданными функциями JavaScript, что большая из этого предварительно определяется этими методами, и они стоят именно в компонентах реагирования в нашем проекте, где вы ожидаете их.
Реагниальный маршрутизатор
Мы начинаем проект, используя React Router в Приложение компонент. Мы проверяем, есть ли предоставляемый пользователь контекстом, а если не раскрыть Переключатель Это показывает страницу Signin на индексе сайта / или Зарегистрироваться или PasswordReset страницы в зависимости от обстоятельств. Если есть пользователь, мы просто представляем страницу профиля с базовой информацией. Я портировал на фотографию одного из моих любимых актеров, Брайан Кокс, для изображения по умолчанию.
Как я выгляжу, когда просят катить свою собственную аутентификацию.
Большая часть реальной работы в этой заявке происходит в двух файлах – firebase.js Файл, где мы подключаемся к серверам Firebase, аутентифицируются и либо получаем, либо создаем пользовательский документ для новых пользователей для хранения дополнительных данных, таких как их имя пользователя, а также в Userprovider.jsx Файл, где мы создаем компонент для хранения нашего контекста Ractex, создайте приложение Пользователь Состояние и пропустите это состояние любым дочерним компонентам.
Затем мы должны экспортировать Провайдер и импортировать его в App.js Файл, чтобы мы могли обернуть наше приложение в нем. Это создает состояние приложения, где Пользователь опоры доступен везде.
После того, как эти два важных кусочка сделаны, наше приложение сможет на самом деле искать Пользователь в Приложение Компонент, что означает, что если мы аутентифицированы, то будет отображаться страница профиля пользователя.
Firebase
Поскольку новые веб-разработчики идут, я не могу представить, что есть лучшая технология Backend для начала, чем Firebase. Я работал с PHP/MySQL раньше и понравился, как и стартовое место, но Firebase делает все действительно тяжелые вещи, которые вы должны делать на любом другом языке.
Просто посмотрите на некоторые из встроенных функций FireBase (импортируемые через пакет NPM), которые мы использовали в этом приложении.
Некоторые встроенные методы FireBase:
* firebase.initializeapp () – Это принимает данные конфигурации и подключает вас к серверу FireBase. * firebase.auth () – Настраивает аутентификацию FireBase * firebase.firestore () – Настраивает базу данных NoSQL * Firebase.auth. GoogleauthProvider – Настраивает стандартный поток аутентификации Google в качестве возможного маршрута автора * firestore.doc () – Получает ссылку на конкретный документ из базы данных, учитывая параметр поиска в качестве аргумента * firestore.doc (). получить () – Получает все данные из документа * firestore.doc (). Установить () – Устанавливает данные объекта для указанного документа * firestore.doc (). Get (). Данные () – Возвращает все данные из указанного документа в базе данных * firebase.auth (). SigninwithPopup () – Знаки пользователя во всплывающем окне с методом, предоставленным в качестве аргумента * firebase.auth (). Подпись () – Подписать текущий пользователь
Я думаю, что вы получите картину. Firebase действительно легкий. Теперь на три из моих любимых:
* firebase.auth.createuserwithemailandPassword () – делает то, что он говорит, что это делает * firebase.auth.signwithemailandPassword () – делает то, что он говорит оно делает
… и Pièce de résistance:
* firebase.auth (). SendPasswordresetemail () – отправляет пользователю электронное письмо, чтобы сбросить свой пароль, если они забыли их
Никто не делает так легко вставать и бежать с безопасной аутентификацией в так мало времени. В кодировании Bootcamp вы можете провести недели на аутентификацию. В конечном итоге вам нужно будет узнать его, но для строительства приложений, которые безопасны как можно быстрее, это отличная отправная точка.
Заключение
Если вы хотите начать создавать свои собственные веб-приложения и нуждается в системе аутентификации. Там нет быстрее способ сделать это, чем Firebase. Я был очень доволен тем, как это выполняется с реагированием. Реагниальный маршрутизатор означает, что нам нужно только написать пару страниц и хранить ссылки на компоненты, которые нам нужны на разных URL в коммутаторе.
Я буду использовать этот метод снова, когда я продолжаю вниз по путешению, наращиваю несколько программных приложений с помощью бэкэндов Firebase.
Посмотрите на репо и дайте мне знать, что вы думаете!
Оригинал: “https://dev.to/jwhubert91/project-25-of-100-firebase-authentication-in-react-with-context-api-31ei”