Implementando Sign Provider en nuestra API

Clase 31 de 39 • Curso de Autenticación con Passport.js 2019

Clase anteriorSiguiente clase

Diego Camino Reinoso

student•

Estoy flipando!!!! Que curso tan incríble!!

Carlos Enrique Ramírez Flores

student•

que es flipando???

Diego Andres Cabrera Rojas

student•

es como decir estoy emocionado , es un termino que se usa mucho en españa

Luis Lira

student•

Cuando entro de nuevo a la ruta después de los 15 minutos me debe pedir que inicie sesión de nuevo con Google o me debe enviar de nuevo al json con los datos sin necesidad de poner mi credenciales de google?

Johan Avila

student•

Mi app no funcionaba, entonces me puse a revisar la documentacion y cambie las url por las siguientes

const GOOGLE_AUTHORIZATION_URL = "https://accounts.google.com/o/oauth2/auth"
const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token"
const GOOGLE_USERINFO_URL = "https://openidconnect.googleapis.com/v1/userinfo"

Juan Jose Arcani

student•

Al final llegue a la misma conclusión

José Armando Gutiérrez Araujo

student•

Podrías pasar el link de la documentación que viste?

Marco Luna

student•

Siempre los Typos me meten en problemas :D, pero esto es genial.

Jose Daniel Molina

student•

¡Muy interesante esta clase! Tengo la cabeza y el orgullo hechos boom. jajajaja

Eduardo Toledo Valerio

student•

¿A alguien mas le surge este error a la hora de entrar a http://localhost:8000/auth/google-oauth? Error de autorización Error 400: redirect_uri_mismatch The redirect URI in the request, http://localhost:8000/auth/auth/google-oauth/callback, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/403982055480-und6ah5voc7scc2at7ulk2mtluf2ubtd.apps.googleusercontent.com?project=403982055480

Miguel Angel Porras Villarreal

student•

estoy teniendo mismo error como lo resolviste?

DANIEL MEDINA ARMADA Medina

student•

Buenas Tardes Amigos

presento e siguiente error, alguna idea.

TokenError: client_secret is missing.
    at OAuth2Strategy.parseErrorResponse (/home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/passport-oauth2/lib/strategy.js:358:12)
    at OAuth2Strategy._createOAuthError (/home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/passport-oauth2/lib/strategy.js:405:16)
    at /home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/passport-oauth2/lib/strategy.js:175:45
    at /home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/oauth/lib/oauth2.js:191:18
    at passBackControl (/home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/oauth/lib/oauth2.js:132:9)
    at IncomingMessage.<anonymous> (/home/daniel/Proyectos/platzi/platzi-auth-passport/ssr-server/node_modules/oauth/lib/oauth2.js:157:7)
    at IncomingMessage.emit (events.js:388:22)
    at endReadableNT (internal/streams/readable.js:1336:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)

Alejandro González Reyes

student•

¿Porque no se pintó el token y su valor correspondiente en el json enviado como respuesta (min 6:47)?

sin embargo, en la estrategia si llega.

Alejandro González Reyes

student•

Me respondo a mi mismo, la data que pinta el navegador es la del SSR, no el API.

Juan Manuel Alemán Rodríguez

student•

Me salía el error :

TokenError: Bad Request
...

Pero al revisar ambas consolas me di cuenta que tenia un typo en la parte donde se firma el token (API), en la clase nos indica que configuremos una expiración de 15 minutos, en mi caso escribí solo "expires" y debe de ser "expiresIn", posiblemente a los que tengan este error no van a poder resolverlo así, pero se pueden dar una idea de como tratar de darle solución, checando las 2 terminales y los typos, Además gracias a los compañeros que ya habían publicado soluciones también es necesario cambiar las URLs ya que cambiaron:

const GOOGLE_AUTHORIZATION_URL = "https://accounts.google.com/o/oauth2/auth";
const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
const GOOGLE_USERINFO_URL = "https://openidconnect.googleapis.com/v1/userinfo";

Esteban Martini

student•

mi humilde aporte a esta clase, es la siguiente.

piensense usando un sistema cualquiera, platzi por ejemplo.

ahora, uds. van a la seccion de login, y se encuentran con el boton loguearse con Google.

cuando uds. hacen click en el boton, el sistema les redirige a google para permitir a platzi usar sus credenciales. (eso es lo que hicimos la clase anterior, la redireccion y el cb)

ahora cuando uds aceptan, darle los permisos, vuelven a platzi, y en ese momento, es que google les devuelve las credenciales que tiene para ese email. y ahi en donde nosotros con nuestro sistema debemos verificar si ya tengo un usuario para las credenciales que me pasa google o los tengo que crear.

espero que este contexto les sirva un poco para entender que estamos haciendo aca.

Sebastian Galindo

student•

Codigo fuente de passport-oauth2:

// NOTE: The _oauth2 property is considered "protected".  Subclasses are
  //       allowed to use it when making protected resource requests to retrieve
  //       the user profile.
  this._oauth2 = new OAuth2(options.clientID,  options.clientSecret,
                            '', options.authorizationURL, options.tokenURL, options.customHeaders);

Alguien en la caja de comentarios ofreció una solución a este problema, ya que hoy en día este método esta protegido! Sin embargo, he encontrado una nueva solución un poco mas corta a hacer otra función o sobrescribir otra:

const jwt = require('jsonwebtoken');
const oAuth2Strategy = new OAuth2Strategy({
    // Todo esto sigue normal
    authorizationURL: GOOGLE_AUTHORIZATION_URL,
    tokenURL: GOOGLE_TOKEN_URL,
    clientID: config.googleClientId,
    clientSecret: config.googleClientSecret,
    callbackURL: '/auth/google-oauth/callback',
}, async (accessToken, refreshToken, params ,profile, cb) => { // Le vamos a agregar un parametro a el callback el cual va a ser 'params'
    console.log(params); // Acá podemos ver que es lo que nos da este parametro, este nos da un objeto donde tenemos el JSON Web Token que nos genera Google.

    const profileUser = jwt.decode(params.id_token) // Utilizamos la librería JWT para poder decodificar dicho JSON Web Token

    console.log(profileUser) // Y aquí podemos ver que al decodificarlo nos da los mismos datos que nos daba _oauth o una peticion Axios hacia la url de infouser

    const { data, status } = await axios({
        url: `${config.apiUrl}/api/auth/sign-provider`,
        method: 'POST',
        data: {
            name: profileUser.name,
            email: profileUser.email,
            password: profileUser.sub, // El sub, equivale al ID!
            apiKeyToken: config.apiKeyToken
        }
    });

    if (!data && status !== 200) return cb(boom.unauthorized(), null);

    return cb(null, data);
})

¿De donde me saque este parámetro en el callback? Este se muestra en los archivos de la librería.

type VerifyFunction =
        ((accessToken: string, refreshToken: string, profile: any, verified: VerifyCallback) => void) |
        ((accessToken: string, refreshToken: string, results: any, profile: any, verified: VerifyCallback) => void);
// Ahí podemos ver el parametro results, en mi caso quize llamarlo params pero tu puedes llamarlo como tu quieras.

Espero les ayude si están teniendo este problema con el _oauth y dejame un like si te sirvió :D

José Armando Gutiérrez Araujo

student•

amigo de cuales paginas sacaste esta solución? Desde la clase anterior no entendí nada, y la poca documentación que conseguí no tiene nada que ver con la manera en la que lo hizo el profesor :(

Jose Anibal Garcia Giraldo

student•

Revisando la documentación de google creo que la GOOGLE_TOKEN_URL cambió. si alguien tiene un error puede probar cambiandola.

Nueva URL:

const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";

Cristian Caraballo

student•

¿Por que hace la peticion en el buscador y no con axios o fetch?

Luis Lira

student•

Creo que es debido a que se debe usar el sistema de Google para iniciar sesión, tal vez necesite validar más cosas más allá del correo y contraseña y por eso es mejor hacerlo directamente con la conexión hacia Google.

Cristian Caraballo

student•

Hola luis, gracias por responder! :D. otra preguntita ¿Lograste hacer que funcione el boton de "iniciar sesion con Google" en la pagina de login de PlatziVideo? yo no se como hacerlo ya llevo dos dias intentandolo :b

Tlacaelel León Villaseñor

student•

Como se podria hacer log out? al momento de acceder de nuevo al endpoint me hace login directo, que si quiero cambiar de usuario?

Johann Rios

student•

a alguien mas le sale este error?

Error: Unknown authentication strategy "google-oauth"

como lo solucionaron

Miguel de la Rosa

student•

No me guarda la cookie y me sale todo este error

Listening http://localhost:5903
  express:router dispatching GET /auth/google-oauth/ +7s
  express:router query  : /auth/google-oauth/ +2ms
  express:router expressInit  : /auth/google-oauth/ +1ms
  express:router jsonParser  : /auth/google-oauth/ +2ms
  express:router cookieParser  : /auth/google-oauth/ +4ms
  express:router dispatching GET /auth/google-oauth/callback?code=4%2F1wGHA5AiFPBFGanRjQ14qB2MUxM1MGlPirOnuky8Y5ljeh1zU6y1CjOw_-1mzPipm7uxuHWJ_lWQHz3YE1XVShI&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none +671ms
  express:router query  : /auth/google-oauth/callback?code=4%2F1wGHA5AiFPBFGanRjQ14qB2MUxM1MGlPirOnuky8Y5ljeh1zU6y1CjOw_-1mzPipm7uxuHWJ_lWQHz3YE1XVShI&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none +1ms
  express:router expressInit  : /auth/google-oauth/callback?code=4%2F1wGHA5AiFPBFGanRjQ14qB2MUxM1MGlPirOnuky8Y5ljeh1zU6y1CjOw_-1mzPipm7uxuHWJ_lWQHz3YE1XVShI&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none +4ms
  express:router jsonParser  : /auth/google-oauth/callback?code=4%2F1wGHA5AiFPBFGanRjQ14qB2MUxM1MGlPirOnuky8Y5ljeh1zU6y1CjOw_-1mzPipm7uxuHWJ_lWQHz3YE1XVShI&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none +0ms
  express:router cookieParser  : /auth/google-oauth/callback?code=4%2F1wGHA5AiFPBFGanRjQ14qB2MUxM1MGlPirOnuky8Y5ljeh1zU6y1CjOw_-1mzPipm7uxuHWJ_lWQHz3YE1XVShI&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid&authuser=0&prompt=none +0ms

Javier Armando Vargas Vega

student•

He probado la aplicación con google y no funciona. Sale un error [object Object]. He revisado el código y parecer coincidir con lo dicho en la clase. En la terminal de localhost:8000 aparece esto:

express:router dispatching GET /auth/google-oauth/callback?code=4%2F1wH1p-5ZIijwLYWWBLZNxs3FypTRMVFry8fNjncumS3AvZBPJHB1eQMzYsAgJQTSZQIeikdw2HE2fFWDG2nck4Q&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none +554ms express:router query : /auth/google-oauth/callback?code=4%2F1wH1p-5ZIijwLYWWBLZNxs3FypTRMVFry8fNjncumS3AvZBPJHB1eQMzYsAgJQTSZQIeikdw2HE2fFWDG2nck4Q&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none +0ms express:router expressInit : /auth/google-oauth/callback?code=4%2F1wH1p-5ZIijwLYWWBLZNxs3FypTRMVFry8fNjncumS3AvZBPJHB1eQMzYsAgJQTSZQIeikdw2HE2fFWDG2nck4Q&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none +1ms express:router jsonParser : /auth/google-oauth/callback?code=4%2F1wH1p-5ZIijwLYWWBLZNxs3FypTRMVFry8fNjncumS3AvZBPJHB1eQMzYsAgJQTSZQIeikdw2HE2fFWDG2nck4Q&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none +1ms express:router cookieParser : /auth/google-oauth/callback?code=4%2F1wH1p-5ZIijwLYWWBLZNxs3FypTRMVFry8fNjncumS3AvZBPJHB1eQMzYsAgJQTSZQIeikdw2HE2fFWDG2nck4Q&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none +0ms [object Object]

Llevo un montón de tiempo intentando saber cuál es el error pero no logro encontrar luces.

Alguien podría ayudarme.

El repositorio del proyecto es https://github.com/Javieravv/backend-con-node

Gracias.

Javier Armando Vargas Vega

student•

Sigo varado en este error. Por favor alguien que me ayude. Gracias

Freddy Barrios

student•

Estoy obteniendo este error alguien sabe por que?

TokenError: Bad Request at OAuth2Strategy.parseErrorResponse (C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\passport-oauth2\lib\strategy.js:358:12) at OAuth2Strategy._createOAuthError (C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\passport-oauth2\lib\strategy.js:405:16) at C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\passport-oauth2\lib\strategy.js:175:45 at C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\oauth\lib\oauth2.js:191:18 at passBackControl (C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\oauth\lib\oauth2.js:132:9) at IncomingMessage.<anonymous> (C:\Users\fbarrios\git\platzi\AuthenticationPasswordJS\ssr-server\node_modules\oauth\lib\oauth2.js:157:7) at IncomingMessage.emit (events.js:327:22) at endReadableNT (_stream_readable.js:1221:12) at processTicksAndRejections (internal/process/task_queues.js:84:21)

Fernando Cordero

student•

pudiste resolver?

Luis Fernando Méndez González

student•

Estaba teniendo el mismo error, si revisaba la consola encontraba que tenía un problema con el apiKeyToken, pues estaba vacío, esto generaba el error en la consulta, recuerda que tu variable de entorno de apiKeyToken debe ser igual que la veriable del Token público del API que estamos manejando movies-api,

Sebastian Galindo

student•

El flujo de la autenticacion por archivos es: index.js (/auth/google-oauth) -> oauth.js (Strategie) -> auth.js (/sign-provider) -> users.js (Service) -> MongoDB (Create/read user) -> auth.js (Comeback with JWT and user) -> oauth.js (Sending user to req.user) -> Executes the Callback URL set to Google -> index.js (/auth/google-oauth/callback) -> Client (Cookie and user in JSON)

Juan Diego Garin

student•

Muy buena clase

Implementando Sign Provider en nuestra API

Aprender sobre autenticación y autorización

Lo que aprenderás sobre Passport.js

Stack de seguridad moderno

¿Qué es la autenticación y la autorización ?

Introducción a las sesiones

Conocer qué son los JSON Web Tokens

Anatomía de un JWT

Autenticación tradicional vs JWT

Firmando y Verificando nuestro JWT

Server-side vs Client-side sessions

Buenas prácticas con JWT

Entender cómo funcionan las cookies

¿Qué son las cookies y cómo implementar el manejo de sesión?

Cookies vs Session Storage vs Local Storage

Implementar autenticación en Express usando Passport.js

Arquitectura del proyecto Platzi Video

Agregando la colección de usuarios

Agregando la colección de películas de usuario

Implementando el POST y DELETE de las películas de usuario

Cómo conectarnos a la base de datos

Configuración de Passport.js

Implementación de BasicStrategy con Passport.js

Implementación de Strategy y ExtractJwt con Passport.js

Implementación de nuestro Sign-in

Implementación de nuestro Sign-up

Protegiendo nuestras rutas con Passport.js

Middleware para el manejo de scopes

Configuración del server render

Comunicación máquina a máquina

Implementando recordar sesión

Implementación de las rutas de las películas de usuario

Entender qué es OAuth 2.0 y OpenID Connect

¿Qué es OAuth 2.0 y OpenID Connect?

Implementar autenticación con redes sociales

Cómo crear un proyecto en Google API para hacer autenticación con 0Auth 2.0

Implementando 0Auth2.0 con Google

Implementando Sign Provider en nuestra API

Autenticación con Google usando OpenID Connect

Cómo crear una cuenta de desarrollador con Twitter

Autenticación con Twitter

Autenticación con Facebook

Asegurar tu aplicación de Express

Seguridad con Helmet y npm audit

Automatizar el chequeo de vulnerabilidades con Snyk

Qué es OWASP y buenas prácticas de seguridad

Conclusiones y cierre del curso