A autenticação é um processo fundamental em sistemas de segurança e gerenciamento de acesso, que visa verificar a identidade de um usuário e direcioná-lo a uma página de navegação específica. Por padrão, no Cronapp, após a autenticação bem-sucedida, o usuário é direcionado automaticamente para a página inicial (view/home) do projeto. No entanto, caso seja necessário, é possível personalizar a rota padrão de redirecionamento no Cronapp, que ocorre após a autenticação.

Neste tutorial, será apresentada uma solução para o processo de autenticação com alteração de rotas em nosso sistema. Isso será útil caso você deseje personalizar a forma de acesso a uma página específica, evitando, após a autenticação do usuário, o redirecionamento padrão para a página inicial (view/home) da aplicação. Essa funcionalidade pode ser utilizada tanto em aplicações web quanto mobile.

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 e mobile criado. Caso haja dúvidas de como criar esse tipo de projeto, acesse a documentação Criar projeto.
2. Criar blocos de programação. Caso haja dúvidas, acesse a documentação Bloco de programação.

Passos

Os passos apresentados são da aplicação web, porém é possível realizar o mesmo procedimento para a aplicação mobile.

Para esse exemplo, criamos um formulário web qualquer com o nome form (Localização: Formulários/Web/Autenticado/

Tooltip
onlyIcon true appendIcon info-circle
Endereço: src/main/webapp/views/logged/form.view,html

) (figura 1.6) no qual o usuário será redirecionado após o login.

Configurando bloco de programação web

Vamos dar início ao nosso tutorial criando a nossa função de bloco de programação do tipo cliente web, no entanto, os mesmos passos podem ser seguidos no tipo mobile. Essa função posteriormente será adicionada ao evento do botão da tela de login. Inicialmente, criamos um arquivo blockly e atribuímos o nome "Auth" à nossa função (Figura 2). Ela será responsável pelo processo de autenticação do usuário e redirecionamento para uma página personalizada. Para configurá-la siga os passos abaixo.

Primeiramente, vamos adicionar dois parâmetros de entrada na função "Auth". Para isso, clique no ícone de engrenagem da função e adicione os parâmetros "username" e "password", que terá por objetivo armazenar as informações de login e senha do usuário.

Em seguida, inserimos na função o bloco Obter conteúdo da URL. No parâmetro Método da requisição desse bloco, selecionamos o verbo HTTP "POST". No parâmetro URL address, inserimos o texto endpoint de autenticação do projeto "/auth", que durante a execução será concatenado com o domínio da aplicação e obterá para obter o token de acesso do usuário. No parâmetro Parâmetros, precisamos inserir passar um objeto com JSON as informações de login do usuário. Por isso, nesse parâmetro adicionamos o bloco Criar objeto e, nele, o bloco criar texto com, em que adicionamos mais duas três entradas, além das três duas que ele possui. Na segunda e quarta entrada inserimos as variáveis "username" e "password", respectivamente. Na Nas demais entradas insira os seguintes textos que estão dentro do parêntesis: primeira entrada (:

• Primeira entrada: { "username":"

) ,  terceira entrada (

• Terceira entrada: ", "password":"

) e quinta entrada (

• Quinta entrada: "}

). Essa configuração inicial da função deve estar como a imagem abaixo.

Image Modified

Figura 1 - Configurando a parte inicial da função web

Os próximos parâmetros do bloco Obter conteúdo da URL que vamos configurar são os de Sucesso e Erro. No parâmetro Sucesso, inserimos o bloco condicional se faça com uma condição É do tipo? que verifica se a variável de retorno "item" é do tipo objeto"Objeto". Em caso negativo, o comando do parâmetro senão do bloco será executado e, assim, será exibida a notificação de erro. Em caso afirmativo, o bloco Adicionar Item na Sessão do navegador irá adicionar os dados do usuário na sessão do navegador . Por isso, configure este e o token de autenticação será armazenado nos Cookies de navegação (chave AuthToken), para mais detalhes, consulte a documentação Segurança. Configure o bloco como mostra a imagem abaixo, no parâmetro Chave insira "_u" e em Valor, o bloco Serializar Objeto com a variável "item".

Em seguida, adicione o bloco Mudar formulário e, clicando abaixo do bloco Adicionar Item na Sessão do navegador e clique na engrenagem do bloco , na janela que for exibida, escolha para escolher o formulário no qual o usuário será redirecionado após a autenticação na tela de login. Visto que os É importante que este formulário possua algum componente e não esteja vazio. Os projetos web do Cronapp trabalham com o conceito de Single Page Application (SPA), por essa razão, quando o usuário navega entre as páginas da aplicação, alguns elementos presentes na view/home sempre, como a barra de navegação, sempreserão exibidos nas demais páginas. Por isso, o endereço do formulário que escolhemos no bloco Mudar formulário é segue  segue o formato "#/home/logged/form". No entanto, caso não deseje exibir esses recursos da view/home é possível personalizar esse endereço, removendo a rota "/home" do endereço, ficando "#/logged/form".

Por fim, após iremos configurar o parâmetro Sucesso parâmetro de Erro do bloco Obter conteúdo da URL, iremos configurar o parâmetro de Erro. Nele, apenas adicionamos o bloco Exibir Notificação, caso ocorra algum erro durante a autenticação do usuário será exibida uma mensagem de erro correspondente. A função configurada deve estar como a imagem abaixo.

Figura 1.1 - Função do bloco de programação web configurada

Configurando bloco de programação mobile

A configuração do bloco de programação mobile segue os mesmos passos do bloco de programação web, com uma única exceção relacionada ao parâmetro URL address (destaque 1 da Figura 1.2) do bloco Obter conteúdo da URL. Neste parâmetro, adicione o bloco criar texto com. Na primeira entrada do bloco criar texto com, adicione o bloco Obter Caminho do Back-End e, na segunda, insira o bloco de texto com o conteúdo "auth". Os demais parâmetros podem ser configurados como na função web.

Image Added

Figura 1.2 - Função do bloco de programação mobile configurada

Configurando a tela de login

Agora iremos configurar a página de login (Localização: Formulários/Web/ 

). Ao abrir a página no editor de views, clique sobre algum componente, no exemplo abaixo, clicamos sobre o componente entrada de texto "Username" (destaque 1 da Figura 1.23). Em seguida, clique no item "form" do breadcrumb da parte inferior da view (destaque 2). Após esta ação, serão exibidas ao lado as propriedades do formulário, na propriedade Enviar (ng-submit), clique no ícone para limpar o campo da propriedade (destaque 3), que deverá ficar vazio. Por fim.

Image Added

Figura 1.3 - Configurações na tela de login

Em seguida, vamos adicionar a função "Auth", criada anteriormente, no evento "Ao clicar" do componente botão, para isso clique sobre o componente (destaque 4 da Figura 1.3). Na aba Eventos, das propriedades do componente, clique no botão “…” (destaque 1 da figura 1.4) do campo Ao Clicar e, na janela que abrir (destaque 2), selecione a função de bloco de programação correspondente. Após esta ação, serão exibidos na tela os parâmetros da função, "username" e "password", na coluna Valor do campo de cada parâmetro, selecione, no campo "Expressão", os valores "username.value" e "password.value", respectivamente (destaque 3). Por fim, após seguir esses passos, clique em OK.

Image Added

Figura 1.4 - Configurando o evento no botão de login

Caso a sua aplicação seja do tipo mobile, o único passo necessário nessa etapa é alterar a chamada da função no evento do botão de login da view mobile (Localização: Formulários/Mobile/ 

). 

Image Removed

, seguindo os passos da Figura 1.