- Created by Wesley Miranda de Oliveira, last modified by Igor Andrade on 12/05/2023
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:
- Habilitar o Imap.
- Ativar autenticação por 2 etapas.
- Gerar senha do App (precisaremos incluir na IDE).
- 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.
Projeto do tipo web ou mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link Criar projeto;
- 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
- 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.
- Insira o e-mail que você configurou para enviar os e-mails de redefinição;
- Insira a senha de app que foi gerada anteriormente.
- Insira um nome de perfil para o e-mail utilizado e escreva novamente o e-mail que será utilizado para o envio.
- 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