Переход от AngularJS к Angular 7 и более… мое личное путешествие ❤️☕️

Добро пожаловать обратно 👋

Это продолжение многих историй, начатых с первого поста на Medium.

Изучение Angular 7 и других… мое личное путешествие ❤️☕

Обзор

Я хочу написать об аутентификации Firebase, но понял, что есть много частей, чтобы охватить это. Поэтому мне нужно разбить это на более мелкие истории. Мы научимся настраивать и создавать компоненты процесса аутентификации. Мы будем использовать аутентификацию Firebase (войти, зарегистрироваться, забыть пароль и подтвердить сброс). Кроме того, узнайте, как писать в Firestore и блокировать эти данные с помощью правил безопасности.

Почему вы это делаете?

Разве в Интернете не написано об этой концепции?

Да. Мне удалось найти множество статей, описывающих, как использовать signInWithPopup. Пока не удалось найти подробных руководств по использованию signInWithRedirect . Это одна из причин, по которой я решил написать это. Не говоря уже о том, что это часть моего путешествия, которую я хочу задокументировать.

Мы сделаем маленькие шаги и начнем с настройки Firebase / AngularFire 😃

Предпосылки

Я начинаю этот рассказ, предполагая, что вы создали свой проект Angular. Если вам нужно что-то освежить, вы всегда можете прочитать мой рассказ « Начало работы ».

Я буду развивать проект, описанный в рассказе « Страница приветствия ».

Вы все готовы? Ладно, приступим ...

Настройка Firebase / AngularFire

Первое, что нам нужно сделать, это установить наши пакеты. Откройте консоль и выполните следующую команду:

npm install @angular/fire@^5.1.3 firebase@^5.8.6 --save

Почему AngularFire … я не могу сделать это с Firebase ? Конечно, можно, но мне нравится использовать AngularFire. Он интегрирует наблюдаемые RxJS и другие реактивные шаблоны с Firebase. Эти вещи по умолчанию недоступны в ванильной Firebase.

Настроить проект Firebase

Перейдите в консоль Firebase и щелкните свой проект или «Добавить проект».

Добавить новый проект

Следуйте инструкциям мастера установки, и когда вы закончите, вы получите запрос на добавление Firebase в ваше приложение.

Мы пройдем через двухэтапный процесс:

Существующий проект

Если у вас уже есть проект, вам нужно будет перейти на вкладку «Общие» в разделе «Настройки проекта»… как мне туда попасть?

Если у вас уже есть настроенное приложение, вы увидите экран, подобный изображенному ниже. Скопируйте информацию firebaseConfig:

В противном случае вы увидите экран, подобный изображенному ниже. Выполните шаги, описанные выше в разделе «Добавить новый проект».

Добавьте учетные данные Firebase Environment в свой проект

Мы скопировали информацию firebaseConfig в буфер обмена. Где мы поместим это в наш проект?

Внутри папки src/environmentsу нас есть два файла:

• environment.ts
• environment.prod.ts

export const environment = {
    production: false,
    firebase: {
        apiKey: '<your-key>',
        authDomain: '<your-project-authdomain>',
        databaseURL: '<your-database-URL>',
        projectId: '<your-project-id>',
        storageBucket: '<your-storage-bucket>',
        messagingSenderId: '<your-messaging-sender-id>',
        appId: '<your-app-id>'
   }
}

Теперь импортируйте необходимые модули Firebase и ссылку на среду в наш app.module.ts.

// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
// Environments
import { environment } from '../environments/environment';

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule,
  AngularFireAuthModule,
  SharedModule,
  AppRoutingModule
]

Репозиторий филиал

Заключение

Спасибо, что нашли время, чтобы прочитать мои истории, и если вы являетесь их подписчиком, я благодарен.

Если вам понравилась эта статья, пожалуйста, аплодируйте 👏!

Следующая история расскажет, как сгенерировать HTML / CSS для различных страниц аутентификации. Следите за ссылкой.