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.
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.
- Projeto do tipo web e mobile criado. Caso haja dúvidas de como criar esse tipo de projeto, acesse a documentação Criar projeto.
- 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. 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
.
Figura 2 - Função do bloco de programação configurada
Configurando a tela de login
.
Executando o projeto
.
Nesta página