A autenticação é um processo fundamental em sistemas de segurança e gerenciamento de acesso, 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/ ) (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. 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 endpoint de autenticação do projeto "/auth", que durante a execução será concatenado com o domínio da aplicação para obter o token de acesso do usuário. No parâmetro Parâmetros, precisamos passar um objeto 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 três entradas, além das duas que ele possui. Na segunda e quarta entrada inserimos as variáveis "username" e "password", respectivamente. Nas demais entradas insira os seguintes textos:

• Primeira entrada: { "username":"
• Terceira entrada: ", "password":"
• Quinta entrada: "}

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

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". 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 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 abaixo do bloco Adicionar Item na Sessão do navegador e clique na engrenagem do bloco para escolher o formulário no qual o usuário será redirecionado após a autenticação na tela de login. É 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, como a barra de navegação, 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, removendo a rota "/home" do endereço, ficando "#/logged/form".

Por fim, iremos configurar o parâmetro de Erro do bloco Obter conteúdo da URL. 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.

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

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.

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/  ), seguindo os passos da Figura 1.4.

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

Figura 1.5 - 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. 

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