Ver contenido

carlosazaustre.es carlosazaustre.es

Cómo hacer autenticación basada en token con AngularJS

🗓 | 💻 Desarrollo | 🕐 3 minutos de lectura | 💬 Comments

Bienvenid@ a la última entrega de la serie de Autenticación basada en token en aplicaciones web. En las anteriores entradas vimos las bases de este método y cómo programarlo en nuestro servidor o API REST con Node.js. En éste artículo veremos como implementarlo en el lado del cliente con Angular.js

Usando librerías de terceros

Podemos hacerlo de varias maneras. Implementarlo manualmente o utilizar una librería que nos facilite el desarrollo. Yo recomiendo esto último y en concreto la librería Satellizer, desarrollada por Sahat Yalkabov que desarrolló durante su etapa de non-student en la Hacker School de Nueva York.

Esta librería soporta autenticación por usuario/contraseña además de proveedores OAuth como Facebook, Twitter, Google, Github, etc... Es sencilla de usar y funciona perfectamente. A continuación veremos como configurarla.

Instalación y configuración

Primero necesitamos instalarla, podemos hacerlo por Bower o si usamos Browserify por NPM.

De seguido, en nuestro fichero principal de Angular, supongamos el app.js, importamos el módulo y configuramos la librería. El nombre de la directiva que utiliza Satellizer es $auth y $authProvider.

En $authProvider.loginUrl y $authProvider.signupUrl indicamos cual es la ruta de nuestro servidor o API REST que maneja la autenticación. Como vimos en el anterior post, éstas rutas on /auth/login y /auth/signup.

En $authProvider.tokenName le indicamos un nombre al token y $authProvider.tokenPrefix para añadirle un prefijo al nombre del token por si queremos diferenciarlo en nuestro LocalStorage de otros. En este caso, el token quedará guardado en LocalStorage con la clave myApp_token.

Controladores

Lo siguiente a implementar son los controladores. Tendremos dos principalmente, el de login y el de registro, además del de logout.

Es un código sencillo si ya has visto AngularJS anteriormente. Creamos las funciones correspondientes que utilizaremos desde las vistas this.signup, this.login. Estas funciones a su vez llamarán a la librería Satellizer a través de la directiva $auth llamando a las funciones $auth.login(), $auth.signup() y $auth.logout().

Estas funciones por debajo, realizan todo el manejo de insertar en la cabecera HTTP el token de autenticación que recibe del servidor cuando se registra/autentica y que envía en cada petición HTTP una vez autenticado.

¿Dónde se almacena el Token?

Vamos a ver un poco como está hecho Satellizer por dentro. Puedes mirarlo en su repositorio en GitHub ya que es OpenSource, e incluso puedes ayudar a mejorarlo con tus aportes :)

Entre todos los módulos que están programados en Satellizer, vemos uno llamado satellizer.shared donde se comparten los métodos y funciones que utiliza el resto de la librería. Digamos que éste es el núcleo de la funcionalidad.

shared.getToken() busca en nuestro LocalStorage la clave que hemos definido para almacenar nuestro Token y nos lo devuelve

shared.getPayload() toman el token y devuelve el payload que es la 2a parte del token

Y por último la función shared.setToken(), almacena el token recibido en el LocalStorage:

¿Cómo se envía el token en cada petición HTTP?

De eso se encarga la directiva $httpProvider que funciona como interceptor o middleware y se activa en cada petición HTTP.

De esta manera, en cada petición HTTP, se inserta en las cabeceras el token si lo tenemos en el LocalStorage y ya despues el backend (nuestro servidor o API) se encarga de ver si existe, es correcto o no y devolver el código de respuesta para cada caso.

Rutas y vistas

Volvemos al módulo principal de nuestra aplicación y añadimos las rutas del frontend a continuación de la configuración del $authProvider podemos usar ngRoute o ui.route si queremos tener estados en lugar de rutas y poder tener vistas anidadas (nested views). Yo suelo utilizar ui.router me parece más cómodo. Para ello primero instalamos la librería correspondiente:

Y lo configuramos en app.js

En este código he configurado dos rutas adicionales, la de Home en / y la de Private en /private pero éstas no las voy a desarrollar en este ejemplo. Esas ya son propias de tu aplicación.

Lo que si voy a mostrar es como serían las vistas para el login y el signup.

En ellas vemos los ng-model que utilizamos y que obtenemos en el controlador.

Si quieres más información (en inglés) sobre estos temas de autenticación por Token, te dejo unos enlaces a blogs y websites que me han servido para documentarme y aprender a manejar este sistema.

Fuentes

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Me dedico al desarrollo web. Actualmente trabajo como Senior Frontend Engineer en Eventbrite. Fui nombrado en 2019 GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

Si te gusta lo que lees, puedes apoyarme en mi Patreon o invitarme a un café virtual 🙂

Se mi patrón Invítame a un Café