Автор оригинала: FreeCodeCamp Community Member.
Васим Чехамом
Любое серьезное веб-приложение требует какой-то функции аутентификации. В этом посте в блоге мы настроим эту функцию для углового приложения, используя FireBase, благодаря официальному Angularfire2 библиотека.
Создайте новый проект FireBase
Перед использованием Firebase с нашим приложением нам нужно создать новый проект в нашем Консоль разработчика Firebase :
Чтобы использовать функцию аутентификации FireBase, нам нужно включить поставщики Мы хотим использовать в нашем проекте. В нашем случае мы собираемся использовать Google, Facebook, Twitter и Github, чтобы войти в систему наших пользователей.
Вы можете найти страницу аутентификации в: Ваше приложение → Аут-→ Метод входа:
Некоторые провайдеры, такие как Facebook, Twitter и Github, требуют, чтобы вы предоставляли Приложение/клиент/API ID и App/Client/API Secret ключи и используйте данный ОАУТ УРИ как rirect Uri:
Чтобы получить эту информацию, вам нужно будет создать одно приложение для каждого провайдера, используя учетную запись вашего разработчика каждого сервиса (GitHub, Facebook и Twitter).
Настройте свои услуги
Для Github перейдите к вашему Настройки разработчика и Регистрация новое приложение.
Используйте ваше приложение ID клиента и Секрет клиента На странице конфигурации Firebase.
Вам также нужно заполнить Авторизация Callback URL используя ОАУТ УРИ от firebase.
Для твиттера перейдите к себе Настройки управления приложениями и Создать новый заявление.
Используйте ваше приложение API ключ и API Secret На странице конфигурации Firebase.
Вам также нужно заполнить Обратный вызов URL (На вкладке «Настройки) Использование ОАУТ УРИ от firebase.
Наконец, для Facebook иди к вашему разработчики приложений Главная страница и нажмите на зеленую кнопку «Добавить новое приложение» в правом верхнем углу.
Используйте свой ID приложения и Секрет приложения На странице конфигурации Firebase.
Вам также нужно добавить новую веб-платформу. Нажмите на + Добавить платформу В нижней части страницы и заполните URL сайта с помощью Redirect URI из Firebase (то есть. ОАУТ УРИ ).
Теперь вы готовы использовать Google, Twitter, Github и Facebook в качестве поставщиков аутентификации для вашего веб-приложения.
Используйте Angularfire в вашем приложении
Для следующего шага я собираюсь использовать угловое приложение, которое я легал спасибо благодаря Официальный угловой CLI Отказ
В этом приложении я собираюсь использовать поставщики аутентификации, мы просто создаем на предыдущем шаге.
Вот что выглядит приложение:
Нажав на кнопку, позвонит конкретному провайдеру, аутентифицировать пользователя и получить информацию:
Установить и настроить Angularfire2
Первые вещи сначала нам нужно установить Firebase и Angularfire2 Библиотеки:
$ npm install angularfire2 firebase --save
Тогда нам нужно установить Firebase Типы:
$ npm install @types/firebase
И добавьте эти типы к вашему SRC/TSConfig.json файл:
{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": ["es6", "dom"], "mapRoot": "./", "module": "es6", "moduleResolution": "node", "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", "typeRoots": [ "../node_modules/@types" ], "types": [ "jasmine", "firebase", "node" ] }}Более подробная процесса настройки описана в Официальные документы Отказ
Настройте Angularfire для вашего приложения
Чтобы использовать Firebase с угловым углом, нам необходимо обеспечить некоторую конфигурацию для услуг Angularfire.
Начнем с конфигурации Firebase по умолчанию, которая выглядит так:
defaultFirebase({ apiKey: "AIzaSyCk3weREVFpOIN6pL_QVVNFRl3C3keMIRU", authDomain: "angular2-auth.firebaseapp.com", databaseURL: "https://angular2-auth.firebaseio.com", storageBucket: "angular2-auth.appspot.com"})Примечание: не беспокойтесь об этом выставленном apikey. . Этот ключ используется только для определения различных услуг вашего проекта: своего рода идентификатор проекта.
Вы можете получить свой Firebase apikey , ProjectID, база данных, и Ведро ID с вашей приборной панели.
Нажмите на Web Setup Кнопка в правом верхнем углу:
Далее для нашего применения мы хотим предоставить метод аутентификации по умолчанию:
firebaseAuthConfig({ method: AuthMethods.Popup})Здесь мы решили использовать Всплывающее окно Чтобы позволить пользователю войти в систему. Мы также могли бы использовать метод перенаправления, как это:
firebaseAuthConfig({ method: AuthMethods.Redirect})Давайте теперь создадим CoreModule. в src/app/core.module.ts где мы будем ставить нашу конфигурацию. Лучшая практика для группировки основных зависимостей в отдельном NGModule по имени Коримодуль Отказ Вот пример такого модуля:
import { BrowserModule } from '@angular/platform-browser';import { HttpModule } from '@angular/http';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { AngularFireModule, AuthMethods, AuthProviders } from "angularfire2";const firebaseConfig = { apiKey: "AIzaSyCk3weREVFpOIN6pL_QVVNFRl3C3keMIRU", authDomain: "angular2-auth.firebaseapp.com", databaseURL: "https://angular2-auth.firebaseio.com", storageBucket: "angular2-auth.appspot.com"};@NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AngularFireModule.initializeApp(firebaseConfig,{ provider: AuthProviders.Google, method: AuthMethods.Popup }) ], exports: [ BrowserModule, ]})export class CoreModule {}Используя его в ваших компонентах
Теперь мы наконец готовы реализовать функцию аутентификации для нашего углового приложения.
Нам нужно ввести Angularfire Сервис в конструкторе компонента:
import { Component } from '@angular/core';import { AngularFire, AuthProviders } from 'angularfire2';@Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css']})export class AppComponent { user = {}; constructor( public af: AngularFire ) { this.af.auth.subscribe(user => { if(user) { // user logged in this.user = user; } else { // user not logged in this.user = {}; } }); }}Angularfire Сервис дает нам auth Свойство, которое реализует наблюдаемый API. Так что это означает, что нам нужно подписаться на это auth свойство для того, чтобы получить состояние аутентификации. А Null Значение означает, что пользователь не вошел в систему.
Давайте добавим пару кнопок в представлении компонента:
Мы будем использовать эти кнопки, чтобы войти в систему и выйти из системы, используя провайдер Google в качестве примера.
В app.component.ts нам нужно реализовать Войти () и Выход () методы:
login() { this.af.auth.login({ provider: AuthProviders.Google });} logout() { this.af.auth.logout();}Чтобы войти в систему, мы называем this.af.auth.login () Способ с использованием провайдера Google и this.af.auth.logout () Чтобы войти в систему.
Angularefire login () Обычно нужен метод аутентификации. В нашем случае он будет использовать метод по умолчанию (I.E. authmethods. Неожиданно возникнуть) Мы настроили на фазе Bootstrap.
Если вам нужно переопределить метод аутентификации при вызове Войти () Метод, просто предоставьте новую конфигурацию авторизации:
login() { this.af.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Redirect });}Как только все будет настроено и работать правильно, мы можем проверить Пользователь Объект, содержащий все жетоны сеанса пользователя, отправленные Google (поставщик аутентификации):
Вы можете получить информацию пользователя такой DisplayName и PhotoRl Формировать Auth.Providedata Вход.
Вот и все! Теперь ваши пользователи могут войти в систему, используя свои учетные записи Google.
Вы можете добавить GitHub и Facebook почти так же.
Смотрите полное рабочее приложение размещены на Firebase или прочитайте полный исходный код на Github Отказ
ManeCinekko/Angular-Firebase-аутентификация Angular-FireBase-аутентификация – угловая демонстрация поставщиков аутентификации Firebase github.com
Советы и ссылки
Следовать @maneCinekko Чтобы узнать больше о веб-платформе.
Оригинал: “https://www.freecodecamp.org/news/angular-2-authentication-made-easy-with-firebase-246c282d9ef8/”