Autenticação com Spring Boot, Spring Security e AngularJS - Parte 2

Concluindo a rotina de autenticação, agora iremos criar a camada de frontend, usando o AngularJS.

Criando a Factory

O primeiro processo é criar uma camada para acesso ao serviço de autenticação, o mesmo se encontra na url /login, o código abaixo representa uma factory para encapsular o acesso a camada backend:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

(function(){ angular.module("auth").factory("authAPI", authAPI); authAPI.$inject = ["$http"]; function authAPI($http){ return{ authenticate: function(params){ var req = { url: '/login', method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param(params) }; return $http(req); } }; }; })();

Vamos analisar o código:

• Criamos um factory para encapsular o acesso a camada de backend;
• Linha 5: Injeção do componente $http;
• Linha 11: Declaração na função chamada autheticate, que recebe uma variável chamada params, que contém os dados que serão enviados ao servidor;
• Linha 13: Declaração um objecto com os dados do request (url, method, headers, e data);
• Linha 16: Setamos um header dizendo ao servidor qual o Content-Type que esta sendo encaminhado na solciitação;
• Linha 17:  Encaminhamos a variável params, porém antes utilizamos a função $.param(), isso é necessário devido ao comportamento padrão do AngularJS de sempre encaminhar dados ao servidor em formato JSON, e neste caso, nosso backend espera pelos parâmetros no corpo da solicitação POST;
• Linha 20: Retornamos a promisse.

Criando o Controller

Após a factory é necessário criar o controller, como o abaixo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

(function(){ angular.module("auth").controller("authCtrl", authCtrl); authCtrl.$inject = ["authAPI", "$window"]; function authCtrl(authAPI, $window){ var _self = this; _self.error = false; _self.login = login; _self.credentials = {}; var fnSuccess = function(response){ _self.error = false; //Logica de Redirecionamento $window.location.href = '/app/index.html'; }; var fnError = function(response){ _self.error = true; }; /** * Enviar para o servidor. */ function login(){ authAPI.authenticate(_self.credentials).then(fnSuccess, fnError); }; }; })();

Vamos entender a lógica:

• Criamos um $controller para ser responsável pela manipulação dos dados vindos do frontend;
• Linha 5: Temos a injeção dos componentes authAPI e $window;
• Linha 11: Variável booleana chamada error, este é responsável por exibir a mensagem de erro na página html;
• Linha 13: Criação da variável credentials, que irá armazenar os dados de login/senha;
• Linha 15: Criação de uma function chamada fnSuccess, que contém a lógica em caso de sucesso no login;
• Aqui realizamos o redirect para a página inicial do sistema.
• Linha 22: Criação de uma function chamada fnError, que contém a lógica de falha no login, nesse ponto apenas é setado o valor da variável error para false;
• Linha 30: Chamada ao método da authAPI.

Página HTML

A página html possui os inputs e as diretivas que serão utilizadas para manipular as funções do controller:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<div class="panel-body bg-light" data-ng-controller="authCtrl as auth" data-ng-cloak class="ng-cloak"> <div class="alert alert-danger text-center" data-ng-if="auth.error"> <i class="fa fa-exclamation-triangle"></i> Atenção! Login ou senha inválidos. </div> <form data-ng-submit="auth.login()"> <div class="section row"> <div class="col-sm-12"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-user fa-lg"></i> </span> <input type="text" id="username" name="username" data-ng-model="auth.credentials.username" class="form-control" maxlength="50" placeholder="Digite seu Email de Acesso." /> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-lock fa-lg"></i> </span> <input type="password" id="password" name="password" data-ng-model="auth.credentials.password" class="form-control" maxlength="30" placeholder="Digite sua senha." /> </div> </div> </div> </div> <div class="section row"> <div class="col-sm-12"> <button type="submit" class="btn btn-danger btn-responsive"> <i class="fa fa-paper-plane"></i> <strong>Entrar</strong> </button> </div> </div> </form> </div>

Vamos entender o conteúdo da página html:

• Linha 1: Nesta linha temos a declaração do controller através da diretiva data-ng-controller;
• Linha 2: Temos a declaração da <div class="alert" />, aqui temos a mensagem de erro em caso de falha no login;
• Linha 5: Aqui temos a declaração do <form />, que contém a diretiva data-ng-submit chamando a função de login();
• Linha 13: Aqui temos a tag <input /> com a diretiva data-ng-model associando ao objeto auth.credentials.username;
• Linha 26: Aqui temos a tag <input /> com a diretiva data-ng-model associando ao objeto auth.credentials.password.

Na página html, o design fica a critério do desenvolvedor, os únicos pontos importantes são as informações que serão encaminhadas a API REST de autenticação da lógica de servidor.

Após seguir todos os passos temos um processo de autenticação completo utilizando Spring Boot, Spring Security e AngularJS.

Até próxima.