Pular para o conteúdo principal

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.

Comentários

  1. Muito bom, mas não tem o código em um repositório git? Gostaria de saber como está o código de seu resource login no back end.

    ResponderExcluir
    Respostas
    1. Fala Khan, na 1ª parte do tutorial eu mostro a configuração do SpringSecurity onde tem toda configuração do Back-end, faça um teste qualquer coisa posta aqui.

      Excluir
  2. Respostas
    1. Tudo bem Jean ?

      http://blog.cvinicius.com.br/2016/11/autenticacao-com-springboot.html

      Excluir

Postar um comentário

Postagens mais visitadas do Blog