Autenticação AngularJS, a maneira fácil

O AngularJS é uma das estruturas JavaScript mais populares do mundo para criar aplicações de página única. Desenvolvido pelo Google, o Angular fornece uma série de ferramentas que facilitam a conexão das várias peças necessárias para um SPA. Elementos como vinculação de dados bidirecional, solicitações HTTP, modelagem e roteamento são simplificados com a biblioteca principal do AngularJS e bibliotecas de terceiros fornecidas pela comunidade.

Como em outras estruturas SPA, o Angular se preocupa apenas com o front-end e é independente do lado do servidor. Esse desacoplamento, juntamente com a arquitetura do cliente fornecida pelo Angular, permite maior flexibilidade à medida que as aplicações crescem.

A autenticação AngularJS do zero pode ser incômoda, mas não precisa ser. Continue lendo abaixo para descobrir como a Auth0 facilita a adição da autenticação AngularJS.

As aplicações AngularJS funcionam de maneira diferente das aplicações tradicionais de ida e volta. Como outras estruturas de aplicação de página única (SPA), as aplicações AngularJS geralmente dependem de APIs de dados que são acessadas enviando solicitações XHR do cliente para o servidor.

Adicionar a autenticação de usuário a aplicações AngularJS também é diferente. As aplicações tradicionais usam a autenticação baseada em sessão, que funciona mantendo o estado de autenticação do usuário salvo na memória do servidor, mas isso não funciona tão bem para SPAs.

Os tokens oferecem uma maneira melhor de obter autenticação AngularJS. Vários tipos diferentes de tokens de autenticação podem funcionar, mas os JSON Web Tokens são a melhor solução.

O JSON Web Token (JWT) é um padrão aberto (RFC 7519) que define uma forma compacta e independente de transmitir com segurança informações entre partes, como um objeto JSON. Há muitos motivos pelos quais a autenticação JWT é preferível:

Compacta e independente: todos os dados necessários para a autenticação estão no token. Pode ser transmitido rapidamente devido ao pequeno tamanho.

Assinada digitalmente: os tokens são verificados em relação a uma chave secreta no servidor. Eles são seguros porque o conteúdo do JWT não pode ser adulterado, a menos que a chave secreta seja conhecida.

Simples: os JWTs são conceitualmente diretos e têm baixa sobrecarga. Como fornecem um meio sem estado para autenticação, podem ser usados ​​em vários servidores e domínios sem problemas de CORS.

Com a Auth0, sua aplicação AngularJS só precisa se comunicar com nossa API quando o usuário fizer login. Todas as outras chamadas de API vão diretamente para o seu servidor, como ocorreria normalmente.

Usando nosso widget Lock ou sua própria tela de login personalizada, os usuários enviam as credenciais para autenticação pela nossa API. Após o sucesso, um JWT é retornado e salvo no armazenamento local do navegador.

auth.signin({}, function(profile, token) {
    // Success callback
    store.set('profile', profile);
    store.set('token', token);
    $location.path('/');
});

Os endpoints da API que você deseja proteger são protegidos com middleware que exige que um JWT válido seja enviado em solicitações HTTP. O JWT do usuário é enviado como um cabeçalho de autorização e é verificado em relação à sua chave secreta. Um jwtInterceptor é configurado para enviar o JWT do usuário em todas as solicitações.

jwtInterceptorProvider.tokenGetter = ['store', function(store) {
    // Return the saved token
    return store.get('token');
}]; 

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

Nosso widget Lock é uma caixa de login incorporável, completa e perfeitamente projetada para suas aplicações AngularJS. Ele fornece inscrição, login, redefinição de senha e outros recursos prontos para uso. Os estilos do widget podem ser facilmente personalizados para se adequarem à sua marca, e você pode usar um de nossos temas pré-criados para ajudar.

O Angular 2 ainda não foi lançado oficialmente e não é recomendado para produção, mas você ainda pode usar a Auth0 em suas aplicações Angular 2. Nossa biblioteca auxiliar angular2-jwt facilita o envio de solicitações HTTP autenticadas ao servidor e o gerenciamento do roteamento com base no estado de autenticação do usuário.