AngularJS para Angular 7 e mais ... minha jornada pessoal ❤️☕️

Bem-vindo de volta 👋

Essa é a continuação de muitas histórias que começaram a partir desse primeiro post do Medium.

Aprendendo Angular 7 e mais ... minha jornada pessoal ❤️☕

Visão geral

Quero escrever sobre o Firebase Authentication, mas percebi que há muitas partes para abordar isso. Portanto, preciso dividir isso em histórias menores. Estaremos aprendendo como configurar e construir os componentes do processo de autenticação. Usaremos o Firebase Authentication (login, registro, senha esquecida e confirmação de redefinição). Além disso, aprenda como gravar no Firestore e bloquear esses dados usando regras de segurança.

Por que você está fazendo isso?

Não há escritos em toda a Internet sobre esse conceito?

sim. Consegui encontrar muitos artigos que descrevem como usar signInWithPopup. Ainda não foi possível encontrar tutoriais detalhados sobre como usar signInWithRedirect . Esta é uma das razões pelas quais escolhi escrever isto. Sem falar que é parte da minha jornada que quero documentar.

Vamos dar os primeiros passos e começar a configurar o Firebase / AngularFire 😃

Pré-requisitos

Estou começando esta história presumindo que você criou seu projeto Angular. Se precisar de uma atualização, você sempre pode ler minha história, “ Primeiros passos ”.

Estarei desenvolvendo o projeto que cobri na história, “ Página de Boas-Vindas ”.

Tudo pronto? Ok, vamos começar ...

Configuração do Firebase / AngularFire

A primeira coisa que precisamos fazer é instalar nossos pacotes. Abra um console e execute o seguinte comando:

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

Por que AngularFire ... não posso fazer isso com o Firebase ? Claro que você poderia, mas eu gosto de usar o AngularFire. Ele integra observáveis ​​RxJS e outros padrões reativos com Firebase. Essas coisas não estão disponíveis por padrão no Vanilla Firebase.

Configure o projeto Firebase

Vá para o console do Firebase e clique em seu projeto ou “Adicionar projeto”.

Adicionar Novo Projeto

Siga o assistente de configuração e, quando terminar, receberá uma solicitação para adicionar o Firebase ao seu aplicativo.

Vamos passar por um processo de duas etapas:

Projeto Existente

Se você já tem um projeto criado, você precisará ir para a guia “Geral” em “Configurações do projeto” ... como faço para chegar lá?

Se você já tiver um aplicativo configurado, verá uma tela como a da foto abaixo. Copie as informações do firebaseConfig:

Caso contrário, você verá uma tela como a da foto abaixo. Siga as etapas descritas acima em “Adicionar Novo Projeto”

Adicione credenciais de ambiente do Firebase ao seu projeto

Copiamos as informações do firebaseConfig para a área de transferência. Onde colocamos isso em nosso projeto?

Dentro da pasta src/environments, temos dois arquivos:

• 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>'
   }
}

Agora importe os módulos do Firebase de que precisamos e a referência do ambiente em nosso 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
]

Ramificação do Repositório

Conclusão

Obrigado por reservar um tempo para ler minhas histórias e se você for um seguidor, agradeço ❤️.

Se você gostou deste artigo, considere aplaudir!

A próxima história cobrirá como gerar o HTML / CSS para nossas várias páginas de autenticação. Fique de olho no link.