Configuración del server render

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

Contenido del curso

Aprender sobre autenticación y autorización

Conocer qué son los JSON Web Tokens

Entender cómo funcionan las cookies

Implementar autenticación en Express usando Passport.js

Entender qué es OAuth 2.0 y OpenID Connect

28
¿Qué es OAuth 2.0 y OpenID Connect?
04:25 min

Implementar autenticación con redes sociales

Asegurar tu aplicación de Express

Tomar examen

Resumen

En esta parte del curso vamos a explorar el proyecto de server side render, que trabajaremos en las siguientes clases.

Comentarios

Miguel Segura

student•

Este es el comando para instalar todas las dependencias de nuestro ssr-server:

npm i @hapi/boom axios cookie-parser dotenv express express-session lodash passport passport-http passport-oauth passport-twitter

Este es el comando para instalar nuestras dependencias de desarrollo:

npm i -D nodemon

Jose Anibal Garcia Giraldo

student•

Si alguien más como yo no conocía que es un proxy. Básicamente un servidor proxy es como un puente entre el origen y el destino de una información x, en este caso el API server hasta el cliente final, la utilidad de este usualmente es controlar el acceso y filtrar contenido :D.

Agradecería si alguien más quiere aportar algo para que todos podamos entender mejor.

Juanse Calviño

student•

Hola, cual seria la mejor practica para estrcutrar un proyecto MERN en este caso? El backend de la API dedicado en un servidor aparte, y el Front + SSR en otro?

Luis Lazcano

student•

Te reocmiendo ver el Curso de Integración de Backend y Frontend Para adentrarte más en ese tema Saludos

Jair Celis

student•

Hola donde puedo encontrar el curso que comenta @glrodasz "curso backend for frontend" donde se ve la implementación de la ruta de películas, gracias

JuanFe Peralta

Team Platzi•

¡Hola Jair! :)

El curso que se comenta en la clase lo puedes encontrar haciendo clic aquí.

Israel Yance

student•

Es este: https://platzi.com/clases/bff/

Puedes ver toda la ruta de aprendizaje aquí: https://platzi.com/learning-path/escuelajs/

Didier Zúñiga

student•

Si el modulo movies-api lo depslegamos en con now a un server, el modulo ssr-server iría en ese mismo server pero trabajando en diferentes puertos? O ssr-server se desplegaría en otra instancia de now?

Maria Elizabeth Minero Alvarenga

student•

El servidor de SSR se utiliza como proxy entre el frontend y el API. El token que regresa el API al hacer sign-in se inyecta en una cookie. Las otras rutas del SSR leeran el token de la cookie creada.

Wilson Fernando Antury Torres

student•

Alex Abel Lerman

student•

No puedo avanzar hace horas y no se donde esta el problema la verdad. el codigo es exactamente el mismo que el del profesor

jwt.js

const passport = require('passport');
const { Strategy, ExtractJwt } = require('passport-jwt');
const boom = require('@hapi/boom');

const UsersService = require('../../../services/users');
const { config } = require('../../../config');

passport.use(
    new Strategy(
        {
            secretOrKey: config.authJwtToken,
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken()
        },
        async function(tokenPayload, cb) {
            const usersService = new UsersService();

            try {
                const user = await usersService.getUser({ email: tokenPayload.email });

                if (!user) {
                    return cb(boom.unauthorized(), false);
                }

                delete user.password;

                cb(null, { ...user, scopes: tokenPayload.scopes });
            } catch (error) {
                return cb(error);
            }
        }
    )
);

auth.js

const express = require('express');
const passport = require('passport');
const boom = require('@hapi/boom');
const jwt = require('jsonwebtoken');
const ApiKeysService = require('../services/apiKeys');
const UsersService = require('../services/users');
const { validationHandler } = require('../utils/middlewares/validationHandler');
const { createUserSchema } = require('../utils/schemas/userSchema');

const { config: authJwtSecret } = require('../config/index');
require('../utils/auth/strategies/basic');

// Basic Strategy
function authApi(app) {
  const router = express.Router();
  app.use('/api/auth', router);

  const apiKeysService = new ApiKeysService();
  const usersService = new UsersService();

  // On login
  router.post('/sign-in', async function (req, res, next) {
    const { apiKeyToken } = req.body;

    if (!apiKeyToken) {
      next(boom.unauthorized('Api token is required'));
    }

    passport.authenticate(
      'basic',
      function (error, user) {
        try {
          if (error || !user) {
            next(boom.unauthorized());
          }

          req.login(user, { session: false }, async function (err) {
            if (error) {
              next(err);
            }
            const apiKey = await apiKeysService.getApiKey({
              token: apiKeyToken,
            });

            if (!apiKeyToken) {
              next(boom.unauthorized());
            }
            const { _id: id, name, email } = user;
            const payload = {
              sub: id,
              name,
              email,
              scopes: apiKey.scopes,
            };
            const token = jwt.sign(payload, `${authJwtSecret}`, {
              expiresIn: '15m',
            });
            return res.status(200).json({
              token,
              user: { id, name, email },
            });
          });
        } catch (err) {
          next(err);
        }
      },
      () => console.log('Token obtained')
    )(req, res, next);
  });

  // On sign up
  router.post('/sign-up', validationHandler(createUserSchema), async function (
    req,
    res,
    next
  ) {
    const { body: user } = req;

    try {
      const createdUserId = await usersService.createUser({ user });
      return res.status(201).json({
        data: createdUserId,
        message: 'User created!',
      });
    } catch (err) {
      next(err);
    }
  });
}

module.exports = { authApi };

movies.js

const express = require('express');
const passport = require('passport');
const MoviesService = require('../services/movies');
const {
  movieIdSchema,
  createMovieSchema,
  updateMovieSchema,
} = require('../utils/schemas/movieSchema');
const { validationHandler } = require('../utils/middlewares/validationHandler');

// JWT Strategy to protect routes
require('../utils/auth/strategies/jwt');

const moviesApi = (app) => {
  const router = express.Router();
  app.use('/api/movies', router);

  // Instantiation of service
  const moviesService = new MoviesService();

  // Routing Section
  router.get(
    '/',
      passport.authenticate('jwt', { session: false }),
    async (req, res, next) => {
      const { tags } = req.query;
      try {
        const movies = await moviesService.getMovies({ tags });

        return res.status(200).json({
          data: movies,
          message: 'Movies listed!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.get(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    async (req, res, next) => {
      const { movieId } = req.params;
      try {
        const movies = await moviesService.getMovie({ movieId });
        return res.status(200).json({
          data: movies,
          message: 'Movie retrieved!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.post(
    '/',
    passport.authenticate('jwt', { session: false }),
    validationHandler(createMovieSchema),
    async (req, res, next) => {
      const { body: movie } = req;
      try {
        const createMovieId = await moviesService.createMovie({ movie });
        return res.status(201).json({
          data: createMovieId,
          message: 'Movies created!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.put(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    validationHandler(updateMovieSchema),
    async (req, res, next) => {
      const { movieId } = req.params;
      const { body: movie } = req;
      try {
        const updatedMovieId = await moviesService.updateMovie({
          movieId,
          movie,
        });
        return res.status(200).json({
          data: updatedMovieId,
          message: 'Movie updated!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.delete(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    async (req, res, next) => {
      const { movieId } = req.params;
      try {
        const deletedMovie = await moviesService.deleteMovie({ movieId });
        return res.status(200).json({
          data: deletedMovie,
          message: 'Movie deleted!',
        });
      } catch (err) {
        next(err);
      }
    }
  );
};

module.exports = { moviesApi };

Enrique Devars

teacher•

Hola ¿qué error te saca?

Alex Abel Lerman

student•

Me dice Unauthorized nada mas. Solo eso. Como si el token no concidiera en Postman pero intente de todo. Yo veo lo mismo que el profe en codigo

José Alejandro Muñoz Ruiz

student•

Antes de continuar recomiendo refrescar memoria con la clase donde se explica la arquitectura del proyecto

https://platzi.com/clases/1649-passport/21983-arquitectura-del-proyecto-platzi-video/

David Alberto

student•

Según entiendo el front end hace las peticiones al render server, y el render server a su vez se encarga de hace las peticiones a la api , el render server es el que lleva los permisos. Esto se hace para mantener los permisos separados del front end y del servidor principal. Si es correcto todo esto que digo ?

Naldo Duran

student•

✌

Juan Sebastian Tello Quinteros

student•

que genial esta el curso!

Carlos Alfonso Garcia Rivera

student•

no es tan complicado lo que se le hace al server side render

Nicolas Esteban Manograsso

student•

El archivo index.js es nuestro archivo server.js del server side render. También podemos separar las rutas en otro archivo para no colocar todo junto podemos crear un archivo route quedando de la siguiente manera

index.js

import webpack from 'webpack';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import helmet from 'helmet';
import serverRoutes from '../frontend/routes/serverRoutes';
import reducer from '../frontend/reducers';
import data from '../frontend/db.json';
import config from './config';
import routes from './routes';
import getManifest from './getManifest';

const { ENV, PORT } = config;

const app = express();

if (ENV === 'development') {
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { serverSideRender: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));
} else {
  app.use((req, res, next) => {
    if (!req.hashManifest) { req.hashManifest = getManifest(); }
    next();
  });
  app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(helmet.permittedCrossDomainPolicies());
  app.disable('x-powered-by');
}

const setResponse = (html, preloadedState, manifest) => {
  const mainStyle = manifest ? manifest['vendors.css'] : 'assets/vendors.css';
  const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
  const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';

  return (`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <link rel="icon" href="./favicon.ico">
      <link rel="stylesheet" href="${mainStyle}" type="text/css"/> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>RetroGames</title>
    </head>
    <body>
      <div id="app">
        ${html}  
      </div>
      <script>
        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
      </script>
      <script src="${mainBuild}" type="text/javascript"></script>
      <script src="${vendorBuild}" type="text/javascript"></script>
    </body>
    </html>
  `);
};

const renderApp = (req, res) => {
  const store = createStore(reducer, data);
  const preloadedState = store.getState();
  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={{}}>
        {renderRoutes(serverRoutes)}
      </StaticRouter>
    </Provider>,
  );

  res.set(
    'Content-Security-Policy',
    "script-src 'self' 'sha256-xICtRF1AcMKVnMPpCzXNMBtMuOIlXACQ7kcPYnmSvik='",
  );
  res.send(setResponse(html, preloadedState, req.hashManifest));
};

app.use(express.json());

app.get('*', renderApp);
routes(app);

app.listen(PORT, (err) => {
  if (err) console.error(err);
  else console.log(`Server running on port ${PORT}`);
});

routes.js


const routes = (app) => {
  app.use('/api/games', router);

  app.post('/auth/sign-in', async (req, res, next) => {

  });

  app.post('/auth/sign-up', async (req, res, next) => {

  });

  app.get('/movies', async (req, res, next) => {

  });

  app.post('/user-movies', async (req, res, next) => {

  });

  app.delete('/user-movies/:userMovieId', async (req, res, next) => {

  });
};

export default routes;

Karen Paola Diaz Duarte

student•

Chévere :)

const passport = require('passport');
const { Strategy, ExtractJwt } = require('passport-jwt');
const boom = require('@hapi/boom');

const UsersService = require('../../../services/users');
const { config } = require('../../../config');

passport.use(
    new Strategy(
        {
            secretOrKey: config.authJwtToken,
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken()
        },
        async function(tokenPayload, cb) {
            const usersService = new UsersService();

            try {
                const user = await usersService.getUser({ email: tokenPayload.email });

                if (!user) {
                    return cb(boom.unauthorized(), false);
                }

                delete user.password;

                cb(null, { ...user, scopes: tokenPayload.scopes });
            } catch (error) {
                return cb(error);
            }
        }
    )
);

const express = require('express');
const passport = require('passport');
const boom = require('@hapi/boom');
const jwt = require('jsonwebtoken');
const ApiKeysService = require('../services/apiKeys');
const UsersService = require('../services/users');
const { validationHandler } = require('../utils/middlewares/validationHandler');
const { createUserSchema } = require('../utils/schemas/userSchema');

const { config: authJwtSecret } = require('../config/index');
require('../utils/auth/strategies/basic');

// Basic Strategy
function authApi(app) {
  const router = express.Router();
  app.use('/api/auth', router);

  const apiKeysService = new ApiKeysService();
  const usersService = new UsersService();

  // On login
  router.post('/sign-in', async function (req, res, next) {
    const { apiKeyToken } = req.body;

    if (!apiKeyToken) {
      next(boom.unauthorized('Api token is required'));
    }

    passport.authenticate(
      'basic',
      function (error, user) {
        try {
          if (error || !user) {
            next(boom.unauthorized());
          }

          req.login(user, { session: false }, async function (err) {
            if (error) {
              next(err);
            }
            const apiKey = await apiKeysService.getApiKey({
              token: apiKeyToken,
            });

            if (!apiKeyToken) {
              next(boom.unauthorized());
            }
            const { _id: id, name, email } = user;
            const payload = {
              sub: id,
              name,
              email,
              scopes: apiKey.scopes,
            };
            const token = jwt.sign(payload, `${authJwtSecret}`, {
              expiresIn: '15m',
            });
            return res.status(200).json({
              token,
              user: { id, name, email },
            });
          });
        } catch (err) {
          next(err);
        }
      },
      () => console.log('Token obtained')
    )(req, res, next);
  });

  // On sign up
  router.post('/sign-up', validationHandler(createUserSchema), async function (
    req,
    res,
    next
  ) {
    const { body: user } = req;

    try {
      const createdUserId = await usersService.createUser({ user });
      return res.status(201).json({
        data: createdUserId,
        message: 'User created!',
      });
    } catch (err) {
      next(err);
    }
  });
}

module.exports = { authApi };

const express = require('express');
const passport = require('passport');
const MoviesService = require('../services/movies');
const {
  movieIdSchema,
  createMovieSchema,
  updateMovieSchema,
} = require('../utils/schemas/movieSchema');
const { validationHandler } = require('../utils/middlewares/validationHandler');

// JWT Strategy to protect routes
require('../utils/auth/strategies/jwt');

const moviesApi = (app) => {
  const router = express.Router();
  app.use('/api/movies', router);

  // Instantiation of service
  const moviesService = new MoviesService();

  // Routing Section
  router.get(
    '/',
      passport.authenticate('jwt', { session: false }),
    async (req, res, next) => {
      const { tags } = req.query;
      try {
        const movies = await moviesService.getMovies({ tags });

        return res.status(200).json({
          data: movies,
          message: 'Movies listed!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.get(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    async (req, res, next) => {
      const { movieId } = req.params;
      try {
        const movies = await moviesService.getMovie({ movieId });
        return res.status(200).json({
          data: movies,
          message: 'Movie retrieved!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.post(
    '/',
    passport.authenticate('jwt', { session: false }),
    validationHandler(createMovieSchema),
    async (req, res, next) => {
      const { body: movie } = req;
      try {
        const createMovieId = await moviesService.createMovie({ movie });
        return res.status(201).json({
          data: createMovieId,
          message: 'Movies created!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.put(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    validationHandler(updateMovieSchema),
    async (req, res, next) => {
      const { movieId } = req.params;
      const { body: movie } = req;
      try {
        const updatedMovieId = await moviesService.updateMovie({
          movieId,
          movie,
        });
        return res.status(200).json({
          data: updatedMovieId,
          message: 'Movie updated!',
        });
      } catch (err) {
        next(err);
      }
    }
  );

  router.delete(
    '/:movieId',
    passport.authenticate('jwt', { session: false }),
    validationHandler({ movieId: movieIdSchema }, 'params'),
    async (req, res, next) => {
      const { movieId } = req.params;
      try {
        const deletedMovie = await moviesService.deleteMovie({ movieId });
        return res.status(200).json({
          data: deletedMovie,
          message: 'Movie deleted!',
        });
      } catch (err) {
        next(err);
      }
    }
  );
};

module.exports = { moviesApi };

import webpack from 'webpack';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import helmet from 'helmet';
import serverRoutes from '../frontend/routes/serverRoutes';
import reducer from '../frontend/reducers';
import data from '../frontend/db.json';
import config from './config';
import routes from './routes';
import getManifest from './getManifest';

const { ENV, PORT } = config;

const app = express();

if (ENV === 'development') {
  const webpackConfig = require('../../webpack.config');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const compiler = webpack(webpackConfig);
  const serverConfig = { serverSideRender: true };

  app.use(webpackDevMiddleware(compiler, serverConfig));
  app.use(webpackHotMiddleware(compiler));
} else {
  app.use((req, res, next) => {
    if (!req.hashManifest) { req.hashManifest = getManifest(); }
    next();
  });
  app.use(express.static(`${__dirname}/public`));
  app.use(helmet());
  app.use(helmet.permittedCrossDomainPolicies());
  app.disable('x-powered-by');
}

const setResponse = (html, preloadedState, manifest) => {
  const mainStyle = manifest ? manifest['vendors.css'] : 'assets/vendors.css';
  const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
  const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';

  return (`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <link rel="icon" href="./favicon.ico">
      <link rel="stylesheet" href="${mainStyle}" type="text/css"/> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>RetroGames</title>
    </head>
    <body>
      <div id="app">
        ${html}  
      </div>
      <script>
        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
      </script>
      <script src="${mainBuild}" type="text/javascript"></script>
      <script src="${vendorBuild}" type="text/javascript"></script>
    </body>
    </html>
  `);
};

const renderApp = (req, res) => {
  const store = createStore(reducer, data);
  const preloadedState = store.getState();
  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={{}}>
        {renderRoutes(serverRoutes)}
      </StaticRouter>
    </Provider>,
  );

  res.set(
    'Content-Security-Policy',
    "script-src 'self' 'sha256-xICtRF1AcMKVnMPpCzXNMBtMuOIlXACQ7kcPYnmSvik='",
  );
  res.send(setResponse(html, preloadedState, req.hashManifest));
};

app.use(express.json());

app.get('*', renderApp);
routes(app);

app.listen(PORT, (err) => {
  if (err) console.error(err);
  else console.log(`Server running on port ${PORT}`);
});

const routes = (app) => {
  app.use('/api/games', router);

  app.post('/auth/sign-in', async (req, res, next) => {

  });

  app.post('/auth/sign-up', async (req, res, next) => {

  });

  app.get('/movies', async (req, res, next) => {

  });

  app.post('/user-movies', async (req, res, next) => {

  });

  app.delete('/user-movies/:userMovieId', async (req, res, next) => {

  });
};

export default routes;

Configuración del server render

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