Consulta, altas de usuarios y manejos de errores en autenticación

Clase 41 de 61 • Curso Profesional de Node.js y JavaScript 2016

Clase anteriorSiguiente clase

Leonardo Acosta

student•

Como realizo autenticacion local con permisos en un una app?

Armando Alamilla Cuellar

student•

¿te refieres a iniciar sesión con la app de Facebook?

Rafael Adolfo Gutiérrez Ponce

student•

Si llegan a tener problemas al hacer signin prueben indexando username en el data explorer de rethinkdb

r.db("platzigram").table('users').indexCreate('username')

Miguel Angel Espeso Alvarez

student•

Joder todo el dia llevo dando vueltas al codigo…
Me fije en los aportes de otros compis pero no en el tuyo.
Aleluyaaa…
Gracias, funcioono.
Ahora voy a preguntar yo el porque hay que hacer eso

Miguel Angel Espeso Alvarez

student•

Para crear usuaria se hace asi: r.db("platzigram").table('users').indexCreate('username')

Pero como hago desde el data explorer para eliminar los usuarios creados, probe : r.db("platzigram").table('users').indexDrop('miguelito')

Pero no me funciona.
¿ Como se borra un usuario en concreto ?
Gracias.

Diego Forero

Team Platzi•

Es algo como
r.db("platzigram").table("users").filter(r.row['username'] = 'miguelito').delete().run(conn)
conn es la conexión a la base de datos.

Diego Forero

Team Platzi•

Te recomiendo leer la documentación de RethinkDB ya que no hace parte del curso. https://rethinkdb.com/docs/guide/javascript/

Esteban Ponce de León

student•

Una duda con relación a los índices en rethinkdb: indexCreate. Efectivamente, el login no redirigía a la ruta inicial: '/', sino hasta crear manualmente los índices en rethinkdb. ¿Cómo puedo entender esta lógica en la autenticación?

Juan Diego Silva Garcia

student•

Hola @estebanpdl ya entendiste la lógica de autenticación?

Didier Zúñiga

student•

Hola muchachos, al intentar hacer el login me deja en el mismo template de signin, no me redirecciona al ‘/’, ya he mirado en varias partes del código pero no he encontrado, alguien mas sabrá que puede ser?

Ivan Robles

student•

Hola!!, lograste resolver el problema? Me sucede igual, no me redirecciona con el password y usuario correctos a ‘/’

Didier Zúñiga

student•

Aún no he podido, recuerdas que versión de node esta usando Julian?
Lo unico que se me ocurre es la versión de Node, pues ya creo haber revisado todo lo demás

Miguel Angel Espeso Alvarez

student•

Hola, gracias al aportes de @rafaelgp87 puede hacer login.
Pero tengo una pregunta, ¿ porque he tenido que crear el usuario manualmente cuando el resto de datos se crearon automáticamente desde la base de datos…?
¿ Que parte de la aplicación debo revisar para corregir este error ??
Porque revise la creación de tablas y en un principio se ven bien ?
Esperare y si es necesario muestrear el código, pero si pueden decirme que debo mirar con mas detalle… si no les enseñaré mi codigo a ver que tengo mal.
Gracias.

Diego Forero

Team Platzi•

No se creo el usuario, lo que creas es el index para que se pueda buscar por nombre de usuario, si no creo que por defecto solo busca por id.

Miguel Angel Espeso Alvarez

student•

Osea que en la base de daos si que se crea, pero en client se crea el index, me liado un poco, que clases debería ver para entender un poco mejor…??

Manuel Calle Pérez

student•

me sale este error

/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/async.js:61

fn = function () { throw arg; };

TypeError: Cannot set property 'token' of undefined

at /Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram/auth/index.js:32:15

at tryCatcher (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/util.js:16:23)

at Promise.errorAdapter [as _rejectionHandler0] (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/nodeify.js:35:34)

at Promise._settlePromise (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/promise.js:564:21)

at Promise._settlePromise0 (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/promise.js:612:10)

at Promise._settlePromises (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/promise.js:687:18)

at Async._drainQueue (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/async.js:138:16)

at Async._drainQueues (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/async.js:148:10)

at Immediate.Async.drainQueues [as _onImmediate] (/Users/ManuelSt/Documents/MACPI/estudio/CURSO DEFINITIVO JAVASCRIPT/jambligram-client/node_modules/bluebird/js/release/async.js:17:14)

at processImmediate [as _immediateCallback] (timers.js:383:17)

Manuel Calle Pérez

student•

Ya lo resolví el problema era que las variables de entorno se habian desconfigurado, al parecer cuando cierro todo se desconfiguran.

Gracias

Julian Correa Romero

student•

Hola Manuel las variables de entorno cada vez que cierres una consola se eliminan, para configurarlas debes cargarlas en el .bashrc que es un script que se ejecuta cuando abres la cosola, el .baschrc esta en /home/NOMBRE_USUARIO/.bashrc Hay un .bashrc por cada usuario en el pc.

Javier Alejandro Perez Fernandez

student•

Necesito ayuda en mi proyecto, a este punto todo funcionaba bien pero cuando corro el proyecto me sale el error:

fn = function () { throw arg; };
^
TypeError: Cannot set property 'token' of undefined

Por favor su ayuda llevo días intentando arreglar esto…

Victor Eduardo Aguilera Gomez

student•

Tengo este error en la funcion Deserialize User, parece ser que el token no llega cada vez que se ejecuta esta funcion y da error. esto se vuelve mas problematico cuando tenemos que guardar la referencia de las imagenes en la base de datos

Javier Alejandro Perez Fernandez

student•

Pude resolverlo, resulta que se requieren varias cosas, ya estamos pasando un poco a produccion entonces:

Primero: Deben comentar en cada microservicio auth, users y pictures la parte de:

/*
if (env === 'test') {
  db = new DbStub()
}
*/

y también comentar las lineas en el microservicio de users.js donde esté:

// await db.disconnect()

Todas estas lineas es solo para test.

Segundo: Deben tener la base de datos platzigram con las tablas e indices creados en rethinkDB y obviamente tener corriendo a rethinkDB

Tercero: Haber levantado cada uno de los microservicios con micro. Tener instalado micro@4.1.1 para no tener problema de transpilar con babel.

Cuarto: Tener un usuario registrado en la base de datos. y hacer el login que redirecciona*1 a “/”. Subir una imagen verificando con las Herramientas de Desarrollador que lo realiza ya que está autenticado.

*1: La parte de redireccionar por favor revisen detenidamente que no tengan un typo. Tal cual como lo explica Julian funciona la redireccion.

Espero que les sirva, Cordial saludo a todos!!

Miguel Angel Espeso Alvarez

student•

Hola, escribí mi problema y me desaparecio.
Lo escribo de nuevo.
Tengo un error a la hora de hacer login, me sale mensaje en pantalla con los módulos a los que afecta el error:
Espero que valga con el código que muestro para que vean algo, con los aportes de los compañeros no di con la solución.
Muestro el codigo y una captura de de lo que muestra en pantalla.
Gracias, y disculpen, imagino que la pregunta saldrá por otro lado, no se donde .

ReferenceError: client is not defined
at Strategy.exports.localStrategy.LocalStrategy [as _verify] (C:\Users\victor\CURSOS\JAVASCRIPT-NODE\PROYECTO MICHAELGRAM\michaelgram\auth\index.js:8:3)
at Strategy.authenticate (C:\Users\victor\CURSOS\JAVASCRIPT-NODE\PROYECTO MICHAELGRAM\michaelgram\node_modules\passport-local\lib\strategy.js:90:12)

//  SERVER.JS

let express = require('express');
let aws = require('aws-sdk');
let multer = require('multer');
let multerS3 = require('multer-s3');
let ext = require('file-extension');
let cookieParser = require('cookie-parser');
let bodyParser = require('body-parser');
let expressSession = require('express-session');
let passport = require('passport');
let michaelgram = require('michaelgram-client');
let auth = require('./auth')
let config = require('./config');
let port = process.env.PORT || 3000;

let client = michaelgram.createClient(config.client);

let s3 = new aws.S3({
  accessKeyId: config.aws.accessKey,
  secretAccessKey: config.aws.secretKey
});

let storage = multerS3({
  s3: s3,
  bucket: 'michaelgram',
  acl: 'public-read',
  metadata: function (req, file, cb) {
    cb(null, { fieldName: file.fieldname })
  },
  key: function (req, file, cb) {
    cb(null, +Date.now() + '.' + ext(file.originalname))
  }
});


let upload = multer({ storage: storage }).single('picture');

let app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(expressSession({
  secret: config.secret,
  resave: false,
  saveUninitialized: false
}))
app.use(passport.initialize())
app.use(passport.session())
app.set('view engine', 'pug');
app.use(express.static('public'));

passport.use(auth.localStrategy);
passport.deserializeUser(auth.deserializeUser);
passport.serializeUser(auth.serializeUser);

app.get('/', function (req, res) {
  res.render('index', { title: 'Michaelgram' });
})

app.get('/signup', function (req, res) {
  res.render('index', { title: 'Michaelgram - Signup' });
})

app.post('/signup', function (req, res) {
  let user = req.body;
  client.saveUser(user, function (err, usr) {
    if (err) return res.status(500).send(err.message)
    debugger
    res.redirect('/signin');
  });
});

app.get('/signin', function (req, res) {
  res.render('index', { title: 'Michaelgram - Signin' });
})

app.post('/login', passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/signin'
}));
debugger

function ensureAuth (req, res, next) {
  if (req.isAuthenticated()) {
    return next()
  }

  res.status(401).send({ error: 'not authenticated' })
}

app.get('/api/pictures', function (req, res, next) {
  let pictures = [
    {
      user: {
        username: 'miguelito',
        avatar: 'https://i1.wp.com/www.sopitas.com/wp-content/uploads/2016/04/escorpiones.jpg?fit=860%2C484'
      },
      url: 'office.jpg',
      likes: 0,
      liked: false,
      createdAt: new Date().getTime()
    },
    {
      user: {
        username: 'miguelito',
        avatar: 'https://i1.wp.com/www.sopitas.com/wp-content/uploads/2016/04/escorpiones.jpg?fit=860%2C484'
      },
      url: 'office.jpg',
      likes: 1,
      liked: true,
      createdAt: new Date().setDate(new Date().getDate() - 10)
    }
  ];

  setTimeout(function () {
    res.send(pictures);
  }, 2000)
});

app.post('/api/pictures', ensureAuth,function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.send(500, "Error uploading file");
    }
    res.send('File uploaded');
  })
})

app.get('/api/user/:username', (req, res) => {
  const user = {
    username: 'miguelito',
    avatar: 'https://i1.wp.com/www.sopitas.com/wp-content/uploads/2016/04/escorpiones.jpg?fit=860%2C484',
    pictures: [
      {
        id: 1,
        src: 'https://us.123rf.com/450wm/swisshippo/swisshippo1310/swisshippo131000194/23050498-pueblo-hist%C3%B3rico-en-el-lago-thun-suiza.jpg?ver=6',
        likes: 3
      },
      {
        id: 2,
        src: 'http://footage.framepool.com/shotimg/qf/300705148-blueemlisalp-lago-de-thun-bandera-suiza-popa.jpg',
        likes: 1
      },
      {
        id: 3,
        src: 'https://thumbs.dreamstime.com/b/castillo-de-oberhofen-en-el-lago-thun-suiza-16859899.jpg',
        likes: 10
      },
      {
        id: 4,
        src: 'https://sobresuiza.com/wp-content/uploads/2009/07/thun.jpg',
        likes: 0
      },
      {
        id: 5,
        src: 'https://i1.wp.com/viajeslostplanet.com/wp-content/uploads/2018/03/20170729_213300.jpg?fit=1200%2C900&ssl=1',
        likes: 23
      },
      {
        id: 6,
        src: 'https://us.123rf.com/450wm/swisshippo/swisshippo1310/swisshippo131000194/23050498-pueblo-hist%C3%B3rico-en-el-lago-thun-suiza.jpg?ver=6',
        likes: 11
      }
    ]
  }

  res.send(user);
})

app.get('/:username', function (req, res) {
  res.render('index', { title: `Michaelgram - ${req.params.username}` });
})

app.get('/:username/:id', function (req, res) {
  res.render('index', { title: `Michaelgram - ${req.params.username}` });
})

app.listen(3000, function (err) {
  if (err) return console.log('Hubo un error'), process.exit(1);

  console.log('Michaelgram escuchando en el puerto 3000');
})


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// auth/index.js

let LocalStrategy = require('passport-local').Strategy;
let michaelgram = require('michaelgram-client');
let config = require('../config');

exports.localStrategy = new LocalStrategy((username, password, done) => {
  client.auth(username, password, (err, token) => {
    if (err) {
      return done(null, false, { message: 'username and password not found' })
    }

    client.getUser(username, (err, user) => {
      if (err) {
        return done(null, false, { message: `an error ocurred: ${err.message}` })
      }

      user.token = token
      return done(null, user)
    })
  })
})

exports.serializeUser = function (user, done) {
  done(null, {
    username: user.username,
    token: user.token
  });
}

exports.deserializeUser = function (user, done) {
  client.getUser(user.username, (err, usr) => {
    usr.token = user.token
    done(err, usr)
  });
}

Diego Forero

Team Platzi•

Te falta definir el client

var client = michaelgram.createClient(config.client);

Eso lo pones justo después de la definición de la variable config

Miguel Angel Espeso Alvarez

student•

Yaya tela…

Miguel Angel Espeso Alvarez

student•

Hola, estoy teniendo problemas para subir las imagenes.
Probando las herramientas de google me indica que el error esta en un modulo_node/ client.js:772
Muestro el codigo que hay en esa parte del modulo señalado.
En la captura re ve donde marca los errores.
Tambien dice de homepage/ template.js:

let data = new FormData(this)
request
   .post('api/pictures')
   .send(data)
  ..end(function (err, res ) {
     console.log(arguments)
   })
}

Este es el codigo del modulo_node/ client.js donde marca el error:

//IE11 xhr.send(undefined) send 'undefined' string as POST payload (instead of nothing)
// We need null here if data is undefined

xhr.send(typeof data !== 'undefined' ? : null; // esta se supone que me da el error
returthis;

Bien, pues con eso no se donde buscar el error, he buscado posibles typo, pero no veo nada, tambien es posible que no este buscando en el codigo correcto.
Si les paso algo parecido y pueden ayudarme.
He probado diferentes soluciones de los comentarios de compañeros, aunque no tengan los mismos errores, y sin exito
Dejo una captura del lo que muestra Network, que estudie en google a ver si sabia interpretar, pero tendre que estudiar mas para conseguir entender las herramientas de google.
Muestro el error de consola de google, por si pueden darme idea de donde debo buscar.
Gracias.

Arguments(2)Â [Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed byâ€¦, undefined, callee: (...), Symbol(Symbol.iterator): Æ’]
Error: Request has been terminated Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc. at Request.crossDomainError (http://localhost:3000/app.js:15084:13) at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/app.js:15166:19)
crossDomain
:
true
method
:
"POST"
status
:
undefined
url
:
"/api/pictures"
message
:
"Request has been terminatedâ†µPossible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc."
stack
:
"Error: Request has been terminatedâ†µPossible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.â†µ    at Request.crossDomainError (http://localhost:3000/app.js:15084:13)â†µ    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/app.js:15166:19)"
__proto__
:
Object
1
:
undefined
callee
:
(...)
length
:
2
Symbol(Symbol.iterator)
:
Æ’ values()
get callee
:
Æ’ ()
set callee
:
Æ’ ()
__proto__
:
Object

capturas:

Diego Forero

Team Platzi•

No se si es un error al copiar el código pero veo que tienes doble . en esta línea
..end(function (err, res ) {

Miguel Angel Espeso Alvarez

student•

Gracias, en el proyecto esta con un solo punto.
El problema dice que esta en node_modules/superagent/lib/client.js
Lineas 676 y 772, mas concretamente muestran lo siguiente

// linea anterior,  676, y posterior

// querystring
this._finalizeQueryString();

return this._end(); // esta esla linea que marca el problema
};


// Por otro lado la lineas anteriores y 772

// IE11 xhr.send(undefined) send 'undefined' string as POST payload (instead of nothing)
// We need null here if data is undefined

xhr.send(typeof data !== 'undefined' ? : null; // esta se supone que me da el error, 772
retur this;

No se por donde salir ni donde preguntar, y mas vueltas que le doy, no se encontrar el error.
Gracias.

Consulta, altas de usuarios y manejos de errores en autenticación

Crea el backend de tu aplicación

Introducción y arquitectura de nuestro proyecto

Cómo crear una cuenta de Amazon Web Services y configurar S3 ( Almacenamiento de Archivos )

Usando el SDK de Amazon Web Services

Cómo agregar Standard ( Linter ) a nuestro código en JavaScript

Testing en JavaScript usando AVA

Prueba unitaria para validar un array

Uso de expresiones regulares para nuestras pruebas unitarias

Módulo de base de datos con RethinkDB

Introduccion a RethinkDB

Accediendo a nuestra base de datos Rethinkdb desde Node.js

Creación de test para RethinkDB y almacenamiento de ruta de imágenes

Almacenamiento de rutas de imágenes en RethinkDB

Completando el test para nuestro objeto imagen

Creación de un fixture para test de petición de imágenes

Petición de de imagen desde base de datos

Consulta de todas las imágenes de nuestra base de datos

Buenas prácticas de creación de usuarios en Backend (Encriptación con Hash)

Petición de un usuario desde base de datos

Autenticación de usuario mediante password

Control de errores mediante excepciones (Try, Catch, Throws )

Consulta de imágenes en relación a nombre de usuario

Consulta de imágenes en relación a tag

Preparando nuestro módulo para microservicios

Módulo del API de nuestra aplicación

Introducción a los Microservicios

Creación de rutas para microservicios

Creación de nuestro endpoint GET /picture

Creción de nuestro endpoint POST /picture

Creción de nuestro endpoint POST /picture/:id/like

Creción de nuestro endpoint GET /picture/list

Creción de nuestro endpoint GET /picture/tag

Creación de nuestro endpoint POST /user

Creación de nuestro endpoint GET /user-name

Creación de Tokens para nuestro API usando JSON Web Tokens

Limitando nuestros request esperando recibir un Token

Test de autenticación de usuario

Módulo de Client de nuestra aplicación

Creación de nuestro cliente

Implementando el perfil de usuario

Carga de imágenes desde nuestro cliente

Cómo implementar autenticación de usuarios con Passport

Configurando un middleware en express

Estrategia de autenticación local (password / contraseña )

Consulta, altas de usuarios y manejos de errores en autenticación

Autenticación con Facebook

Creación de un token del API a partir de autenticación por Facebook

Manejo de sesiones de usuarios

Integración con nuestro Frontend

Consulta y alta de imagenes

Implementación de perfil de usuario

RealTime con Socket.io

Implementación de de Socket.io junto con RethinkDB

Escuchar un evento y mostrar los cambios en frontend

Lleva tu proyecto a producción

Introduccion a Vagrant

Creando nuestra primer maquina virtual con Vagrant

Introduccion a Ansible

Creando nuestro primer rol de ansible

Creando nuestro primer playbook para despliegue

Crear tareas para Platzigram dentro de Ansible

Crear tareas para el resto de los proyectos

Creación de servicios de upstart

Introducción a NGINX

Creación de rutas para nuestros microservicios

Llevando nuestro proyecto a Digital Ocean

Dominio y proyecto en producción

Terminaste este curso, tenemos buenas noticias, entra y entérate.