Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

Sobre autenticação e tokens

Olá, O curso de AngularJS da alura é muito bom, gostei demais! Mas ainda ficaram algumas dúvidas:

  • Como fazer autenticação? Afinal, não quero qualquer um acessando meus serviços rest fora da minha aplicação.
  • No caso de autenticação via token: qual a melhor forma de gerar esses tokens no backend? , como decodificalos usando angular? , como armazená-los e utilizálos nas requisições seguintes ao login?, como genrenciá-los?

Já pesquisei muito na web, em diversos fórums e não consigo achar respostas para estas perguntas. Seria muito bom se fossem adicionadas como uma aula extra ao curso, ou até mesmo como um novo curso, utilizando JAX-RS no backend e AngularJS no frontend, envolvendo todo esse processo de autenticação. É um tema muito exigido e em alta no mercado, seria muito importante que a alura identificasse como uma necessidade dos seus assinantes.

11 respostas

Oi Cassio! Para autenticação com token você pode usar JWT (json web token). Sua implementação varia de linguagem para linguagem no backend. Por isso esse assunto ao meu ver não estaria no curso de Angular, mas em outro curso. Se eu ensinasse em Java deixaria o cara de c# triste e se ensinasse em nodejs deixaria os outros tristes.

Sobre o papel do Angular, para verificar os tokens você usaria Request interceptors. São interceptadores executados a cada requisição ajax pelo $http e o $resource. Esse sim é um assunto do Angular. Se token não existe redireciona o usuário para outra parcial. Se não quiser usar token pode testar pelo código 401.

O curioso é que você pesquisou e não achou resposta. Pq? Não há uma forma consolidada e isso depende muito da sua aplicação.

Eu entendo perfeitamente sua preocupação é por isso vou passar para a equipe sua sugestão.

Bom dia Flávio, obrigado pela resposta. Da parte de backend, bastaria uma breve explicação de como gerar o GWT e o que incluir nele, mesmo que fosse de forma genérica, de forma que pudesse ser facilmente adaptado para qualquer linguagem. Um exemplo de interceptador seria muito útil, inclusive como decodificar e validar o token. O que eu quis dizer com não encontrei, é que não encontrei uma solução simples e fácil de entender. Cada blog ou site que eu encontrei algo sobre JWT usa uma implementação diferente, e os códigos do lado do Angular estão longos e complexos de serem entendidos e adaptados para minha necessidade. Espero que a alura publique algo a respeito em breve, pq estou quebrando muito a cabeça pra entender esse assunto. Obrigado.

Server: 1 - Recebe requisição e verifica se token existe

2 - Se token não existe devolve 401 como status

3 - Se Existe deixa rolar

Angular: 1 - Se receber 401 direciona tela de login

2 - sempre verifica se existe token no cliente, se não existir e tokens presente (enviado pós login) grava no localstorage

3 - sempre enviar o token que está no localstorage a cada requisição

Como você vai criar , estocar jwt depende de cada Server.

No lado do angular vc usa request interceptors e vai implementar sua lógica.

Exemplo jwt em node

https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens

Request listener em Angular

http://stackoverflow.com/questions/30592628/angularjs-event-listener-on-http-requests

Espero que ajude dentro da sua arquitetura.

Oi Cassio, segue um exemplo de interceptador com angular. Espero muito que te ajude. Fiz o mais simplificado possível:

angular.module('alurapic').factory('meuInterceptor', function($q, $location) {  

    var meuInterceptor = {
        responseError: function(resposta) {
            if (resposta.status == 401) {

// veja documentação para saber como vasculhar o header se deseja procurar um token
              $location.path('/auth'); // aqui o nome de uma rota para parcial de login
            }
            return $q.reject(resposta);
        }
    }

    return meuInterceptor;
});

Você precisa plugar o interceptador no sistema de rotas do Angular:

angular.module('alurapic',['ngRoute', 'ngResource'])
  .config(function($routeProvider, $httpProvider) {

    $httpProvider.interceptors.push('meuInterceptor');

// resto aqui

Esse é o código mais simples para você andar com suas pernas.

Qualquer req ajax passará pelo interceptador. Daí vc pode verificar se o token existe e tals no header (ver doc angular, não lembro de cabeça a propriedade).

A parte de back só o exemplo do node que te passei mesmo.

Abraço

Muito obrigado Flávio. Eu estou desenvolvendo uma pequena aplicação de estudo para tentar colocara isso em prática. Qualquer coisa eu volto ao fórum pra tirar as dúvidas. Só mais uma coisa. Se eu não usar o sistema de rotas do Angular isso não funciona, correto? Pq como eu estou usando tomcat, quando tentei usar rotas não funcionou pq o tomcat é que está cuidando das rotas. Muito obrigado pela atenção e pela ajuda. Abraço.

Rota do client que estou me referindo, não é do Server. As rotas que escolhem qual parcial carregar. Não entendi sua dúvida, eu acho.

É que nessa aplicação que estou fazendo, com tomcat, jax-rs e angular, eu tentei usar o ngroute como ensinado no curso, mas não funcionou, então eu imaginei que seja alguma configuração do tomcat, pois como a aplicação java web no tomcat tem o web.xml que administra os servlets e alguns redirecionamentos, imagino que ele prevaleça sobre as rotas to Angular. Não fui atrás ainda de como resolver isso ainda pois estava tentando primeiro resolver a questão da autenticação.

solução!

A rota do angular é no lado do cliente, não tem relação alguma com o servidor. São coisas totalmente diferentes, rota do angular só serve para saber qual parcial enfiar dentro do ng-view.

Com angular seu server não faz redirecionamentos, ele só serve dados. A lógica de apresentação é todo no cliente.

Não faz sentido usar angular sem rotas no lafo do cliente, deixa de ser single page application e você mata o framework.

Sugiro estudar primeiro sobre single page app antes se se preocupar com token. Inclusive tentar descobrir o que houve que você não conseguiu fazer as rotas funcionarem.

Se você teve problemas foi outra coisa que não faço idéia.

Sem rota bye bye facilidade angular de lidar com token.

Hum..talvez seu problema tenha sido com html5 Mode. Faça um teste novamente mas sem ativar no angular o html5 mode. Use o hash. Só pode ser isso, as rotas devem funcionar .

Muito obrigado Flavio. Tentarei isso e depois digo se deu certo. Abraço

Vou fechar aqui e se funcionar a rota ou dar problema você posta novamente para deixar o Post mais enxuto e facilitar que outros ajudem. Bom estudo Cassio!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software