Bienvenida e introducción

1

Qué aprenderás sobre autenticación con OAuth

2

Stack de seguridad para aplicaciones modernas

3

Autenticación

4

Autorización

JSON Web Tokens

5

JSON Web Tokens

6

Autenticación tradicional vs JWT

7

Configuración inicial de los proyectos

8

Firmando un JWT

9

Verificando nuestro JWT firmado y buenas practicas con JWT

10

Server-Side vs Client-Side sessions

11

Protegiendo nuestros recursos con JWT

12

Habilitando CORS en nuestro servidor

13

Profundizando el concepto de JWKS

OAuth 2.0

14

Cómo elegir el flujo adecuado para OAuth 2.0

15

¿Qué es OAuth 2.0?

16

Conociendo el API de Spotify

17

Creando los clientes de Spotify y servicios iniciales

18

Implementando Authorization Code Grant

19

Usando nuestro access token para obtener nuestros recursos

20

Implementando Implicit Grant

21

Implementando nuestro servicio de autenticación

22

Modificando nuestro Layout

23

Implementando Client Credentials Grant

24

Implementando Resource Owner Password Grant

25

Implementando Authorization Code Grant (PKCE)

Open ID Connect

26

¿Qué es OpenID Connect?

27

Implementando OpenID Connect

Preocupaciones con JWT y OAuth 2.0

28

¿Cuáles son las preocupaciones con JWT?

29

¿Cuáles son las preocupaciones con OAuth 2.0?

Haciendo uso de Auth0

30

¿Qué es Auth0?

31

Auth0 Lock y auth0.js

32

Universal Login

33

Social Login con Auth0

34

Custom Social connection con Spotify

35

Multifactor authentication

36

Authorization Extension en Auth0

Consideraciones para producción

37

Buenas prácticas para el despliegue en producción

38

Uso de diferentes tenants para producción con Auth0

Cierre del curso

39

Cierre del curso

Habilitando CORS en nuestro servidor

12/39

Lectura

Habilitando CORS en nuestro servidor

El Intercambio de Recursos de Origen Cruzado (Cross-Origin Resource Sharing) es un mecanismo que agrega unos encabezados (Headers) adicionales HTTP para permitir que un user agent (generalmente un navegador) obtenga permisos para acceder a los recursos de un servidor en un origin distinto (dominio) del que pertenece.

Por ejemplo una solicitud de origen cruzado seria hacer una petición AJAX desde una aplicación que se encuentra en https://dominio-a.com para cargar el recurso https://api.dominio-b.com/data.json.

Por razones de seguridad, los navegadores restringen las solicitudes HTTP de origen cruzado iniciadas dentro de un script.

Si necesitamos permitir request desde un dominio diferente al del servidor podemos usar el middleware cors para permitirlo, pero es importante no dejarlo expuesto a todos los dominios.

Habilitar CORS para todos los request (No recomendado en producción)

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for all origins!" });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

Habilitar CORS para los request especificos de un cliente (Recomendado para producción)

const express = require("express");
const cors = require("cors");
const app = express();

const corsOptions = { origin: "http://example.com" };

app.use(cors(corsOptions));

app.get("/products/:id", function(req, res, next) {
  res.json({ msg: "This is CORS-enabled for only example.com." });
});

app.listen(8000, function() {
  console.log("CORS-enabled web server listening on port 8000");
});

Debemos tener en cuenta que para aplicaciones server-side es poco probable que necesiten el uso de CORS debido a que las aplicaciones conviven en el mismo dominio. Sin embargo, es buena practica habilitarlo para los llamados externos de nuestra API.

Más información sobre el middleware cors en https://expressjs.com/en/resources/middleware/cors.html

Aportes 3

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

// Importar la libreria de cors
const cors = require('cors')

//Configuracion del cors
const ALLOWED_ORIGINS = ['https://miAPI.com', 'http://localhost:8080']
app.use(cors({
    origin: function (origin, callback) {
        if(!origin) return callback(null, true)
        if(ALLOWED_ORIGINS.indexOf(origin) ===-1)
            return callback(new Error(`Origen no permitido ${origin}, bloqueado, por seguridad`), false)
        return callback(null, true)
    }
}))

Tengo esa confugración, fue necesario agregar ¨http://localhost:8080" ya que por medio de una app hecha en ionic que corre desde mobiles no me permitia conectarme.

Hay alguna forma de hacer eso mejor, que agregando http://localhost:8080 ?

Listo los habilite en modo producción!

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const jwt = require("jsonwebtoken");
const { config } = require("./config");

const port = config.hostPort;
const secret = config.authJwtSecret;

const app = express();
//Habilitar CORS para los request especificos de un cliente (Recomendado para producción)
/*
const corsOptions = { origin: "http://example.com" };
app.use(cors(corsOptions))
*/
app.use(cors())

// body parse
app.use(bodyParser.json());

app.post("/api/auth/token", (req, res) => {
  const { email, username, name } = req.body;
  const token = jwt.sign({ sub: username, email, name }, secret);
  res.json({ access_token: token });
});

app.get("/api/auth/verify", async (req, res, next) => {
  const { access_token } = req.query;
  try {
    const decoded = jwt.verify(access_token, config.authJwtSecret);
    res.json({ message: "the access token is valid", username: decoded.sub });
  } catch (e) {
    next(e);
  }
});

const server = app.listen(port, () => {
  console.log(`Listening http://localhost:${port}`);
});

my package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index",
    "dev": "nodemon index",
    "lint": "standard",
    "lint-fix": "standard --fix"
  },
  "keywords": [],
   "author": "Carlos Enrique Ramírez Flores",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4",
    "standard": "^14.3.4"
  }
}

En mi caso tuve que instalar la librería usando npm install cors
.
Me es muy común ver a personas asustarse cuando les sale un error de CORS y no saben cómo resolverlo jaja, a mí también me pasaba hasta que lo entendí, aunque en Laravel por ejemplo, puedo especificarle por medio de los headers directamente cuál dominio y qué métodos soportar para CORS