Обработка пользователей с помощью Angular
При разработке веб-приложений необходима функция аутентификации любого типа.
Если вы думаете о многих социальных платформах и доступных вариантах входа по электронной почте, аутентификация выглядит очень сложной задачей, поэтому разработка с нуля встроенной системы входа в систему заставляет разработчика немного озадачиться объемом работы, которую необходимо выполнить.
Каждое приложение должно хранить данные, поскольку контент - это суть общения и взаимодействия с пользователями. В частности, вам нужно будет хранить данные для поддержки вашей бизнес-логики, и вам понадобится какой-то бэкэнд для обработки аутентификации пользователя.
Firebase предоставляет серверные сервисы, которые значительно снизят сложность обработки аутентификации пользователей с помощью Angular 4+ как для мобильных, так и для веб-приложений. С Firebase аутентификация и все задачи, связанные с серверной частью, могут быть легко реализованы в вашем проекте Angular.
Аутентификация пользователя Firebase
К счастью, есть службы, которые дают нам большие преимущества, например, избавляют нас от тяжелой работы, необходимой для разработки всего процесса аутентификации пользователей. Среди этих систем Firebase и Auth0.
Firebase предоставляет очень простой способ настройки аутентификации в ваших приложениях. Его очень легко интегрировать с вашим приложением, и его можно настроить для использования с несколькими поставщиками социальной аутентификации, такими как Facebook, Google, Github, Twitter и т. Д. За счет интеграции этих поставщиков аутентификации пользователи могут использовать свои существующие социальные учетные записи для выполнения входа в систему. в вашем веб-приложении или мобильном приложении. Он также позволяет пользователям регистрироваться с использованием учетных записей электронной почты и пароля или номера телефона.
Я считаю, что Firebase идеально подходит для ваших веб-приложений или мобильных приложений, разработанных с помощью Angular 5, потому что он предоставляет очень полезные серверные службы, такие как хранилище, база данных в реальном времени, аутентификация и т. Д. Кроме того, он поддерживается Google и предлагает бесплатный многоцелевой сервис. функция аутентификации платформы.
Стоит упомянуть, что база данных Firebase - это база данных, отличная от SQL, которая работает с объектами JSON (без таблиц или записей), где она может хранить и синхронизировать данные между своими пользователями в режиме реального времени.
В этом посте мы рассмотрим, как настроить простой адрес электронной почты / пароль, а также рабочие процессы аутентификации для входа в социальную сеть для приложений Angular 5 с использованием потрясающей библиотеки AngularFire2. AngularFire - официальная библиотека для Firebase и Angular.
Если вы новичок в Angular или хотите освежить некоторые основы, я предлагаю прочитать этот пост:
Пошаговое руководство по аутентификации
В следующем разделе вы узнаете, как разработать веб-приложение на Angular 5, способное обрабатывать социальную и настраиваемую аутентификацию. Мы интегрируем аутентификацию Facebook, Google и Twitter, а также опцию электронной почты и пароля.
Вы также узнаете, шаг за шагом, как разработать систему аутентификации Angular с использованием Firebase в качестве платформы аутентификации.
Вы можете получить весь исходный код в оригинальной статье:
Настройка Firebase в вашем Angular проекте
Чтобы продолжить изучение этого руководства, необходимо сделать следующее:
Создайте и правильно настройте среду разработки, чтобы иметь возможность разрабатывать веб-приложения на Angular 5:
- Установите Nodejs & npm (менеджер пакетов узлов)
- Установите интерфейс командной строки Angular CLI, который позволяет создавать проект angular и облегчает генерацию компонентов.
Создайте проект Angular 5, в который мы интегрируем эту функциональность, или вы также можете загрузить код этого руководства по angular 5 и подключить его к своей учетной записи Firebase.
После настройки среды разработки вы собираетесь создать бесплатную учетную запись Firebase. Для этого перейдите на страницу https://firebase.google.com/ и Войдите в свою учетную запись (или создайте новую). Затем нажмите Перейти к ссылке консоли. На консоли у вас будет возможность создать новый проект Firebase, сделайте это.
После создания проекта firebase вы будете перенаправлены на следующий экран:
Нажмите кнопку Добавить Firebase в свое веб-приложение, и появится всплывающее окно с учетными данными вашего приложения. Всплывающее окно будет содержать следующую информацию о вашем новом приложении Firebase:
Подключите Firebase к вашему проекту Angular
Следующее, что нам нужно сделать, чтобы подключить Firebase к нашему проекту Angular 5, - это добавить учетные данные приложения Firebase сверху в наш проект Angular. Мы добавим эти учетные данные в наш файл конфигурации проекта Angular environment.ts, расположенный в src/environments/environment.ts
Установка AngularFire2
Чтобы подключить веб-приложение Angular 5 к базе данных Firebase, мы будем использовать библиотеку Angular Fire 2, которая является не более чем официальной библиотекой firebase для angular 5. Мы должны установить ее в нашем проекте Angular, чтобы использовать всю аутентификацию Firebase. функции, которые он предоставляет.
Чтобы установить плагин, мы должны запустить следующую команду в нашем проекте Angular:
npm install firebase angularfire2 — save
Затем мы должны импортировать библиотеки Firebase в наш app.module.ts, чтобы мы могли использовать их в нашем проекте Angular. Для этого перейдите в src/app/app.module.ts и добавьте следующий импорт. Мы также должны объявить их в разделе Импорт модулей.
Настройка провайдеров входа в социальные сети Firebase
На этом этапе мы собираемся интегрировать в наше приложение Angular выбранные нами провайдеры входа в социальные сети. В этом руководстве мы включим Google, Facebook и Twitter в качестве параметров входа в социальные сети для нашего примера приложения Angular 5.
Чтобы выбрать методы аутентификации, которые вы хотите интегрировать в свое приложение Angular, перейдите в свой проект Firebase под консолью Firebase, затем перейдите в Разработка = ›Аутентификация и затем щелкните вкладку Метод входа. Более подробные инструкции см. На изображении ниже.
Для каждого провайдера, которого вы хотите включить, вы должны выполнить некоторые шаги по настройке и настройке. Не волнуйтесь, мы поможем вам в этом процессе 😄
Поставщики аутентификации Firebase, такие как Facebook и Twitter, требуют от вас предоставить идентификатор клиентского API и секретный ключ клиентского API, а также использовать предоставленный URI UAuth в качестве URI перенаправления из вашего приложения Facebook или Twitter.
Эта информация получается путем создания приложения для каждого поставщика с использованием учетной записи разработчика каждого поставщика (Facebook и Twitter). Давайте рассмотрим каждую конфигурацию.
Настройка аутентификации Facebook
Чтобы выполнить аутентификацию Facebook в вашем приложении Angular, вы должны создать приложение Facebook на странице разработчика Facebook. Просто следуйте инструкциям по созданию нового приложения.
Как только ваше приложение Facebook будет создано, вы получите идентификатор приложения и секретный ключ приложения. Держите их под рукой, потому что они вам понадобятся позже.
После создания приложения Facebook мы возвращаемся в раздел аутентификации, расположенный в консоли Firebase. Затем мы переходим к методам входа на консоли и включаем опцию Facebook, для этого необходимо добавить идентификатор приложения facebook и секретный ключ приложения, как показано на скриншоте ниже:
Как только Facebook будет включен в качестве входа в систему, автоматически будет сгенерирован действительный URI перенаправления OAuth, который необходимо ввести на панели приложения Facebook, как показано ниже:
Настройка аутентификации Google
Чтобы выполнить аутентификацию входа в социальную сеть Google в вашем приложении Angular, мы переходим в раздел аутентификации, расположенный в консоли Firebase, а затем в метод входа в систему, и мы включаем параметр Google в качестве метода входа без необходимости добавлять какие-либо ключи.
Затем мы должны следовать инструкциям по настройке SHA1 на скриншоте выше.
Настройка аутентификации Twitter
Конфигурация Twitter аналогична конфигурации Facebook. Чтобы выполнить вход в Twitter через социальную сеть в вашем приложении Angular, вам необходимо создать приложение Twitter в консоли управления приложениями Twitter. Просто следуйте инструкциям по созданию нового приложения.
Как только ваше приложение Twitter будет создано, вы получите идентификатор и секретный ключ. Держите их под рукой, потому что они вам понадобятся позже.
После создания приложения Twitter мы возвращаемся в раздел аутентификации, расположенный в консоли Firebase. Затем переходим к методам авторизации на консоли и включаем опцию Twitter, для этого необходимо добавить Twitter API KEY и API SECRET.
После включения необходимо автоматически сгенерировать URL-адрес обратного вызова, который необходимо добавить в приложение Twitter.
Компоненты, шаблоны и маршруты
Наш пример приложения Angular 5 для этого руководства будет состоять из трех компонентов. Каждому компоненту соответствует свой шаблон.
- Компонент входа - здесь будут представлены наши учетные записи в социальных сетях, а также будет предоставлена возможность входить в систему с помощью электронной почты и пароля.
- RegisterComponent - здесь будут представлены наши учетные записи в социальных сетях, а также будет предоставлена возможность создать новую учетную запись с адресом электронной почты и паролем.
- UserComponent - это защищенная область, к которой будут иметь доступ прошедшие аутентификацию пользователи.
Маршруты навигации очень простые. Однако обратите внимание, что у нас есть AuthGuard, который проверяет, есть ли текущий зарегистрированный пользователь, и в этом случае перенаправляет этого пользователя на страницу пользователя. То же самое происходит, когда вы пытаетесь перейти на страницу пользователя, но не вошли в систему, вы перенаправляетесь на страницу входа, потому что у вас нет доступа к странице пользователя.
Служба аутентификации
В этом руководстве Firebase Authentication with Angular 5 мы создали AuthService, который позволит нам входить в систему, регистрировать и выходить из системы пользователей с различными поставщиками Firebase. Вся логика аутентификации будет храниться в этой службе, что позволит нам создавать компоненты, не требующие реализации какой-либо логики аутентификации, и поможет упростить наши компоненты.
Другими словами, наш AuthService сделает большую часть тяжелой работы и является связующим звеном между нашим приложением Angular и Firebase.
Итак, в этом сервисе мы импортируем следующие классы, которые нам нужны для создания наших методов аутентификации:
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';Затем мы добавляем в наш конструктор AuthService следующее:
constructor(public afAuth: AngularFireAuth){}Социальный вход
В нашем AuthService у нас есть функции для выполнения каждого входа в социальную сеть с помощью Firebase. Например, для входа в Facebook мы используем следующий код.
Если вам нужно получить от пользователя дополнительную информацию, например о его дне рождения, вы можете использовать метод addScope. Например: provider.addScope('user_birthday');
Для входа в Google мы указываем дополнительные области OAuth 2.0, которые мы хотим запросить у поставщика аутентификации Google, такие как профиль и адрес электронной почты.
А вот так будет выглядеть наш пример angular 5 :)
Электронная почта / Пароль Войти
Так же, как и с социальными провайдерами, мы должны включить метод входа по электронной почте / паролю в консоли Firebase.
Для этой функции необходимо иметь некоторые базовые знания об Angular Forms, потому что нам нужно создать форму, чтобы пользователь мог ввести свой адрес электронной почты и пароль, а затем отправить его. В этом примере приложения angular мы собираемся использовать реактивные формы, поэтому в нашем шаблоне страницы регистрации у нас есть следующий html-код:
Затем в нашем register.component.ts у нас есть наша tryRegister() функция, которая вызывает AuthService и затем показывает сообщение об успешном выполнении или ошибке.
В AuthService наша doRegister() функция просто вызывает метод аутентификации Firebase createUserWithEmailAndPassword(), используя данные, предоставленные пользователем. Firebase выполняет некоторые проверки этих данных, например, проверяет, содержит ли пароль не менее 6 символов или адрес электронной почты уже связан с другой учетной записью. Если все в порядке, Firebase выполнит обещание, возвращающее новую информацию о пользователе.
Метод входа в систему с использованием электронной почты и пароля очень похож на регистрацию, поэтому мы не будем повторять это снова.
Как только пользователь аутентифицируется, используя любой из предоставленных вариантов аутентификации, он будет перенаправлен на маршрут пользователя, и он увидит на экране некоторую основную информацию, такую как свое имя и изображение. Нажатие кнопки «Выход» приведет к обнулению AuthState и перенаправлению пользователя на экран входа в систему.
Последние мысли
Надеюсь, вы не столкнулись с какими-либо проблемами с этой аутентификацией Firebase с помощью учебника Angular 5, но если вы это сделали, не стесняйтесь оставлять сообщения в разделе комментариев ниже. Помните, что вы можете получить полный исходный код этого приложения Angular в https://angular-templates.io/tutorials/about/firebase-authentication-with-angular
Вот и все, что касается базовой аутентификации с помощью Firebase. Теперь вы можете начать сохранять пользовательскую информацию в Firestore, чтобы создать сложную и надежную систему аутентификации пользователей.
Если вы хотите создать сложное и надежное веб-приложение с помощью Angular 5, вам следует проверить Шаблон администратора Angular, который является наиболее полным и продвинутым шаблоном Angular 5 с большим количеством компонентов и улучшений производительности. Он включает в себя такие функции, как Angular Universal, AOT (предварительная компиляция), Material Design, Lazy Loading Routes, Angular CLI, а также множество полезных компонентов и красивых экранов.
Первоначально опубликовано на angular-templates.io.
