Autenticação

Muitas vezes uma página como a de administração de clientes só deveria ser acessível para usuários que confiamos. Essa confiança acontece através do Data² ID Authentication Strategy. Com ele, é possível proteger uma rota de usuários que não estão autenticados no sistema.

Para isso, vamos precisar:

• Criar uma Data² Registry Table para guardar os dados dos usuários (como email e senha).
• Criar o Data² ID Authentication Strategy ligado a essa tabela.
• Criar uma página de autenticação (Login).
• Configurar o Router Principal para proteger a rota /clientes, que possui a página de administração de clientes, e adicionar a página de Login ao Router Principal.

Criando tabela de usuários

Dê um clique duplo no fundo do Builder, no menu, selecione a aba Registry e clique em Table.

Dê um nome para sua tabela, como Usuarios.

Clique em Schema para configurar os campos que cada usuário terá.

• Adicione um campo email com Component do tipo data2-core-primitives@String.
• Adicione um campo password com Component do tipo data2-core-types@Password.

Clique no + para adicionar um DataSet e dê um nome a ele também, como Usuarios DataSet.

Vamos adicionar um usuário diretamente na tabela, para isso:

• Clique em email e coloque teste@teste.com.br
• Clique em password e coloque 123.

Você irá notar, que o 123 se torna um valor bem diferente disso. Isso acontece pois campos que são data2-core-types@Password são armazenados de forma segura e criptografada.

AuthenticationStrategy

Dê um clique duplo no fundo do Builder, no menu selecione id e clique em Authentication Strategy.

Selecione ele e:

• Habilite o parâmetro Verifier clicando no círculo, e selecione o Usuarios DataSet que acabou de ser criado.

• Clique no parâmetro Credentials, e vamos configurar quais campos serão usados para o usuário se autenticar. Nesse caso, adicione Email e Password.

Criando uma página de Login

Dê um clique duplo no fundo do Builder, no menu selecione ui e clique em Artboard. Dê um nome a esse Artboard de Login.

Desenhe um bloco maior, e três blocos menores dentro dele que serão: campo de email, campo de senha e botão de login.

Selecione os blocos que serão o campo de email e campo de senha, clicando no primeiro bloco, e depois segure SHIFT antes de clicar no segundo para conseguir selecionar múltiplos blocos. Mude ambos de data2-core-primitives@Block para data2-blocks@DataFieldBlock.

Clique em outro bloco para salvar, selecione novamente o campo de email e agora é necessário configurar:

• O parâmetro Dataset do primeiro bloco será o AuthenticationStrategy que foi criado.
• O parâmetro Field será Email.

Para o campo de password:

• O parâmetro Dataset do primeiro bloco será o AuthenticationStrategy.
• O parâmetro Field será Password.
• O parâmetro Type será password, pois quando o usuário digita sua senha, não queremos que a senha fique visível na tela.

Selecione o terceiro bloco, que servirá como botão de Login, e:

• Adicione um texto em Text: Login.
• Centralize o texto habilitando Text Format, selecione a centralização horizontal e a centralização vertical.

• Habilite o parâmetro On Click, no Module selecione o AuthenticationStrategy, na Interaction selecione Login.

Configurando o Router

Selecione o Router criado anteriormente. No parâmetro Login, habilite e selecione o Artboard que foi criado para ser usado como página de login.

Para adicionar autenticação na rota de /clientes, clique em Routes para visualizar as rotas, clique no item que corresponde à rota de /clientes.

Clique em Policies e adicione um item para adicionar uma Policy, clique nesse item e no parâmetro Authentication Strategy selecione seu AuthenticationStrategy. Clique fora para salvar.

Verificando o funcionamento

Dê um preview na sua Application. Você deverá ser levado à sua pagina inicial, e ao tentar navegar para a rota /clientes, ao invés da página de administração de clientes, a página de login deve aparecer em seu lugar!

Tente fazer login com o usuário que foi criado na tabela de usuários (neste caso, teste@teste.com.br com senha 123) e a página de administração de clientes vai aparecer.

Próximos passos

Se você chegou até aqui, você criou uma aplicação para gerenciar seus clientes de forma autenticada, parabéns!

Você percebeu que o usuário só consegue se logar, e não consegue se deslogar? Como desafio, crie um botão de Logout no Artboard de clientes! Dica: O AuthenticationStrategy tem uma Interaction para fazer isso.