Implementando Authorization Code Grant

Clase 18 de 39 • Curso de Autenticación con OAuth

Resumen

El flujo de Authorization Code Grant comienza redireccionando a los usuarios a una pantalla donde pedimos permisos para acceder a su cuenta (en este caso con Spotify) para que, a su vez, la aplicación nos devuelva un código de autorización. Este código de autorización lo vamos a utilizar para enviar junto con las variables de client_id y client-secret una nueva petición a la API de Spotify. Esta vez, la API nos responde con un token de acceso que podemos utilizar para acceder al contenido que tenemos permitido según la plataforma de Spotify.

Juan Manuel Alberto Martin

student•

Paso un link que me sirvió para terminar de cerrar la idea.

OauthDocumentacionAuthorizationCode

Carlos Enrique Ramírez Flores

student•

Excelente, viene un ejemplo muy claro! Gracias!

German Gerardo Guerci

student•

Muchisimas gracias Rey!

William Rodriguez

student•

Que genial clase previamente realice aplicaciones con oauth en base a librerias y tu hiciste manualmente parte de lo que las librerias hacen en java usaba Spring security oauth y la verdad es muy engorrosa. yo voy a facebook obtengo el authorization token obtengo los datos del usuario y luego almacenos sus datos en mi base de datos para el registro y le genero el code y token de mi propio servidor ahora lo voy ha hacer manual y segun veo significara mucho pero mucho menos codigo.

Robinson Ganchala

student•

¿Qué utilizas al importar los utils en el editor? Veo que filtras y luego coges el path del archivo directamente sin tener que pensar dónde está si no solo sabiendo cómo se llama el archivo a importar.

Robinson Ganchala

student•

Me costó pero lo encontre: Relative path

Julio J Yépez

student•

Jeje .. te costó solo una hora! Bien hecho. Gracias por compartir la info.

Cristian Iñiguez

student•

Parece que querystring está deprecado. Esta sería una implementación con URLSearchParams:

import { URLSearchParams } from 'url';

...

app.get('/login', function (req, res) {
  const state = generateRandomString(16);

  const queryString = new URLSearchParams({ // 0.0
    response_type: 'code',
    client_id: config.spotify.clientId,
    scope: scopesArray.join(' '),
    redirect_uri: config.spotify.redirectUri,
    state,
  }).toString();

  res.cookie('auth_state', state, { httpOnly: true });
  res.redirect(`https://accounts.spotify.com/authorize?${queryString}`);
});

...

Ameth Ordoñez Erazo

student•

No puedes hacer un import cuando no es un módulo. Se debe importar así:

const { URLSearchParams } = require('url');

Federico Garcia

student•

Gracias a este video pude implementar el login con facebook!. Hay pequeños cambios pero funciona bien. Dentro de poco estaré haciendo un post explicando los cambios.

Nicolas Guillen

student•

lo que me encantaria saber es, cómo el authentication server (en este caso Spotify) maneja flujos como este de su lado🥵

entiendo nuestro rol en el flujo en esta clase, pero me gustaria saber como Spotify o Auth0 proveen estos flujos o identidades

pregunto porque puede que mi producto sea un api, y quiero proveer varios flujos de OAuth para otros desarrolladores y sus apps pero no hay muchos recursos en internet que expliquen como ser un provider como los mencionados anteriormente

Carlos Eduardo Gomez García

teacher•

Según entiendo quieres proveer varios flujos, ¿verdad?

Puedes darle un vistazo a Laravel Passport, es una librería de Laravel (el framework de PHP) que ya te provee varios flujos de autenticación disponibles para que tú solo lo implementes a tu API. Yo recientemente lo acabo de hacer para un proyecto personal.

Pero por lo que he visto (según como lo hace Passport), pone un endpoint /oauth/token y ahí manda los request, y por medio de una llave grant_type decide cuál flujo de autenticación usará 🤔

Manuel Molina Peña

student•

Para qué se crea una cookie con el state y además el mismo state se envía como parámetro en la URL?

Jorge Arias Argüelles

student•

Hola!

Cuando hago la pruega del: localhost:3000/login

me aparece esto: "Cannot GET /login"

Al guien podrñia ayudarme por favor?

jason alejandro martinez jimenez

student•

app.get('/login', function(req, res){ const state = generateRandomString(16);

const queryString = querystring.stringify({ response_type: "code", client_id : config.spotifyClientId, scope: scopesArray.join(" "), redirect_uri : config.spotifyRedirectUri, state: state });

res.cookie("auth_state", state, {http0nly: true }); res.redirect(https://accounts.spotify.com/authorize?${queryString}); });

Este es el código del /login, tal vez tengas algo malo en el código o una confusión de variables. Maybe

Carlos Valdez

student•

Pudiste solucionarlo ?

NICOLAS COSTABLI

student•

Hola quien me puede ayudar con mi proyecto?

Rodriguez, Martin Atlantico

student•

estoy probando tan cual esta el vide tutorial, pero me da error al ir a Spotify... "Error ¡Vaya! Algo salió mal. Inténtalo de nuevo o visita nuestra sección de ayuda." este mensaje me da

Juan Ortega

student•

Hola a todos. Tengo que implementar una integración de Google Calendar con una plataforma de citas de negocios para empresas que he desarrollado.

La idea es que cada usuario conceda los permisos de escritura en su cuenta de Google para crear las distintas reuniones en su Google Calendar asociando además una reunión con Google Meet.

¿Cómo podría automatizar la creación de las reuniones en sus calendarios sin que ellos tengan que aceptar cada X tiempo la autorización de acceso a ellos manualmente?.

¿Podría persistir los refresh_token en una tabla para ello?.

Gracias!.

Federico Garcia

student•

Hola. los new Error que generás si por ejemplo, el token es inválido, ¿Cómo se manejan en producción? ¿Envías una vista que maneja errores?

Erik Elyager

student•

Puedes usar una vista para mostrar un mensaje entendible y amigable con el usuario.

Michael Forero Chaux

student•

Si a alguien le sale "illegal Scope", remover "playlist-read-collaborate" del scopesArray.js y ejecutar de nuevo

Ameth Ordoñez Erazo

student•

En este link hay una explicación muy buena de lo que son los PKCE y un ejemplo muy claro:

Link

Cristian Iñiguez

student•

Para que se apoyen: https://developer.spotify.com/documentation/general/guides/authorization/code-flow/

import { URLSearchParams } from 'url';

...

app.get('/login', function (req, res) {
  const state = generateRandomString(16);

  const queryString = new URLSearchParams({ // 0.0
    response_type: 'code',
    client_id: config.spotify.clientId,
    scope: scopesArray.join(' '),
    redirect_uri: config.spotify.redirectUri,
    state,
  }).toString();

  res.cookie('auth_state', state, { httpOnly: true });
  res.redirect(`https://accounts.spotify.com/authorize?${queryString}`);
});

...

Implementando Authorization Code Grant

Bienvenida e introducción

Qué aprenderás sobre autenticación con OAuth

Stack de seguridad para aplicaciones modernas

Autenticación

Autorización

JSON Web Tokens

JSON Web Tokens

Autenticación tradicional vs JWT

Configuración inicial de los proyectos

Firmando un JWT

Verificando nuestro JWT firmado y buenas practicas con JWT

Server-Side vs Client-Side sessions

Protegiendo nuestros recursos con JWT

Habilitando CORS en nuestro servidor

Profundizando el concepto de JWKS

OAuth 2.0

Cómo elegir el flujo adecuado para OAuth 2.0

¿Qué es OAuth 2.0?

Conociendo el API de Spotify

Creando los clientes de Spotify y servicios iniciales

Implementando Authorization Code Grant

Usando nuestro access token para obtener nuestros recursos

Implementando Implicit Grant

Implementando nuestro servicio de autenticación

Modificando nuestro Layout

Implementando Client Credentials Grant

Implementando Resource Owner Password Grant

Implementando Authorization Code Grant (PKCE)

Open ID Connect

¿Qué es OpenID Connect?

Implementando OpenID Connect

Preocupaciones con JWT y OAuth 2.0

¿Cuáles son las preocupaciones con JWT?

¿Cuáles son las preocupaciones con OAuth 2.0?

Haciendo uso de Auth0

¿Qué es Auth0?

Auth0 Lock y auth0.js

Universal Login

Social Login con Auth0

Custom Social connection con Spotify

Multifactor authentication

Authorization Extension en Auth0

Consideraciones para producción

Buenas prácticas para el despliegue en producción

Uso de diferentes tenants para producción con Auth0

Cierre del curso

Cierre del curso