A autenticação é um processo fundamental em sistemas de segurança e gerenciamento de acesso, que visa verificar a identidade de um usuário, dispositivo ou sistema, 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 de um projeto, denominada view/home. No entanto, por meio do uso de blocos de programação, é 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. Essa funcionalidade 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. Para implementar essa personalização, criaremos um bloco cliente web que redireciona o usuário autenticado para uma sessão personalizada, permitindo o acesso à página solicitada. 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 específica, não sendo a página inicial padrão. 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 que obterá algumas informações do usuário logado. No parâmetro Método da requisição desse bloco, selecionamos o método 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, a partir do login e senha, 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, neste bloco 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 primeira, terceira e quinta entrada, inserimos os textos "{ "username" : ""  ,  "password" : "" e ""}", respectivamente. 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" é um 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 a barra de navegação presente na view/home, sempreserá exibida nas demais páginas. Por isso o endereço do formulário que escolhemos no bloco Mudar formulário é do tipo "#/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.

Image Added

Figura 2 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 do "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, clique no componente botão (destaque 4) ...

Image Added

Figura 1.2 - Configurações na tela de login

Executando o projeto

.