Советы по Firebase и Angular
Как управлять входом и регистрацией с помощью аутентификации Firebase.
Правильно управляйте своим пользовательским соединением с аутентификацией Firebase через AngularFire.
Эта статья посвящена управлению входом в систему и регистрацией в приложении с использованием аутентификации Firebase. Разве это не смешно?
Создание целой статьи только для того, чтобы рассказать о том, как позволить пользователю создать учетную запись в нашем приложении или позволить ему войти в систему с аутентификацией Firebase, не должно происходить. Многим это кажется самой простой частью документации Firebase, возможно, они правы 🤷♂️.
Поверьте мне, как бы просто это ни было, многие разработчики сталкиваются с проблемами, когда дело доходит до проверки того, существует ли пользователь уже в Firebase, чтобы избежать конфликтов из-за двух якобы разных учетных записей. Здесь для решения этой проблемы используются несколько методов, и, на мой взгляд, не все из них рекомендуются.
Я сам, пишущий эту статью, столкнулся с такой же проблемой, и некоторые ответы, которые я нашел в Google, меня не порадовали, поэтому я пишу эту статью в надежде предложить вам оптимальное решение, основанное на документации самого Firebase.
Как это решить?
Есть два потока, которые я видел в Интернете для решения этой проблемы, один я называю худшим, а другой лучшим. Я объясню их вам в следующих строках, представив вам метод, против которого я вам не советую, и тот, который я призываю вас использовать, когда вы сталкиваетесь с этой проблемой.
а. Проверьте, находится ли пользователь в Firestore (плохой совет)
В случае логина решение рекомендует подключить пользователя, собрав его электронную почту через форму, чтобы проверить ее в Firestore; если он есть, подключаем его через Firebase Auth, в обратном случае просим создать аккаунт.
В случае регистрации электронная почта пользователя снова извлекается и проверяется в Firestore; если его нет, учетная запись создается; если это так, пользователю сообщается, что электронная почта уже зарегистрирована и что он / она должен либо использовать другой адрес электронной почты, либо войти в систему.
Это, безусловно, пройдет, но вызывает три проблемы:
- С вас будет взиматься плата за это чтение, если в нем нет необходимости.
- Ненужное чтение требует больше терпения, чем у большинства пользователей.
- Плохое управление подключением и регистрацией, когда вы должны использовать систему единого входа, такую как подключение к Google; потому что вы не сможете получить доступ к адресу электронной почты до того, как пользователь войдет в систему и выберет способ подключения.
б. Проконсультируйтесь с Auth, он решение! (Хороший совет)
Как для входа, так и для регистрации используйте аутентификацию Firebase напрямую. В этой части я шаг за шагом представлю вам, что нужно сделать для хорошего управления аутентификацией.
За хорошую презентацию разработаю приложение под кейс. Приложение будет разработано в:
- Angular (v12.2.7) — JavaScript-фреймворк для разработки фронтенд-приложений.
- AngularFire (7.0.4) — официальная библиотека Angular для Firebase.
Чтобы нам было легче понять, я разделю решение на три основных этапа: регистрация, вход в систему и вход в систему с помощью провайдера (в данном случае Google). Я рекомендую вам прочитать документацию по Angular и AngularFire по указанным ссылкам, чтобы ознакомиться с ними.
Установите AngularFire на свой компьютер, выполнив
npm i @angular/fire, но чтобы добавить его в свой проект, вам нужно будет сделатьng add @angular/fire
Инициализация AngularFire в проекте производится через интеграцию AngularFireModule: AngularFireModule.initializeApp(environment.firebase) и для примера я добавил AngularFireAuth и AngularFireAuthGuard для аутентификации.
Я создал сервис, который позволяет нам реализовать различные функции, необходимые для нашего примера.
Немного красоты в этой теме с кодом ниже
б.1. Регистрация (с электронной почтой)
Вот HTML-код страницы, стиль находится глобально в приведенном выше коде (style.css)
Для управления регистрацией по электронной почте и паролю достаточно взять два параметра и затем выполнить метод createUserWithEmailAndPassword. Обещание будет возвращено:
1️⃣ В случае успеха: вы перенаправляете пользователя на нужную страницу; для нас это домашняя страница.
2️⃣ В случае ошибки: у вас есть четыре варианта email-already-in-use , invalid-email, operation-not-allowed и weak-password. Эти четыре возможности также дают вам свободу действий в вашем коде.
b.2.Войти (с электронной почтой)
Вот html-код страницы, стиль находится глобально в коде выше (style.css)
Чтобы управлять соединением на этот раз с помощью электронной почты и пароля, достаточно было бы взять два параметра, а затем выполнить метод signInWithEmailAndPassword. Обещание будет возвращено:
1️⃣ В случае успеха: вы еще раз перенаправляете пользователя на нужную страницу; для нас это домашняя страница.
2️⃣ В случае ошибки: у вас есть четыре варианта invalid-email , user-disabled, user-not-found и wrong-password. Эти четыре возможности дают вам свободный диапазон действий в вашем коде.
б.3. Войти через провайдера
Что касается подключения к провайдеру Firebase, такому как Google, в этом случае вы должны быть очень осторожны. Сначала вам нужно будет реализовать метод, который позволяет вам получить доступ к провайдеру, а затем вызвать его с помощью вашей кнопки; после подключения не стесняйтесь делать то, что хотите.
Но это действие может привести к двум ошибкам: войти как новый пользователь, когда вы уже существуете, или войти как старый пользователь, когда он новый пользователь.
Чтобы решить эту проблему, достаточно проверить подключенного пользователя. Firebase возвращает метаданные для входа, поэтому вы можете сравнить дату создания учетной записи и дату последнего входа в систему; если они равны, это новый пользователь, а если нет, то этот пользователь уже существует в Firebase Authentication.
Примечание. Код этой части можно найти в двух предыдущих.
Последние слова
Я не мог завершить эту статью, рассказав об одном важном элементе, который, по моему мнению, вызывает эту озабоченность. Не следует путать аутентификацию и Firestore, последний позволяет сохранять данные после аутентификации этих пользователей. Конечно, мы используем один и тот же uid, чтобы связать аутентифицированного пользователя и остальные данные, которые мы помещаем в Firestore; мы должны понимать, что ни один пользователь не должен находиться в Firestore без аутентификации.
Если вы хотите более подробно ознакомиться с исходным кодом, он доступен по следующей ссылке
Рекомендации
Дополнительные материалы на plainenglish.io
