Angular Autenticação com Firebase

Vejamos nesse artigo como podemos criar um sistema de autenticação com Angular e Firebase.

Para quem ainda não conhece o Firebase, ele é um (BaaS) Backend-as-a-service que nos disponibiliza um back-end para podermos focar somente no front-end. Caso queira saber mais detalhes sobre ele, segue o link de seu site oficial.

Nosso primeiro passo será a criação de uma aplicação no site do Firebase. Acesse o link do site oficial e siga os passos abaixo:

• Para o acesso, utilize as suas credenciais do Gmail.
• Abra o link https://goo.gl/HbZnbY, e vá até ao console do Firebase.
• Crie um novo projeto. O portal irá solicitar algumas informações como: nome e País/Região. Preencha eles e clique em criar. Em seguida seremos direcionados ao portal com o nosso projeto setado.

Agora precisaremos das credencias do nosso APP. Clique em Adicionar Firebase ao seu aplicativo da Web e salve os dados em um local de fácil acesso.

Agora clique em Authentication no menu lateral e em seguida clique em configurar método de login. Para esse artigo, nós iremos utilizar o e-mail/senha, mas ele nos disponibiliza outras opções conforme podemos ver na imagem abaixo:

Ative ele conforme na imagem acima. Agora nós precisamos configurar a nossa aplicação. Para esse artigo, partiremos de um projeto do Github com as rotas e componentes já criados. Caso também queira utilizar ele, segue o Link no GitHub.

Com o nosso projeto clonado, nós precisamos agora abrir ele em uma IDE para editarmos alguns arquivos. Vamos utilizar o Visual Studio Code, mas você pode utilizar um outro de sua preferência.

Navegando pela estrutura do nosso projeto nós temos:

• Um diretório guards para validarmos se o usuário está autenticado.
• Dois componentes: HomeComponent e LoginComponent.
• Um diretório Model para o nosso User.ts.
• Um diretório Services com: HttpUtil para futuras requisições HTTP e LoginService para comunicação com o Firebase.
• Um arquivo chamado app.routing.ts para configuração das nossas rotas.

Bom, depois de passarmos pelos pontos acima, nós conseguimos dar continuidade ao nosso artigo. Abra o seu arquivo app.module.ts e adicione o seguinte trecho de código nele:

export const firebaseConfig = {
  apiKey: "----",
  authDomain: "-----n",
  databaseURL: "-----",
  projectId: "------",
  storageBucket: "----",
  messagingSenderId: "-----"
};

Preencha ele com os dados que nós salvamos do portal Firebase. Em seguida importe as duas chamadas abaixo:

import { AngularFireModule } from "angularfire2";
import { AngularFireAuth } from "angularfire2/auth";

Agora inicialize o AngularFireModule:

imports: [
BrowserModule,
HttpModule,
routing,
AngularFireModule.initializeApp(firebaseConfig)
],

E adicione os seus providers:

providers: [AuthGuard, HttpUtilService, LoginService, AngularFireModule, AngularFireAuth]

Para verificarmos se tudo esta OK, execute o comando ng serve no seu terminal:

Abra no seu navegador o endereço acima e notem que ele está permitindo acessarmos a rota do nosso componente Home. Volte no seu código e agora descomente a linha 12 do arquivo app.routing.ts. Ele dará um refresh no nosso navegador e seremos direcionados a nossa tela de login.

Nosso próximo passo será adicionar um novo usuário em nosso App. Para isso, vá até o Portal do Firebase ou clique neste link para ser direcionado à página de adicionar usuário:

Eu criei um com meu e-mail e escolhi a senha 102030 para esse exemplo:

Agora vamos criar o nosso service de autenticação. Para isso, abra o seu arquivo login-service.ts. Vamos atualizar ele.

Importaremos a biblioteca do Firebase:

import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';

Crie agora uma nova variável chamada user do tipo Observable

user: Observable<firebase.User>;

Agora precisamos injetar o AngularFireAuth em nosso construtor:

constructor(public afAuth: AngularFireAuth) { 
   this.user = afAuth.authState;
}

Por fim, vamos criar dois novos métodos para o nosso login e logout:

public login(mail: string, password: string) {
return new Promise((resolve, reject) => {
this.afAuth.auth.signInWithEmailAndPassword(mail, password).then((user) => {
localStorage['token'] = user.Yd;
                this.router.navigate(['']);
})
                .catch((error) => {
                    this.router.navigate(['/login']);
                });
        })
            .catch((error) => {
                this.router.navigate(['/login']);
            });
    }
public logout() {
        return this.afAuth.auth.signOut();
    }

No trecho de código acima, temos um método de login que recebe dois parâmetros (email e senha) e valida no portal do firebase através do métodos signInWithEmailAndPassword. Em caso de sucesso, ele direciona para a nossa HomeComponent e em caso de erro, ele direciona para o nosso LoginComponent.

Vamos agora ao nosso LoginComponent injetar o nosso service. Para isso, abra o arquivo login.component.ts e adicione a refêrencia abaixo no seu construtor:

constructor(private loginService: LoginService) {  }

Crie agora um método para passar os dados do nosso template para o nosso service:

logOn(mail, password) {
  this.loginService.login(mail, password);
}

Caso tudo esteja configurado corretamente, teremos o resultado abaixo após o login com as credenciais cadastradas no portal do Firebase.

Caso você queira ver como ficou a versão final desse artigo segue o seu link no GitHub.