Como utilizar o Firebase com Flutter — FlutterFire (Parte 3)

FlutterFire Auth — Phone

Autenticar com recurso a email/password é sim uma solução prática e reduz bastante o código a ser implementado pelo desenvolvedor, contudo, os utilizadores tendem a sentir-se mais a vontade com uma autenticação pelo número de telemóvel, até porque muitos usam em grande parte do tempo os mesmos e o acesso a este é bem mais prático que ao email em alguns casos.

Como opção temos o Phone Authentication como recurso disponibilizado pelo Firebase para mais uma vez reduzir o código do lado de nossa app e deixar a lógica de autenticação do lado do mesmo.

Este artigo é parte de uma série de artigos relacionados ao FlutterFire que conta com os seguintes artigos:

1. Como utilizar o Firebase com Flutter (Introdução — Configurando o FlutterFire)
2. Como utilizar o Firebase com Flutter (FlutterFire Auth — Email/Password)
3. Como utilizar o Firebase com Flutter (FlutterFire Auth — Phone) (este artigo)
4. Como utilizar o Firebase com Flutter (FlutterFire Auth — Social(Google))
5. Como utilizar o Firebase com Flutter (Cloud Firestore)

A autenticação por meio de número de telemóvel cinge-se nos mesmos princípios que o email/password, ou seja, deve-se ter em conta o pacote no pubspec.yaml. Para demonstração vamos considerar o mesmo projecto.

É importante notar que deve-se habilitar este serviço pela consola do firebase e para configuração do mesmo deve-se seguir passos específicos para cada plataforma, vamos basear-nos apenas no Android para este artigo.

1. Habilitar o serviço de verificação de dispositivos pelo Google Cloud Platform (GCP) de modo a garantir que a biblioteca responsável pelo processo possa sincronizar com o seu projecto. Note que ao criar o projecto no firebase ele pede que haja associação com o GCP, caso não a tenha efectuado pode facilmente aceder ao GCP e adicionar o seu projecto, caso isso tenha sido feita apenas precisa clicar em habilitar.

Biblioteca responsável por realizar a verificação (Android)

2. Adicionar a chave SHA-256 do projecto à consola do firebase, o processo para obter a mesma é o mesmo que para a SHA-1 no momento de criação do projecto. Para adicionar uma chave adicional, basta seguir os passos a seguir:

Ir às definições do projecto

E adicionar mais uma chave (para este caso a chave já foi adicionada)

Depois desta configuração podemos voltar ao projecto Flutter e prosseguir.

A autenticação por meio de número de telemóvel consiste de 4 funções essenciais, sendo

verificationCompleted

Esta permite efectuar a verificação automática do número, mandando a mensagem e retornando a credencial para ter acesso à aplicação, esta função é apenas activada em dispositivos android e é importante lembrar que o telemóvel a receber a mensagem deve ser o mesmo com a aplicação. A implementação seria algo como:

verificationCompleted: (PhoneAuthCredential credential) async {
  return await auth
      .signInWithCredential(credential)
      .whenComplete(() {})
      .then((value) {
    return ['Usuário logado'];
  });
},

verificationFailed

Como o nome sugere, serve para controlar possíveis falhas no processo de verificação, como uso de um código inválido ou excesso da quota de SMS a enviar. A sua implementação seria algo como:

verificationFailed: (FirebaseAuthException e) {
  return ['Validação falhou com o seguinte erro: ${e.message}'];
},

codeSent

Acionada quando o código de verificação é enviado com sucesso ao número fornecido pelo utilizador.

codeSent: (String verificationId, int resendToken) async {
  _verificationId = verificationId;
  return [
    'Efectuou a validação com sucesso\n Insira o código enviado:',
    verificationId,
    resendToken
  ];
},

Esta função possui dois argumento que servem para posterior autenticação, sendo o verificationId que é gerado no momento que a mensagem é enviada ao número do utilizador e o resendToken que serve para usar caso o utilizador tenha alguma dificuldade a receber a mensagem.

codeAutoRetrievalTimeout

Serve para casos em que o envio de SMS falha, ou seja, caso haja erro de timeout no envio. Sua implementação:

codeAutoRetrievalTimeout: (String verificationId) {
  return [verificationId];
});

Até então vimos partes de como lidar com o envio da SMS com o código de confirmação. Seria então necessário receber o número de telemóvel do utilizador para que isto seja possível. Na prática teríamos algo como:

Após a confirmação do número pelo botão, a UI deve permitir ao utilizador inserir o código recebido por SMS, isso se a validação automática não ocorrer.

Após a a inserção e confirmação do mesmo temos o nosso utilizador com acesso a aplicação.

Para este exercício adicionamos uma tela de verificação que apresenta-se acima.

E nosso AuthService conta com dois métodos novos

O projecto já actualizado está disponível pelo github, espero que tire proveito do mesmo e contribua com melhorias em qualquer aspecto.

Espero que tenha aprendido com este artigo e que se tenha divertido enquanto lia.

Obrigado por acompanhar até ao fim e espero por você no próximo artigo.

Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.

Obrigado e até ao próximo artigo!!!