Autenticação com FirebaseUI no Android

Tendo consciência das vantagens e desvantagens, agora podemos começar a configuração do FirebaseUI.

Você pode conferir mais detalhes sobre a capacidade do FirebaseUI na página de introdução oficial do Firebase.

Pré-requisitos

Neste artigo usaremos o projeto desenvolvido no curso de Firebase Authentication com Android. Se você já tem o projeto, fique à vontade em reutilizá-lo, caso contrário, você pode baixá-lo ou acessar o código fonte via GitHub.

O projeto fornecido não acompanha o arquivo de integração com o Firebase, o google-services.json. Isso significa que ao rodar o App, o Android Studio vai indicar a ausência do arquivo e não vai executar.

Para resolver o problema, você precisa ter ou registrar um App para Android no console do Firebase com o pacote br.com.alura.aluraesporte. Então, basta apenas baixar o arquivo e adicionar dentro do módulo app do projeto.

Caso esteja com dúvida de como fazer a configuração, confira a primeira aula do curso ou consulte a página da documentação do Firebase que explica o passo-a-passo.

Ao rodar o App deve apresentar a seguinte tela:

É importante ressaltar que iremos explorar a autenticação por meio de e-mail e senha, portanto, é necessário configurar o console do projeto do Firebase. Para isso você pode acessar o menu Authentication > Sign-in method para que permita esse tipo de autenticação:

Após preparar todo ambiente, já somos capazes de iniciar a implementação do FirebaseUI no projeto Android.

Adicionando o FirebaseUI no projeto

Como primeiro passo, precisamos ter acesso ao FirebaseUI no projeto. Para isso adicionamos as seguintes dependências:

Como a própria documentação indica, caso queira fazer a autenticação com o Twitter ou Facebook, é necessário adicionar libs separadas também:

Após a adição, basta apenas sincronizar o App para ter o acesso aos componentes do FirebaseUI.

Adicionando os botões de autenticação

Agora que temos o FirebaseUI, precisamos de uma instância de AuthUI que será responsável em controlar todo o fluxo. Para isso, no onViewCreated() do LoginFragment, podemos pegar a instância via método estático da classe AuthUI:

Em seguida precisamos montar a Intent que vai ficar responsável em abrir as telas do fluxo do FirebaseUI, fazemos isso com o método createSignInIntentBuilder() e adicionamos os provedores disponíveis durante o processo de construção:

Note que ele recebe uma lista, ou seja, é possível enviar mais de um provedor de uma vez.

Então precisamos inicializar a Intent, porém, a inicialização da Intent é a partir do método startActivityForResult(), pois ao finalizar a Activity inicializada, precisamos lidar com o retorno:

RC_SIGN_IN é uma constante que identifica a requisição feita pela Intent, você pode colocar o valor Int que preferir, como por exemplo, o 1

Então podemos rodar o App e conferir o que acontece:

Note que não temos mais acesso à nossa tela de Login que fizemos anteriormente!

Testando o fluxo de autenticação e cadastro via e-mail e senha

Apenas com essa implementação temos acesso ao fluxo completo de autenticação via e-mail e senha utilizando o Firebase Authentication como, por exemplo, o cadastro de um usuário inexistente:

Ou a autenticação quando o usuário já existe:

Em ambos os casos, ao abrir o App novamente, que faz a verificação da existência de um usuário logado, entramos diretamente na tela inicial, a lista de produtos.

Para fazer as simulações, você pode deslogar do App :)

Entretanto, esse fluxo natural não acontece após cadastrar ou autenticar com o FirebaseUI... O motivo disso é o fato de que não estamos lidando com a resposta da inicialização da Activity, ou seja, precisamos sobrescrever o onActivityResult() e implementar a devida verificação:

Nessa implementação basicamente identificamos a requisição que foi feita e se obtivermos um código de sucesso, então redirecionamos para a tela da lista de produtos que já faz a verificação da existência de usuário:

Observe que agora o App mantém o comportamento natural durante a autenticação ou no cadastro:

E agora temos uma implementação do fluxo de cadastro e autenticação com e-mail e senha utilizando o FirebaseUI, simples né?

Lidando com os possíveis problemas

Na nossa primeira implementação, simulamos apenas os 'caminhos felizes', quando tudo ocorre como o esperado, e não notamos nenhum comportamento estranho. Porém, em situações que temos uma falha o App volta novamente para a tela de login e sem nenhum feedback para o usuário ou usuária, um comportamento bastante estranho.

Para lidarmos com isso, podemos verificar quando o resultado não é RESULT_OK e identificar o possível problema com a resposta recebida:

TAG é uma constante do tipo String, você pode colocar o valor que preferir para identificar o log, geralmente eu costumo colocar no nome da classe.

Ao testar novamente a autenticação temos a identificação do problema visualmente:

E uma informação mais precisa via logcat:

Nesse caso temos um erro nulo, o que indica que este usuário voltou da tela de autenticação segundo a amostra de código da documentação, inclusive, também é indicado que em casos que não é nulo, é possível verificar o código para identificar o erro:

Adaptando a tela inicial com o FirebaseUI

Um outro ponto importante em relação ao uso do FirebaseUI, é que delegamos toda a responsabilidade de autenticação para ele, ou seja, não faz sentido manter a mesma tela de login que temos quando consideramos o seu uso.

Em outras palavras, é mais conveniente utilizar uma tela que apresente um botão para entrar no App e assim abrir o FirebaseUI:

Essa implementação pode ser feita de várias maneiras, considerando este projeto que utiliza o Navigation, são necessários os seguintes passos:

• Criar um novo destino (Fragment) para a tela de início;
• Implementar a tela (XML de layout);
• Configurar o listener do botão Entrar para abrir o componente do FirebaseUI;
• Migrar a sobrescrita do onActivityResult() da tela de login para a tela de início;
• Configurar o controlador do navigation para acessar a lista de produtos quando a autenticação for sucedida;
• Configurar o Fragment base para redirecionar para a tela de início ao invés da tela de login quando o usuário não estiver autenticado ou quando for deslogado;

Considere esses passos como desafio e tente implementá-los ;)

Caso queira conferir como foi feita toda a implementação do artigo, confira este commit ou o código fonte no repositório do GitHub.

Para saber mais: Possibilidades com o FirebaseUI

A implementação do FirebaseUI desenvolvida durante o artigo é apenas uma parte das possibilidades que essa biblioteca oferece, ou seja, há muitas outras possibilidades e funcionalidades que podem ser exploradas. Caso tenha interesse em saber mais além do conteúdo introdutório visto na documentação, confira o README do projeto via GitHub.