Em poucos passos é possível incluir a redefinição de senha por e-mail em seu projeto. Neste tutorial será ensinado como configurar o sistema de reset de senha utilizando o servidor de e-mail do google (Gmail), todos os servidores de e-mail possuem passos semelhantes para se obter as configurações necessárias para a redefinir a senha por e-mail.

No servidor de e-mail será necessário concluir os passos abaixo para a configuração, são eles:

  1. Habilitar o Imap.
  2. Ativar autenticação por 2 etapas.
  3. Gerar senha do App (precisaremos incluir na IDE).
  4. Inserir os dados obtidos no projeto Cronapp.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

  1. Projeto do tipo web ou mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link Criar projeto;

  2. Acessar e logar no e-mail que será utilizado para enviar a senha de redefinição, no nosso exemplo é utilizado o Gmail.

Passos

Ativar o IMAP

Precisaremos ativar a opção IMAP (Internet Message Access Protocol) que é um protocolo de gerenciamento de correio eletrônico para que seja possível utilizar o servidor de e-mail, com isso, acesse o endereço https://mail.google.com/ para iniciarmos a configuração.


Ao acessar o endereço descrito acima, clique na engrenagem de configuração (1 da figura 1) e em seguida em Ver todas as configurações (2 da figura 1).


Figura 1 - Acessando configurações


Acesse a aba Encaminhamento e POP/IMAP (1 da figura 1.1), após isso, um pouco abaixo, clique em Ativar IMAP (2 da figura 1.1) e clique no botão para salvar as configurações (3 da figura 1.1).


Figura 1.1 - Ativando IMAP

Gerar senha do App

Com o IMAP ativo, o próximo passo será obter a senha do App, onde mais a frente iremos inserir no nosso projeto, mas antes disso, precisaremos ativar a autenticação de 2 fatores, para isso, volte ao endereço principal e clique na sua imagem de perfil (1 da figura 2), e em seguida em Gerenciar sua Conta do Google (2 da figura 2).


Figura 2 - Acessando o gerenciamento de conta do Google


Após abrir a área de gerenciamento, clique em Segurança (1 da figura 2.1), ative a opção de Verificação em duas etapas (2 da figura 2.1) e siga todos os passos solicitados pelo Google. Após ativado, retorne a mesma tela (figura 2.1) e clique no campo de Senhas de app (3 da figura 2.1) que estava oculto antes da configuração em duas etapas.

Se ainda não tiver acesso ao campo Senhas de app (3 da figura 2.1), acesse novamente a opção de Verificação em duas etapas (2 da figura 2.1) e acesse o campo.


Figura 2.1 - Gerando Senha para o app


No campo Selecionar app (1 da figura 2.2), selecione a opção Outro (2 da figura 2.2). 


Figura 2.2 - Selecionando o tipo de app


Em seguida insira um nome para o app (1 da figura 2.3) e clique em Gerar (2 da figura 2.3).


Figura 2.3 - Gerando senha para o app


A senha será exibida dentro do campo em amarelo (1 da figura 2.4), copie e salve a senha em algum lugar para inserirmos posteriormente no projeto, em seguida, clique em Concluído (2 da figura 2.4).


Figura 2.4 - Obtendo a senha e concluindo configuração

Configurando no Cronapp

Agora precisamos configurar a IDE para os envios de e-mail de redefinição, para isso, acesse Projeto > Configurações para abrir a janela de Configurações do Projeto e acesse a aba Configurações de E-mail, as configurações do e-mail irá diferenciar de acordo com o servidor de e-mail utilizado, mas no exemplo, vamos inserir as configurações de acordo com o Gmail (Figura 3).


Para mais detalhes sobre os campos da aba Configurações de E-mail, acesse a documentação Configurações do projeto.


Figura 3 - Configurando IDE para envios de e-mail


  1. O tópico Configurações para Enviar E-mails irá receber os dados de acordo com o servidor utilizado, mas aqui serão inseridas as configurações SMTP de acordo com o Gmail.
  2. Insira o e-mail que você configurou para enviar os e-mails de redefinição;
  3. Insira a senha de app que foi gerada anteriormente.
  4. Insira um nome de perfil para o e-mail utilizado e escreva novamente o e-mail que será utilizado para o envio.
  5. Por fim, clique em Salvar.

Testando o projeto web

Execute o projeto e vá para a tela de login, em seguida clique em Redefinir senha (1 da figura 4), escreva o e-mail do usuário que deseja redefinir (2 da figura 4) e clique em Salvar.


É necessário que exista algum usuário com o e-mail informado, caso contrário, o e-mail não será disparado.


Figura 4 - Solicitação de redefinição da senha


Aguarde até chegar o e-mail de redefinição de senha (Figura 4.1).


Figura 4.1 - E-mail de redefinição de senha


Ao clicar no link de redefinição de senha (figura 4.1), você será redirecionado à tela com os campos para inserir a nova senha e confirmar a nova senha (Figura 4.2)


Figura 4.2 - Tela de redefinição de senha

Testando o projeto mobile

Execute o projeto e em seguida clique em Redefinir senha (1 da figura 5), 


Figura 5 - Solicitação de redefinição da senha


Uma segunda tela será exibida, nela o usuário deverá informar o e-mail para o qual será enviado o token de recuperação de senha (destaque 1 da figura 5.1), este e-mail deve ser de algum usuário que esteja cadastrado na aplicação, não pode ser e-mail de terceiros. Clique em "Enviar" e espere o e-mail com o token de autenticação.


Figura 5.1 - Tela para informar o e-mail de recuperação


Confira na figura abaixo o modelo do e-mail que será enviado ao usuário.


Figura 5.2 - E-mail de redefinição de senha


Com o token de autenticação em mãos, clique no botão "Já possuo um código de autenticação", destaque 2 da figura 5,1. Essa tela apresenta três campos, no primeiro deve-se informar o token recebido por e-mail e nos dois seguintes nova senha e a confirmação da nova senha.


Figura 5.3 - Tela de redefinição de senha

Alterar imagens e texto do e-mail

Para que a imagem do topo e do rodapé do e-mail de redefinição seja alterada, é preciso abrir o bloco servidor UserControl (Localização: Blocos de programação/Servidor ), acessar a função resetPassword e no bloco  Resetar Senha, alterar o endereço dos parâmetros Imagem Topo do E-mail e Imagem Rodapé do E-mail. Para mais detalhes acesse a documentação do bloco Resetar Senha, para aplicações web, e Redefinir Senha com OTP para aplicações mobile  (Localização: Blocos de programação/Mobile/UserControl ), 


Figura 6 - Bloco Resetar Senha


Já o texto do e-mail, pode ser alterado de forma high-code a partir dos templates FTL no diretório resources, acessível apenas com o Modo Avançado habilitado. Confira na figura 6.1.

  • Template em português: src/main/resources/templates/reset-password_pt_BR.ftlh
  • Template em inglês: src/main/resources/templates/reset-password.ftlh


Figura 6.1 - Alterando a mensagem de recuperação de senha


Na figura 6.2 podemos observar que a mensagem do e-mail foi alterada.


Figura 6.2 - E-mail de redefinição de senha alterado

Nessa página

  • No labels