Пользовательский интерфейс Angular Material для аутентификации firebase с помощью ngx-auth-firebaseui

ngx-auth-firebaseui

Библиотека пользовательского интерфейса с открытым исходным кодом, позволяющая аутентифицировать пользователя в любом проекте Firebase, созданном для сообщества angular и для него.

Мотивация

В прошлом году я начал разрабатывать несколько проектов с использованием стека MEAN (MongoDB, Express, Angular и NodeJS), и однажды я заметил, что разработка этих приложений занимает немного много времени! Итак, я наткнулся на firebase для перехода от стека MEAN к бессерверным приложениям стека! Firebase действительно классная! Вы можете реализовать функцию аутентификации за считанные минуты, загружать файлы, не беспокоясь о безопасности… и многое другое!

По этим причинам я начал разрабатывать приложения angular на базе firebase! Общей задачей для каждого проекта была Аутентификация пользователя. Итак, я поискал подходящее решение и нашел firebaseui-web, который разрабатывается и поддерживается командой google / firebase. Это простая библиотека, которая предоставляет пользовательский интерфейс для аутентификации firebase. Однако интеграция firebaseui в проект angular оказалась не такой, как я ожидал! Я не мог просто импортировать модуль в свой проект, чтобы использовать его. Некоторые люди разработали для этого оболочку, но, к сожалению, она решила несколько проблем и породила другие!

Кроме того, firebaseui не поддерживает универсальный рендеринг angular и рендеринг на стороне сервера. Для меня это была хорошая возможность открыть свой первый выпуск на github here # 213. По некоторым причинам они проигнорировали и отклонили вопрос, ответив:

«Рендеринг на стороне сервера не поддерживается и не входит в нашу текущую дорожную карту».

В тот момент я понял, что либо удаление firebaseui из моего проекта, либо реализация другого с нуля может решить и сохранить мое универсальное приложение angular для рендеринга на стороне сервера с помощью NodeJS.

В самом деле, это действительно было мотивацией для разработки альтернативной этой библиотеки, ngx-auth-firebaseui,, поддерживающей рендеринг на стороне сервера, и даже больше функций!

ngx-auth-firebaseui против firebaseui

Давайте подробно рассмотрим некоторые функции ngx-auth-firebaseui.

Регистрация - Зарегистрироваться

Войти

Войдите в систему с помощью google, facebook, twitter или github (необязательно)

Индикатор выполнения входа / подписки

Индикатор надежности пароля

Для этой функции я разработал ngx-material-password-Strength, чтобы указать, насколько безопасен предоставленный пароль. Этот проект был перемещен из ngx-material-password-Strength в @ angular-material-extensions / password-Strength

Забыли / сбросить пароль

Профиль пользователя

1. Проверьте, подтверждена ли электронная почта пользователя
2. Редактировать отображаемое имя пользователя (включая проверку)
3. Редактировать электронную почту пользователя (включая проверку)
4. Редактировать номер телефона пользователя (включая проверку)
5. Удалить аккаунт

Синхронизировать user’auth с Firestore - УДИВИТЕЛЬНАЯ ФУНКЦИЯ

• с гуглом

• анонимно

Готов идти ? Затем выберите свою любимую IDE или редактор и откройте проект angular, чтобы интегрировать красивый материальный пользовательский интерфейс для аутентификации firebase с помощью ngx-auth-firebaseui

Одноранговые зависимости

Этот проект полагается на некоторые внешние библиотеки:

Пропустите соответствующий раздел, если у вас уже установлены одноранговые зависимости.

• @ Angular / cdk и @ angular / material - фреймворк для angular

npm i -s @angular/[email protected] @angular/[email protected]

• @ Angular / flex-layout - сделать пользовательский интерфейс адаптивным с использованием шаблона гибкого макета.

npm i -s @angular/[email protected]

• @ angular / animations - требуется модулю @ angular / material для разрешения веб-анимации.

npm i -s @angular/[email protected]

• @ angular / forms - необходимы для контроллеров форм и проверки ввода

npm i -s @angular/[email protected]

• Angularfire2 - официальная библиотека для firebase и angular
• Firebase - требуется пакетом angularfire2

Установите ngx-auth-firebaseui

npm i -s ngx-auth-firebaseui

После установки вам необходимо импортировать основной модуль:

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';

Остается только указать импортированный модуль в вашем прикладном модуле. Точный метод будет немного отличаться для корневого (верхнего уровня) модуля, для которого вы должны получить код, аналогичный (примечание NgxAuthFirebaseUIModule.forRoot()):

а затем из вашего Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // please do not forget this module
    // Specify the ngx-auth-firebaseui library as an import
    NgxAuthFirebaseUIModule.forRoot({
                    apiKey: 'your-firebase-apiKey',
                    authDomain: 'your-firebase-authDomain',
                    databaseURL: 'your-firebase-databaseURL',
                    projectId: 'your-firebase-projectId',
                    storageBucket: 'your-firebase-storageBucket',
                    messagingSenderId: 'your-firebase-messagingSenderId'
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Другие модули в вашем приложении могут просто импортировать NgxAuthFirebaseUIModule:

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxAuthFirebaseUIModule, ...],
})
export class OtherModule {
}

SystemJS

Примечание. Если вы используете SystemJS, вам следует настроить свою конфигурацию так, чтобы она указывала на комплект UMD. В файле конфигурации systemjs map необходимо указать системному загрузчику, где искать ngx-auth-firebaseui:

map: {
  'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js',
}

Готовим дополнительные вещи

Чтобы ngx-auth-firebaseui отображался правильно, нам необходимо выполнить следующие дополнительные шаги:

• Интеграция материальной темы
• Интеграция значков материального дизайна
• Импортировать ресурсы ngx-auth-firebaseui (svg необходим для поставщиков аутентификации)

Материальная тема

• Вариант первый и самый простой:

Откройте файл styles.css и добавьте следующую строку, чтобы импортировать тему материала по умолчанию, предоставленную пакетом @ angular / material.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Если вы не используете Angular CLI, вы можете включить предварительно созданную тему с помощью элемента <link> в свой index.html. например:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

• Альтернатива - более продвинутый способ - пользовательская тема материала

В каталоге src создайте новый файл scss, например: «ngx-auth-firebaseui_theme»

и вставьте следующий контент:

@import '../node_modules/@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

После этого импортируйте этот файл в свой файл style.css (рекомендуется):

@import "ngx-auth-firebaseui_theme";

или просто добавьте путь к ngx-auth-firebaseui_theme.scss в свой файл angular.json:

“styles”: [
 “src/styles.scss”,
 “src/ngx-auth-firebaseui_theme.scss”
],

Иконки материального дизайна

• Вариант первый и самый простой:

откройте файл index.html и добавьте следующую ссылку для импорта значков:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

• Альтернатива

Установка официального npm-модуля иконок материального дизайна

npm i -s material-design-icons

и импортируйте их в свой angular.json файл

"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

Импортируйте активы ngx-auth-firebaseui

С Angular CLI

• открыть theangular.json file
• добавьте следующее в раздел assets

{
          "glob": "**/*",
          "input": "node_modules/ngx-auth-        firebaseui/dist/assets/",
          "output": "./assets/"
}

• после этого необходимые изображения будут скопированы в каталог ресурсов и станут доступны для приложения.
• наконец, раздел assets должен быть похож на этот - ›

"assets": [
        "assets",
        "favicon.ico",
        {
          "glob": "**/*",
          "input": "node_modules/ngx-auth-firebaseui/dist/assets/",
          "output": "./assets/"
        }
      ]

Без Angular CLI

скопируйте каталог ресурсов в корень вашего проекта, чтобы ваше приложение могло получить необходимые изображения для пользовательского интерфейса. Это пример запроса изображения из библиотеки Request URL:http://localhost:4200/assets/google.svg. Пожалуйста, убедитесь, что изображения будут размещены в нужном месте

Теперь мы готовы к работе!

"Использование"

После импорта библиотеки вы можете использовать ее компоненты, директивы и каналы в своем приложении Angular:

<ngx-auth-firebaseui></ngx-auth-firebaseui>

в вашем шаблоне:

<!-- You can now use the library component in app.component.html  -->
<ngx-auth-firebaseui (onSuccess)="printUser($event)"
                     (onError)="printError()">
</ngx-auth-firebaseui>

в вашем компоненте:

<!-- or simply in the app.component.ts -->
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
class AppComponent {
    printUser(event) {
        console.log(event);
    }
    printError(event) {
        console.error(event);
    }
}

Дополнительно

• Если вам нужно настроить компонент ngx-auth-firebaseui, ознакомьтесь с этими примерами или ознакомьтесь с официальным readme
• Демоверсия уже размещена на хосте от firebase: https://ngx-auth-firebaseui.firebaseapp.com/
• Официальную документацию можно найти здесь.
• Нашли ошибку или вы хотите запросить новую функцию? Пожалуйста, не стесняйтесь! Взносы всегда приветствуются

Резюме

Ранее я рассказывал вам, как я наткнулся на firebase и почему разработал ngx-auth-firebaseui. Затем мы сравнили мою библиотеку с firebaseui и внимательно изучили ее возможности. После этого мы вместе настраиваем все, что нам нужно для запуска ngx-auth-firebaseui, например угловой материал и другие зависимости, тему материала, значки дизайна материалов и ресурсы. Наконец, мы установили и интегрировали библиотеку в наш угловой проект.

Если вам понравился этот проект, поддержите ngx-auth-firebaseui, разместив его здесь на github и поделившись им с друзьями.

Другие угловые расширения материала:

• @ Угловые-расширения-материалы / страницы
• @ Angular-material-extensions / надежность пароля
• @ Angular-material-extensions / faq
• @ Угловые-материалы-удлинители / контакты
• @ Угловые-расширения-материалы / генератор комбинаций
• @ Angular-material-extensions / google-maps-autocomplete

Автор

Энтони Нахас, разработчик программного обеспечения полного стека, имел опыт работы в: #Angular #NodeJS #SSR #MongoDB #Android #Google #Firebase #Docker # Dagger2 #Cordova #Ionic #WEB #APP #PWA.

Github: https://github.com/AnthonyNahas

Twitter: https://twitter.com/ngAnthonyy