Autenticação de usuários com Firebase

Continuando a série de posts sobre Firebase, hoje venho apresentar mais uma funcionalidade desta plataforma que foi criada com o objetivo de facilitar o desenvolvimento de aplicações web e mobile. Se você ainda não conhece o Firebase, da uma conferida no meu post anterior, onde eu faço uma pequena introdução sobre a plataforma.

Uma das funcionalidades básicas da maioria dos sistemas ou apps é login e autenticação de usuários. Quem já teve a experiência de implementar esta feature em algum sistema sabe quem tem que levar em considerações aspectos como segurança dos dados, criptografia de senhas, registro de usuários, controle de sessão, entre outros. Todos estes requisitos acabam tornando esta funcionalidade complexa de implementar. E porque não, neste caso, recorrer a uma plataforma que pode resolver muitos destes problemas automaticamente para você? É ai que entra o Firebase Auth! Então vamos ao código.

Ativando métodos de autenticação

A primeira coisa a se fazer para começar a utilizar a autenticação do Firebase é ativar os métodos de login que você achar interessante. Para isso basta acessar o seu projeto (se você ainda não criou um projeto no Firebase, eu mostro como faz no meu post anterior, confere lá), e no menu lateral selecionar a opção Authentication:

Hoje as opções são: Email/Password, Telefone, Google, Play Games, Facebook, Twitter, Git Hub e Anônimo. Nos nossos exemplos hoje vamos utilizar duas: Google e Email/Password.

Após a ativação dos métodos de login podemos começar a codificar o que é necessário para utilizar esta funcionalidade. Lembrando que devemos configurar o Firebase caso ele ainda não esteja configurado no projeto, este passo também foi apresentado no meu primeiro post sobre a plataforma.

Utilizando o Google como provedor de autenticação

A principal vantagem deste método é utilizar toda a estrutura e segurança do Google no gerenciamento dos usuários. Neste caso você não precisa se preocupar em armazenar as senhas do usuário, criptografar informações, ou realizar outras verificações de segurança. Tudo isso já foi feito pelo Google.

Para utilizar este método é necessário inicialmente criar uma instância do provedor, através do código:

const provider = new firebase.auth.GoogleAuthProvider();

Após obter a instância do provedor, podemos utilizar dois métodos de autenticação:

• Através de uma janela que abrirá entro do seu próprio sistema:

firebase.auth().signInWithPopup(provider)

• Através do redirecionamento para o provedor:

firebase.auth().signInWithRedirect(provider)

Ambos os métodos são bem parecidos, o que vai mudar é a forma como tratamos a resposta do servidor:

• Tratamento da resposta do login através da pop-up:

firebase.auth().signInWithPopup(provider).then(result => {
    const token = result.credential.accessToken;
    const user = result.user;
}).catch(error => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = error.credential;
});

• Tratamento da resposta do redirecionamento

firebase.auth().signInWithRedirect(provider);
firebase.auth().getRedirectResult().then(result => {
    if (result.credential) {
        const token = result.credential.accessToken;
    }
    const user = result.user;
}).catch(error => {
    const errorCode = error.code;
    const errorMessage = error.message;
    const email = error.email;
    const credential = error.credential;
});

Em ambos os exemplos, em caso de sucesso, obtemos o token de autenticação e os dados do usuário. Pronto, podemos salvar este token na nossa sessão, salvar os dados do usuário em algum banco de dados para consultas futuras. Desta forma o usuário já está autenticado pelo provedor e pronto para utilizar o sistema. Fácil não é?

Em caso de erro de autenticação conseguimos obter alguns dados como código e mensagem de erro (caso o provedor não consiga autenticar o usuário podemos tratar estas informações e exibir uma mensagem para o usuário), além do próprio e-mail e credenciais utilizadas na tentativa de login que falhou.

Autenticação por e-mail e senha

Tudo bem até agora, mas e se meu usuário não utiliza nenhuma das opções de provedores disponibilizados pelo Firebase? Ele não vai conseguir se autenticar no meu sistema?

Calma, é para estes casos que a plataforma oferece a opção de login via email e senha. Mas para que possamos utilizar esta funcionalidade devemos primeiro registrar o usuário, e podemos fazer isso de duas formas:

• Manualmente pelo console do Firebase: para isso basta acessar o menu Authentication novamente e clicar no botão Add User

Este modelo de cadastro só é recomendado para quando você estiver trabalhando em um sistema muito controlado, com poucos usuários. Você também vai precisar definir uma senha para cada usuário, mas eles podem alterar esta senha futuramente.

• Registro utilizando a api do Firebase: neste caso basta chamar o método “createUserWithEmailAndPassword” passando o e-mail e senha que o usuário digitou:

firebase.auth().createUserWithEmailAndPassword(email, password)
.catch(error => {
    const errorCode = error.code;
    const errorMessage = error.message;
});

Agora que seu usuário já esta cadastrado, podemos utilizar o método “signInWithEmailAndPassword”, passando o email e senha digitados pelo usuário, o código ficaria assim:

firebase.auth().signInWithEmailAndPassword(email, password)
.catch(error => {
    const errorCode = error.code;
    const errorMessage = error.message;
});

Neste caso, se ocorrer algum erro na autenticação, também obtemos o código e mensagem do erro. Já se tudo correr bem durante a autenticação do usuário através deste método, um evento será disparado pelo Firebase, enviando as informações do usuário. Este evento pode ser capturado através do método “onAuthStateChanged”:

firebase.auth().onAuthStateChanged(user => {
    console.log(user)
})

Este objeto “user” também contém algumas informações do usuário, e como no método de login por provedor, pode ser salvo em algum banco de dados de sua preferência.

Conclusão

Neste post vimos como o Firebase pode simplificar o desenvolvimento de requisitos complexos, como autenticação e cadastro de usuários. Através dessa plataforma podemos ficar tranquilos quanto a segurança dos dados de autenticação dos nossos usuários, principalmente se escolhermos algum provedor para realizar este trabalho para nós.

Esta, para mim, é a principal vantagem de se utilizar plataformas de desenvolvimento, como o Firebase. Facilitar a implementação de features complexas, para que nós possamos focar no que realmente é importante para o nosso negócio, ou para a empresa que trabalhamos.

A série sobre o Firebase não termina aqui, ainda existem muitas funcionalidades legais para apresentar, aguardem os próximos posts, até mais.