Clase 21_ Estrategia de autenticación por terceros JWT

Vista previa del material en texto

Clase 21. Estrategia de autenticación por terceros + JWT
Objetivos de la clase
· Comprender la teoría de la autenticación por terceros.
· Realizar una autenticación utilizando Github.
· Comprender el concepto de JWT
· Aplicar de manera sencilla JWT.
Glosario
· Autenticación: Proceso por el cual el cliente otorga sus credenciales al servidor para definir su identidad en el uso de la aplicación.
· Autorización: Proceso por el cual, a un cliente ya autenticado, se le otorga o restringe el acceso a algún recurso, según su nivel jerárquico.
· Passport: Sistema de middleware para autenticación y autorización que permite realizar múltiples estrategias de manera limpia y modular.
· Passport-local: Estrategia de passport utilizada para mantener una lógica de autenticación bajo username y password. 
Autenticación por terceros
Los sitios web modernos han tenido que enfrentarse a una forma mucho más rápida de navegación por parte de los usuarios: hay mucho por visitar, necesitan la información de manera rápida, quieren consumir. Cuando un sitio solicita “registrarse” para poder utilizar un sitio web, plantea un bloqueo al usuario y éste tendrá que decidir si se toma el tiempo para realizar el registro, o dejar el sitio web y continuar con otra cosa. ¿Qué tan imprescindible es tu sitio web, para que el usuario tenga que tomarse la molestia de un registro?
Es entonces que tenemos que contemplar la idea de un método más ágil. Por ello, nos apoyamos en plataformas “de mayor calibre”. Plataformas que sabemos que el usuario ya utiliza y, por lo tanto, debió haber provisto sus credenciales. 
Autenticar por terceros, es “pedir datos” de una aplicación donde el usuario ya esté autenticado, y utilizar sus datos públicos para poder crear nuestro usuario en nuestra base. El usuario entonces podrá acceder a mi sitio web de manera rápida, segura, y sin tener que llenar un formulario que no está interesado en llenar. Conforme pasa el tiempo, el número de autenticaciones por terceros va en incremento y el registro nativo de las páginas comienzan a ser la solución secundaria.
Solicitar datos a una aplicación externa no es tarea sencilla. Ya que para poder utilizarla como proveedora de información, tenemos que formar parte de su red interna de desarrollo. Cada sitio es diferente, algunos pueden darte libertad con sólo crear una cuenta de desarrollo, algunos te piden que expliques tu intención con su uso, e incluso algunos pueden evaluarte y decidir no permitirte acceso. Utilizar un sitio externo requiere que conozcamos correctamente sus configuraciones, así que requerirás tomarte una buena parte de tu tiempo para entender a fondo cada una de las documentaciones a utilizar.
Paso a paso
Ejemplo de autenticación por terceros: Github. Nociones importantes.
· Debes contar con una aplicación privada dentro de dicho sitio web (ya sea Facebook, Twitter, GitHub, etcétera).
· Este sitio nos solicitará una URL de Callback. Muy importante: Este callback debe coincidir con el callback del router. Por cada estrategia, tu router tendrá dos rutas: 
· 🏁 Ruta inicial: Manda a llamar el middleware de Passport y activa la redirección.
· 📞Ruta callback: Donde llega el dato de usuario final otorgado por Passport.
· Un sitio web externo no almacena los datos igual a nosotros, de manera que puede que no encontremos todos los datos que requiere nuestro modelo en la base de datos. Hay que seleccionar los datos que nos sirven para recrear nuestro usuario.
· Si el perfil del usuario está configurado como privado, a pesar de autorizar no obtendremos información y no podremos proceder por dicho método. Esto ocurre en Facebook, Github, etcétera.
· Si presentas dificultades en ver tu perfil de Github en el código al momento de correr el código, cambia tu cuenta a pública.
Aproximación al proceso
Lo primero: Localizar cómo ser parte de la aplicación. Si ya tienes una cuenta de Github, bastará con:
· Ir a la sección de Configuración (settings). 
· Ir a Configuración para desarrolladores (Developer settings): Aparecerán las aplicaciones que hemos creado y podremos proceder a crear nuestra app.
Luego, debes proceder a crear tu aplicación.
Github Apps permitirá conectar los datos de Github 📑: Cuentas, repositorios, etcétera, a tu servidor para poder obtener las credenciales necesarias:
Para la configuración de la aplicación:
· ¡Recueda! 📞 Mucho cuidado con el Callback URL
· Configura los permisos a los que accederá la aplicación
Ten claros tus datos importantes: Ya configurada tu aplicación, debes tener muy claros: AppId, CliendID, Client secret.
MUY IMPORTANTE: La información mostrada en el screen anterior es información muy sensible. Se muestra en pantalla por motivos didácticos, sin embargo, nunca debes dejar visibles estas variables. Es importante que estos datos siempre se mantengan ocultos y solo puedan ser utilizados por ti o tu equipo de desarrollo.
Ahora debes configurar al servidor al trabajar: Una autenticación por terceros está hecha para utilizarse como un botón de acceso rápido para un cliente, por lo tanto, levantaremos un servidor de express sencillo utilizando nuestro motor de plantillas. La arquitectura será exactamente la misma. Además, tendremos que contar con las dependencias mostradas a continuación.
Arquitectura elemental de un servidor con handlebars:
views.router.js
login.handlebars: (Aquí conectaremos con github)
Creamos nuestro passport.config
Se creará un archivo passport.config.js en la carpeta config de nuestro proyecto:
· Importaremos el core de passport.
· Importaremos la estrategia a utilizar (en este caso la de Github).
· Importaremos el servicio de Usuarios que hemos utilizado para mongo.
· Crearemos y exportaremos nuestra función de inicialización, con su serializador y deserializador.
Creando nuestra estrategia de Github:
Y conectamos el router de sessions.router.js. Nota cómo se manda a llamar dos veces passport, uno para la redirección y otro para el proceso de callback:
Al llamar al botón “Entrar con Github” (localizado en login.handlebars). Github redireccionará a su propia pantalla de login. Una vez logueado, el perfil de logueo llegará a nuestra estrategia de passport y podremos tomar lo que necesitemos: 
¿Qué hacer con ese perfil? Una vez que el usuario se loguea y trae la información del perfil, puedes tomar los datos que necesitas crear el propio usuario en base de datos 😉. Así, la próxima vez que visite tu sitio web, si presiona nuevamente el botón “entrar con github” podrás reconocer y comparar los datos del perfil con los que tienes en la base de datos y, en lugar de crearlo nuevamente, solo devolverlo. 
Todo listo: 
· El botón redireccionó al login de Github.
· Github extrae los datos del usuario y se los devuelve a passport.
· Tomamos los datos que necesitamos de ese usuario y los guardamos según nuestro propio formado del schema de mongoose.
· Devolvemos a ese usuario a nuestro callback. 
· El callback agrega al usuario al objeto de session.
· ¡Tenemos un usuario nuevo gracias a Github! 🎉
Para pensar… Un usuario puede loguearse por múltiples plataformas. ¿Cómo podríamos relacionar al usuario de una plataforma con otra, para no crear múltiples usuarios?
Un panorama distinto a session: JWT
¿Qué es? JsonWebToken es una implementación sin estado para poder mantener el ciclo de vida de la sesión de un usuario, sin el almacenamiento que este implica 🙌.
Funciona de una manera diferente en session:
· El servidor generará un token con la información del usuario y la enviará al navegador.
· El navegador (front) almacenará dicho token y procederá a enviarlo en cada request por medio de los headers.
· El servidor recibe las peticiones, busca el token de jwt en los headers. Si lo encuentra, podrá proceder, si no, entonces requerirá autenticación nuevamente.
Ahora bien, la necesidad de almacenar las sesiones de lado del servidor o de una base de datos genera conflictos:
· 📂 Almacenamiento innecesario: Almacenar por miles, cientos de miles, o millones de usuarios, puede ser problemático a nivelalmacenamiento. 
· 👨‍💻 Tráfico saturado: Al vivir en una base de datos, session debe conectar con ella siempre que haya que consultar una sesión. Puede implicar detalles de rendimiento o requerir particiones de más. 
Modelo de autenticación con Session Storage
JWT delega responsabilidad a cada cliente. Para aligerar el peso de la operación, el servidor puede otorgar el token de acceso al cliente y éste almacenarlo dentro del navegador en una cookie 🏁. Así, el cliente tiene la responsabilidad de enviar sus credenciales con los datos de la sesión a manera de stateless. El servidor solo necesita descifrar el token para poder acceder a las credenciales del usuario. Esto le permite al servidor ser más ágil.
Modelo de autenticación con JWT
Aplicación sencilla utilizando JWT
Instalación de módulos: Como no es novedad, debemos contar con nuestro servidor de express. Sin embargo, la instalación vendrá complementada con npm install jsonwebtoken:
Creamos las funciones necesarias para jwt en un archivo utils.js. (Nota que el token se recibirá desde los headers directamente, y no desde cookie)
Creando rutas de registro y login
Resumen de lo visto en la clase de hoy:
· Autenticación por terceros
· Autenticación utilizando Github
· passport-github
· Primer acercamiento de jsonwebtoken