Autenticación de AngularJS, la manera fácil

AngularJS es uno de los marcos de trabajo de JavaScript más populares del mundo para crear aplicaciones de página única. Desarrollado por Google, Angular proporciona una serie de herramientas que facilitan el cableado de las distintas piezas necesarias para una SPA. La biblioteca principal de AngularJS y las bibliotecas de terceros aportadas por la comunidad simplifican aspectos como la vinculación bidireccional de datos, las solicitudes HTTP, la creación de plantillas y el enrutamiento.

Al igual que con otros marcos de trabajo de SPA, Angular solo se ocupa del front end y es agnóstico sobre el lado del servidor. Este desacoplamiento, junto con la arquitectura del lado del cliente que proporciona Angular, permite en última instancia una mayor flexibilidad a medida que crecen las aplicaciones.

La autenticación AngularJS desde cero puede ser una molestia, pero no tiene por qué serlo. Sigue leyendo a continuación para descubrir cómo Auth0 hace que sea fácil añadir la autenticación de AngularJS.

Las aplicaciones de AngularJS funcionan de forma diferente a las aplicaciones tradicionales de ida y vuelta. Al igual que otros marcos de trabajo de una aplicación de una sola página (SPA), las aplicaciones de AngularJS suelen depender de API de datos a las que se accede enviando peticiones XHR desde el cliente al servidor.

Añadir la autenticación de usuario a las aplicaciones de AngularJS también es diferente. Las aplicaciones tradicionales utilizan la autenticación basada en sesiones, que funciona manteniendo el estado de autenticación del usuario guardado en la memoria del servidor, pero esto no funciona tan bien para las SPA.

Los tokens ofrecen una forma mejor de conseguir la autenticación de AngularJS. Varios tipos diferentes de tokens de autenticación pueden funcionar, pero los tokens web JSON son la mejor solución.

El token web JSON (JWT) es un estándar abierto (RFC 7519) que define un método compacto y autocontenido para la transmisión segura de información entre partes codificadas como un objeto JSON. Hay muchas razones por las que la autenticación de JWT es preferible:

Compacto y autónomo: todos los datos necesarios para la autenticación se encuentran en el token. Puede transmitirse rápidamente gracias a su pequeño tamaño.

Firmados digitalmente: los tokens se verifican con una clave secreta en el servidor. Son seguros porque el contenido del JWT no puede ser manipulado a menos que se conozca la clave secreta.

Simple: Los JWT son conceptualmente sencillos y tienen poca sobrecarga. Dado que proporcionan un medio de autenticación sin estado, pueden utilizarse en varios servidores y dominios sin tener problemas con CORS.

Con Auth0, tu aplicación de AngularJS solo necesita hablar con nuestra API cuando el usuario inicia sesión. Todas las demás llamadas a la API van directamente a su servidor como lo harían normalmente.

Utilizando nuestro widget de bloqueo o tu propia pantalla de inicio de sesión personalizada, tus usuarios envían sus credenciales a nuestra API para ser autenticados. Si tiene éxito, se devuelve un JWT y se guarda en el almacenamiento local de su navegador.

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

Los puntos finales de la API que desea proteger están protegidos con software intermedio que requiere el envío de un JWT válido en las solicitudes HTTP. El JWT del usuario se envía como un encabezado de autorización y se verifica con tu clave secreta. Se configura un jwtInterceptor para enviar el JWT del usuario en todas las solicitudes.

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

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

Nuestro widget Lock es un cuadro de inicio de sesión incrustable, todo en uno y con un bonito diseño para tus aplicaciones de AngularJS. Proporciona funciones de registro, inicio de sesión, restablecimiento de contraseña y otras funciones listas para usar. Los estilos del widget se pueden personalizar fácilmente para que se ajusten a tu marca, y puedes utilizar uno de nuestros temas prediseñados como ayuda.

Angular 2 aún no ha sido lanzado oficialmente y no se recomienda para producción, pero aún puedes usar Auth0 en tus aplicaciones Angular 2. Nuestra biblioteca de ayuda angular2-jwt facilita el envío de solicitudes HTTP autenticadas a tu servidor y el enrutamiento basado en el estado de autenticación del usuario.