OAuth 2.0 es un estándar que permite que aplicaciones de terceros accedan a datos de aplicaciones web de forma segura. Puede usarlo para obtener datos que incluyen información de perfil, horarios, etc. que está alojado en otras aplicaciones web como Facebook, Google y GitHub. Un servicio puede hacer esto en nombre de un usuario sin exponer sus credenciales a la aplicación de terceros.
Aprenda cómo implementar OAuth en una aplicación Express usando GitHub como proveedor de OAuth en unos pocos pasos.
El flujo de OAuth
En un flujo típico de OAuth, su sitio ofrece una opción para que los usuarios inicien sesión con su cuenta de terceros desde un proveedor como GitHub o Facebook. Un usuario puede iniciar este proceso haciendo clic en un botón de inicio de sesión de OAuth relevante.
Esto los redirige desde su aplicación al sitio web del proveedor de OAuth y les presenta un formulario de consentimiento. El formulario de consentimiento contiene toda la información a la que desea acceder del usuario, que podría ser sus correos electrónicos, fotos, horarios, etc.
Si el usuario autoriza su aplicación, el tercero lo redirigirá a su aplicación con un código. Luego, su aplicación puede intercambiar el código recibido por un token de acceso que luego puede usar para acceder a los datos de usuario disponibles.
La implementación de este flujo en una aplicación Express implica algunos pasos.
Paso 1: Configuración del entorno de desarrollo
Primero, cree un directorio de proyecto vacío y discos compactos en el directorio creado.
Por ejemplo:
mkdir github-aplicación
discos compactos aplicación github
A continuación, inicialice npm en su proyecto ejecutando:
npm inicializar -y
Este comando crea un paquete.json archivo que contiene detalles sobre su proyecto como el nombre, la versión, etc.
Este tutorial presentará el uso del sistema de módulos ES6. Configure esto abriendo su paquete.json archivo y especificando "tipo": "módulo" en el objeto JSON.
Paso 2: Instalación de dependencias
Deberá instalar algunas dependencias para que su servidor funcione correctamente:
- ExpressJS: ExpressJS es un marco NodeJS que proporciona un conjunto sólido de características para aplicaciones web y móviles. El uso de Express simplificará el proceso de creación de su servidor.
- Axios: Axios es un cliente HTTP basado en promesas. Necesitará este paquete para realizar una solicitud POST de un token de acceso a GitHub.
- dotenv: dotenv es un paquete que carga variables de entorno desde un archivo .env al objeto process.env. Lo necesitará para ocultar información importante sobre su aplicación.
Instálelos ejecutando:
npm Instalar en pc expreso axios dotenv
Paso 3: Creación de una aplicación Express
Necesitas crear un servidor Express básico para gestionar y realizar solicitudes al proveedor de OAuth.
Primero, crea un índice.js archivo en el directorio raíz de su proyecto que contiene lo siguiente:
// índice.js
importar Rápido de "Rápido";
importar axios de "axíos";
importar * como dotenv de "dotenv";
dotenv.config();constante aplicación = expreso();
constante puerto = proceso.env. PUERTO || 3000
app.escucha (puerto, () => {
consola.Iniciar sesión(`La aplicación se está ejecutando en el puerto ${puerto}`);
});
Este código importa la biblioteca express, crea una instancia express y comienza a escuchar el tráfico en el puerto 3000.
Paso 4: Creación de controladores de ruta
Deberá crear dos controladores de ruta para manejar el flujo de OAuth. El primero redirige al usuario a GitHub y solicita autorización. El segundo maneja la redirección a su aplicación y realiza la solicitud del token de acceso cuando un usuario autoriza su aplicación.
El primer controlador de ruta debe redirigir al usuario a https://github.com/login/oauth/authorize? parámetros.
Deberá pasar un conjunto de parámetros requeridos a la URL de OAuth de GitHub, que incluyen:
- Identificación del cliente: se refiere a la identificación que recibe su aplicación OAuth cuando se registra en GitHub.
- Alcance: se refiere a una cadena que especifica la cantidad de acceso que tiene una aplicación OAuth a la información de un usuario. Puede encontrar una lista de ámbitos disponibles en Documentación de OAuth de GitHub. Aquí usará un “leer: usuario” alcance, que otorga acceso para leer los datos del perfil de un usuario.
Agregue el siguiente código a su índice.js expediente:
// índice.js
aplicación.obtener("/auth", (requerido, res) => {
// Almacenar parámetros en un objeto
constante parámetros = {
alcance: "leer: usuario",
Identificación del cliente: proceso.env.IDENTIFICACIÓN DEL CLIENTE,
};
// Convertir parámetros a una cadena codificada en URL
constante urlEncodedParams = nuevo URLSearchParams (parámetros).toString();
res.redireccionar(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});
Este código implementa el primer controlador de ruta. Almacena los parámetros requeridos en un objeto, convirtiéndolos a un formato codificado en URL utilizando la API URLSearchParams. Luego agrega estos parámetros a la URL de OAuth de GitHub y redirige al usuario a la página de consentimiento de GitHub.
Agregue el siguiente código a su índice.js archivo para el segundo controlador de ruta:
// índice.js
aplicación.obtener("/github-callback", (requerido, res) => {
constante { código } = req.consulta;constante cuerpo = {
Identificación del cliente: proceso.env.IDENTIFICACIÓN DEL CLIENTE,
secreto_cliente: proceso.env.CLIENTE_SECRETO,
código,
};dejar token de acceso;
const opciones = { encabezados: { aceptar: "aplicación/json" } };
axios
.correo("https://github.com/login/oauth/access_token", cuerpo, opciones)
.entonces((respuesta) => respuesta.datos.acceso_token)
.then((token) => {
token de acceso = token;
res.redireccionar(`/?token=${ficha}`);
})
.captura((err) => res.estado(500).json({ err: err.mensaje }));
});
El segundo controlador de ruta extraerá el código regresado de GitHub en el req.consulta objeto. Luego hace un POST solicitud usando Axios a " https://github.com/login/oauth/access_token" con el código, Identificación del cliente, y secreto_cliente.
los secreto_cliente es una cadena privada que generará cuando cree una aplicación GitHub OAuth. Cuando el token_de_acceso se obtiene con éxito, se guarda en una variable para su uso posterior. El usuario finalmente es redirigido a su aplicación con el token_de_acceso.
Paso 5: crear una aplicación de GitHub
A continuación, deberá crear una aplicación OAuth en GitHub.
Primero, inicie sesión en su cuenta de GitHub, luego vaya a Ajustes, desplácese hacia abajo hasta Configuración del desarrolladory seleccione Aplicaciones OAuth. Finalmente, haga clic en “Registrar una nueva aplicación.”
GitHub le proporcionará un nuevo formulario de solicitud de OAuth como este:
Rellene los campos obligatorios con los datos deseados. Los "URL de la Pagina Principal" debiera ser " http://localhost: 3000”. Su "URL de devolución de llamada de autorización" debiera ser " http://localhost: 3000/github-devolución de llamada”. Opcionalmente, también puede habilitar el flujo de dispositivos, lo que le permite autorizar a los usuarios para una aplicación autónoma, como una herramienta CLI o administrador de credenciales de Git.
El flujo de dispositivos está en versión beta pública y está sujeto a cambios.
Por último, pulsa el Registrar aplicación botón.
GitHub lo dirigirá a una página con su Identificación del cliente y una opción para generar tu secreto_cliente. copia tu Identificación del cliente, genera tu secreto_clientey copiarlo también.
Crear un archivo .env y almacenar el Identificación del cliente y secreto_cliente dentro de eso. Nombre estas variables CLIENT_ID y CLIENT_SECRET respectivamente.
Su flujo de OAuth ahora está completo y ahora puede realizar solicitudes con el token de acceso para leer los datos del usuario (el alcance usted especificó anteriormente).
La importancia de OAuth 2.0
El uso de OAuth 2.0 en su aplicación simplifica enormemente la tarea de implementar un flujo de autenticación. Protege los datos de usuario de sus clientes utilizando el estándar Secure Sockets Layer (SSL), asegurando que permanezcan privados.