Vamos continuar nossa integração com o Firebase criando nossa aplicação e iremos utilizar o Angular 11 (sua ultima versão no momento em que escrevo este artigo – DEZ/2020).

Possivelmente irei revisitar este projeto quando atualizarem o framework ou até mesmo trazer outros exemplos com o Vue.Js ou o React.

Então vamos iniciar criando um projeto do zero. Basta digitar no command:

Criada nossa aplicação e importado os pacotes do Firebase e o Angular/Fire, vamos implementar o layout de nossa tela de Login.

Vamos criar o serviço que irá fazer a comunicação com o Firebase

Antes de pensarmos em componente, vamos encapsular em um serviço as rotinas de acesso que iremos utilizar.

Lembra daquele código que pegamos no ultimo artigo, o qual criamos lá no console do Google Firebase?

Ok, vamos inclui-lo no arquivo environment.ts, conforme a imagem:

Para isso, use o comando para a criação do serviço, vou chama-lo de Auth, conforme exemplo abaixo:

Como pode notar na imagem abaixo, seu projeto vai ter mais um arquivo dentro da estrutura de pasta src:

Em seguida, vamos criar os métodos para Login e Registro de Usuário, conforme exemplo abaixo:

Vamos ver o que podemos aprender no código anterior

Como pode notar, adicionamos ao serviço a referência às bibliotecas do Angular/Fire, trazendo as rotinas para acesso aos médos Firebase.

Com isso, iremos ter acesso a métodos como createUserWithEmailAndPassword(), signInWithEmailAndPassword() e signOut(), que usaremos para troca entre nossa aplicação e o Firebase.

Existem outros métodos dentro desta classe AngularFireAuth que você pode explorar.

Caso queira ir além, recomendo a documentação do próprio projeto no GitHub do AngularFire.

Criando os componentes de tela para usar as rotinas do Firebase

Vamos criar o componente ou pagina de login. Você pode usar o comando abaixo:

Já deixei criado os demais componentes que iremos utilizar que é o componente para registro do usuário e a pagina de informação do mesmo.

Então vamos construir o layout da pagina de login. Já inclui também a lógica do componente Login, que irei comentar. Vou deixar o código aqui embaixo:

Vamos entender a implementação acima de nosso projeto Angular

A tela e o componente que orquestra suas ações (login-component.ts) não terá referências ao Firebase, uma vez que quem irá fazer este trabalho será o serviço Auth.

Com isso, fica bem mais simples a chamada para o método de Login, bastando apenas acessar o método loginWithEmail() do serviço.

Concluindo

Ao executar o projeto com o comando ng serve, irá ter a tela de login já fazendo a chamada do seu serviço no Firebase.

O layout da tela ficou bem simples, nada muito sofisticado, apenas para entender como funciona a integração:

Nos próximos artigos, irei demonstrar os demais métodos e suas aplicações. Até a próxima semana!