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

Configurando o bloco de programação

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 "/auth", que durante a execução será concatenado com o domínio da aplicação e obterá o token de acesso do usuário.

No parâmetro Parâmetros, precisamos inserir um objeto com 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 entradas, além das três que ele possui. Na segunda e quarta entrada inserimos as variáveis "username" e "password", respectivamente. Na demais entradas insira os seguintes textos que estão dentro do parêntesis: primeira entrada ({ "username":") ,  terceira entrada (", "password":") e quinta entrada ("}). Essa configuração inicial da função deve estar como a imagem abaixo.

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

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 que verifica se a variável de retorno "item" é do tipo 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 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 na engrenagem do bloco, na janela que for exibida, escolha o formulário no qual o usuário será redirecionado após a autenticação na tela de login. Visto que os projetos web do Cronapp trabalham com o conceito de Single Page Application (SPA), quando o usuário navega entre as páginas da aplicação, alguns elementos presentes na view/home sempre serão exibidos nas demais páginas. Por isso o endereço do formulário que escolhemos no bloco Mudar formulário é segue o formato "#/home/logged/form". No entanto, caso não deseje exibir esses recursos da view/home é possível personalizar esse endereço.

Por fim, após configurar o parâmetro Sucesso 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 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.2). 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, vamos adicionar a função "Auth", criada anteriormente, no evento "Ao clicar" do componente botão (destaque 4).

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/  ). 

Figura 1.2 - Configurações na tela de login

Executando o projeto

Após completar os passos anteriores, salve as alterações e execute o projeto. Na tela de login, preencha os campos com um nome de usuário e senha e faça login na aplicação. Para este exemplo, utilizamos "admin" em ambos os campos (Figura 1.3).

Figura 1.3 - Tela login

Após a autenticação bem-sucedida do usuário, ele é redirecionado para a página personalizada escolhida no bloco Mudar formulário, para este exemplo criamos uma página personalizada de formulário. Como descrito anteriormente, visto que os projetos web do Cronapp trabalham com o conceito de Single Page Application (SPA) a barra de navegação da página inicial é exibida no nosso formulário.

Figura 1.4 - Página personalizada para a qual o usuário é redirecionado após autenticação