O Google Firebase é um importante aliado no dia a dia na construção de aplicativos móveis em qualquer plataforma que use. Ele é o HUB de serviços do Google e possui recursos como: Storage, Hosting, Functions, Realtime Database, Cloud Firestore e serviço de Autenticação de Usuário.

Cadastro, Login e Recuperação de Senha usando Google Firebase

Autenticar usuário para permitir ou não a entrada no aplicativo é um dos primeiros recursos procurados por desenvolvedores de todas as plataformas e linguagens. A necessidade de segurança e mesmo a oportunidade de abordar o usuário em outro momento faz com que o programador procure implementar logo o sistema de autenticação, seja usando recursos próprios ou de terceiros.

O Google Firebase oferece esse recurso de maneira simples e objetiva, destacando-se por centralizar autenticação por outros meios mais conhecidos do usuário final, tais como autenticação por Facebook ou Gooogle, entre outras.

Também é possível autenticar o usuário usando apenas email e senha, mais simples e objetivo. O Firebase permite que o usuário se cadastre, efetue login e/ou recupere sua senha se a houver esquecido.

Criando a autenticação por email e senha

Nesse artigo veremos como podemos fazer um login usando a plataforma. Em Delphi podemos interagir facilmente com o Firebase e então integrar nosso app a ela, possibilitando o usuário a fazer o seu Cadastro, Login e Recuperação de Senha de modo bastante prático.

Para facilitar nosso trabalho, algumas classes desenvolvidas por um programador Delphi gringo serão baixadas. Elas já contém facilidades para fazer essa integração.

Vejamos:

O primeiro passo então é baixar os arquivos referentes as classes que vamos utilizar em nossos exemplo. Elas podem ser baixadas no link abaixo:

https://github.com/spinettaro/Firebase4Delphi

O que vamos usar basicamente são os arquivos da pasta Source, logo basta baixar os arquivos, incluir no projeto ou em uma pasta global do seu computador e apontar o projeto Delphi para ele adicionando os arquivos:

Aconselho criar um projeto novo mobile utilizando o menu File > New > Multi-Device Application Delphi. Em seguida desenhe um form com uma TabControl e 04 abas. Elas representarão as abas: Login, Main (simulando a tela do seu aplicativo), Cadastro para que o usuário possa se cadastrar no Firebase e Recuperação de Senha, para que o usuário possa solicitar o reset. Veja um exemplo de tela:

Não entrarei em detalhes sobre o fluxo e a programação para mudar de aba, mas é simples. Os campos do login podem ser replicados na janela de Cadastro, modificando apenas o título do botão Entrar para Cadastro. Para mudar de aba basta usar os comandos Next e Previous do TabControl, exemplo:

TabControl.Next();
ou
TabControl.Previous();

Preparando os métodos

Nessa etapa vamos escrever os métodos necessários para fazer as ações que desejamos para o aplicativo, ou seja, Cadastro, Login e Recuperação de Senha. Para isso, localize a seção Public no Delphi e implemente as seguintes rotinas:

procedure CriarContaFirebase;
function DoLogin: Boolean;

Veja que os nomes são auto-explicativos. CriarContaFirebase será responsável por executar as ações necessárias para criar a conta do usuário na plataforma e DoLogin será usado para efetuar o login no Firebase. Pressione Ctrl + Shift + C para gerar os cabeçalhos de métodos. A seguir crie uma nova constante pouco acima da seção Type para que possamos armazenar a Chave API do Google Firebase. Veja o trecho de código abaixo:

[...]
const
  WEB_API_KEY = 'AIzaSyAyQrtx0HpSL_........';

type
  TForm1 = class(TForm)
    TabControl: TTabControl;
[...]

Essa chave será obtida da configuração do projeto no Google Firebase que veremos em seguida. Não se preocupe por enquanto, coloque-a apenas em branco e vamos para o Google Firebase agora fazer nossas configurações.

Configurando o app no Google Firebase

O Firebase trabalha com projetos, isto é, necessário criamos um novo projeto dentro do console do Google Firebase para que então possamos ter acesso aos usuários que se cadastrarão no app. Não vou entrar em detalhes da criação e configuração da conta do Firebase, apenas é necessário entrar no console do serviço através da url:

http://console.firebase.google.com

Acesse o painel usando sua conta do Google registrada e então teremos acesso aos serviços. Caso tenha entrado no site oficial do Firebase (http://firebase.google.com), basta clicar em Ir para o console no canto direito superior.

Pronto! Nessa tela clique em Adicionar Projeto. Você criará um projeto para seu aplicativo mobile. Dê um nome a ele e continue. Na tela seguinte desmarque a opção Ativar o Google Analytics neste projeto ou marque-a e informe a conta do Google irá usar.

Após a criação do projeto, o painel será exibido. Precisamos apenas efetuar por hora 02 configurações.

1. Capturar a API KEY para uso no Delphi
   1. Isso pode ser feito apenas acionando o botão engrenagem ao lado direito da opção “Visão geral do projeto”. Logo em seguida selecione “Configurações do Projeto”.
   2. Encontre o campo “Chave de API da Web” e copie o código.
   3. Insira esse código na constante que criamos anteriormente na preparação do código.
2. O segundo passo é ativar o(s) processo(s) de autenticação que usaremos.
   1. Clique em Authentication à esquerda e em seguida em Sign-in method.
   2. Pare o mouse sobre E-mail/senha e então clique no ícone “Lápis” à direita.
   3. Clique em ativar e salve.

Pronto! Os usuários cadastrados aparecerão na aba Users nessa janela.

Codificando

Agora vamos voltar ao Delphi e escrever os métodos preparados anteriormente. Comecemos pelo método de criação da conta no Google. Atenção porque explicarei o mecanismo apenas nessa etapa, já que as primeiras linha de código serão bastante semelhantes nos demais métodos.

Acesse o método CriarContaFirebase e digite o código abaixo:

procedure TForm1.CriarContaFirebase;
var
  Auth         : IFirebaseAuth;
  AResponse    : IFirebaseResponse;
  JSONResp     : TJSONValue;
  Obj          : TJSONObject;
  ObjError     : TJSONObject;
  LToken       : string;
  ErrorCode    : string;
  ErrorMessage : string;
begin
  Auth := TFirebaseAuth.Create;
  Auth.SetApiKey(WEB_API_KEY);
  AResponse := Auth.CreateUserWithEmailAndPassword(edtCadLogin.Text, edtCadPass.Text);
  JSONResp := TJSONObject.ParseJSONValue(AResponse.ContentAsString);
  if (not Assigned(JSONResp)) or (not (JSONResp is TJSONObject)) then
  begin
    if Assigned(JSONResp) then
      JSONResp.Free;
    exit;
  end;

  Obj := JSONResp as TJsonObject;

  //if Obj.TryGetValue('idToken', LToken) then
  //  MemToken.Lines.Add(LToken);

  if Obj.TryGetValue('error', ObjError) then
  begin
    ObjError.TryGetValue('code', ErrorCode);
    ObjError.TryGetValue('message', ErrorMessage);
    if ErrorMessage.Equals('EMAIL_EXISTS') then
      raise Exception.Create('Esse email já existe')
    else if ErrorMessage.Equals('INVALID_EMAIL') then
      raise Exception.Create('E-mail inválido.')
    else if (Pos('WEAK_PASSWORD', ErrorMessage) > 0) then
      raise Exception.Create('Senha fraca: a senha deve conter ao menos 6 caracteres.');
  end;
end;

Vamos entender um pouco do código, principalmente as 03 primeiras linhas. Elas são responsáveis por instanciar a classe TFirebaseAuth, setar o API key, aquela chave que pegamos dentro do Google Firebase e em seguida chamamos o método CreateNewUserWithEmailAndPassword que vem das Units que baixamos no github. Assim fica bastante simples o trabalho.

[...]
  Auth := TFirebaseAuth.Create;
  Auth.SetApiKey(WEB_API_KEY);
  AResponse := Auth.CreateUserWithEmailAndPassword(edtCadLogin.Text, edtCadPass.Text);
[...]

As duas primeiras linhas serão repetidas em todos os processos, ou seja, Login, Cadastro e Recuperação de Senha.

A resposta do Firebase nós receberemos na variável AResponse em formato JSON, então agora basta analisarmos o resultado e verificar e conseguimos cadastrar ou não o usuário.

Função DoLogin

A função DoLogin fará o processo de enviar o usuário (email) e senha para o Firebase e ele nos retornará se está tudo ok, então podemos permitir que o usuário passe para outra tela do sistema ou receba uma mensagem indicado que há algo errado nas credenciais.

function TForm1.DoLogin: Boolean;
var
  Auth      : IFirebaseAuth;
  AResponse : IFirebaseResponse;
  JSONResp  : TJSONValue;
  Obj       : TJSONObject;
begin
  Result := False;
  Auth := TFirebaseAuth.Create;
  Auth.SetApiKey(WEB_API_KEY);
  AResponse := Auth.SignInWithEmailAndPassword(edt_email.Text, edt_senha.Text);
  JSONResp := TJsonObject.ParseJSONValue(AResponse.ContentAsString());
  try
    if (not Assigned(JSONResp)) or (not (JSONResp is TJSONObject)) then
      Exit(False);

    Obj := JSONResp as TJSONObject;
    Result := Obj.TryGetValue('idToken', FToken);
  finally
    JSONResp.DisposeOf;
  end;
end;

Perceba que o início é semelhante ao método anterior.

O código do botão Login é bem simples. Chamamos o DoLogin e então enviamos para a próxima tela do sistema se estiver tudo ok.

  if not DoLogin then
  begin
    ShowMessage('Não possui conta. E-mail ou senha inválida!');
    exit;
  end;
  TabControl1.Next();

Recuperação de Senha

Optei por codificar diretamente no código do botão, sinta-se livre para criar um método especial para o processo. Ele é relativamente simples. Para solicitar o reset de senha, o usuário do app precisa apenas informar o email. Uma mensagem chegará ao email do usuário para confirmar o reset de senha ou ele simplesmente pode ignorar.

procedure TForm1.Rectangle10Click(Sender: TObject);
var
  Auth         : IFirebaseAuth;
  AResponse    : IFirebaseResponse;
  JSONResp     : TJSONValue;
  Obj          : TJSONObject;
begin
  if edtRecuperarSenha.Text.Equals(EmptyStr) then
  begin
    ShowMessage('Informe o email');
    exit;
  end;

  Auth := TFirebaseAuth.Create;
  Auth.SetApiKey(WEB_API_KEY);
  AResponse := Auth.SendResetPassword(edtRecuperarSenha.Text);
  JSONResp := TJsonObject.ParseJSONValue(AResponse.ContentAsString());
  (* Se desejar fazer algum tipo de teste
  if (not Assigned(JSONResp)) or (not (JSONResp is TJSONObject)) then
  begin
    if Assigned(JSONResp) then
      JSONResp.Free;
    exit;
  end;
  *)
  ShowMessage('Recuperação de senha solicitada.');
  edtRecuperarSenha.Text := EmptyStr;
  MudarTab1.Tab := TabLogin;
  MudarTab1.ExecuteTarget(Sender)
end;

O primeiro bloco evita que o usuário toque em reset de senha sem preencher nenhum email, em seguida instanciamos a classe TFirebaseAuth, setamos a chave e chamamos o método SendResetPassword.

Deixei comentado o trecho de teste do JSON de retorno caso queira usá-lo. Simples não?

Cadastro de Usuário

Por fim o código do cadastro do usuário. É necessário enviar ao Firebase o email e a senha que devem ser cadastrados. Atenção que a senha precisa ter ao menos 6 caracteres, do contrário a menagem WEAK_PASSWORD no JSON de retorno será recebida.

procedure TForm1.Rectangle6Click(Sender: TObject);
begin
  if edtCadLogin.Text.IsEmpty then
  begin
    ShowMessage('Digite um endereço de email.');
    edtCadLogin.SetFocus;
    exit;
  end;

  if edtCadPass.Text.IsEmpty then
  begin
    ShowMessage('Digite uma senha.');
    edtCadPass.SetFocus;
    exit;
  end;

  CriarContaFirebase;
  MudarTab1.ExecuteTarget(Sender);
  ShowMessage('Conta criada com sucesso!');
end;

O restante são as codificações para “andar” de aba em aba, não vou entrar em detalhes sobre isso devido a simplicidade do código.

Conclusão

Como pudemos reparar ao longo do artigo, é bem simples, prático e rápido fazer as devidas configurações e codificações para construir um login personalizado e profissional no Delphi usando o Google Firebase.

Quer aprender um pouco mais sobre o Google Firebase?

No treinamento Introdução a Google Firebase você aprenderá também a usar os recursos Realtime Database e Cloud Firestore, os bancos de dados online do Firebase.

Valor do Investimento
Por apenas R$ 0,32 centavos por dia você terá acesso completo ao meu treinamento. Isso mesmo! R$ 0,32 centavos por dia, isso porque se você adquirir o treinamento por 12x de R$ 9,75 e dividir o valor por 365, mesmo com adição de juros no cartão o valor investido será de apenas R$ 0,32 centavos.

Introdução ao Google Firebase

12x de R$ 9,75

ou

R$ 97,00 à vista

Clique aqui ou no banner abaixo para acessar o Carrinho de Compras.