Como crear servidor https con un certificado autofirmado

Como crear servidor HTTPS con un certificado autofirmado

Para habilitar en local host un servicio web con HTTPS es necesario crear certificados autofirmados.

Un certificado autofirmado no es confirmado por una entidad generadora de certificados, aun teniendo una clave privada asociada. Además, incluye una clave pública, información sobre el propietario y la firma propietario.

Un certificado de este tipo es suficiente para crear una conexión HTTPS segura para ambientes de desarrollo, ya que los navegadores se quejarán de que el certificado está autofirmado (y como tal no es de confianza).

Para crearlos ese necesario tener instalado OpenSSL y ejecutar el siguiente comando.
$ openssl req -nodes -new -x509 -keyout server.key -out server.cert

 

En el proceso pedirá información como las 2 primeras letras del nombre del país, luego el nombre del estado o provincia, la localidad (ciudad), también datos de la organización,  por último el nombre común (localhost) y el correo.

 

En el directorio se puede comprobar que se generaron 2 archivos, uno con extensión .cert y el otro .key, estos serán necesarios para generar la conexión https.

Para el siguiente ejemplo, usaré express, un framework muy conocido para crear servicios https.

 

Al comprobar en el navegador, no sucede nada.

Ahora modificando un poco el script para que pueda hacer conexión HTTPS. Primero se importa 2 módulos, HTTPS para crear un webserver y fs para manipular archivos. En el método https.createserver, se pasan los archivos en un JSON y escuchará por el puerto indicado.

 

Al comprobar en el navegador, sale esta pequeña alerta que había mencionado antes, selecciona la opción avanzada y clic en aceptar riesgo y continuar. 

 

y voila, ya se tiene un servicio web corriendo con certificado TLS.

Creando Login MEVN STACK Front

 Primero instalar vuejs click de la pagina oficial, donde tendra toda la documentacion. Por ahora voy se va instalar cli de vue3 con el comando, 

npm install -g @vue/cli

Cuando termina de instalar, para crear un nuevo proyecto le da el comando

vue create bytefate

Me gusta escoger los packetes que voy a utilizar asi que escogi manual.

Luego que tipo de version se quiere trabajar en mi caso sera vue3, ademas babel, router y vuex.

 

Luego quieres el modo history que consiste en quitar el (#) de las rutas. Si colocas no igual va a funcionar. Enter.

Luego archivos dedicados.Si, Enter.


 

Guardar configuracion para nuevos proyectos. No, Enter. Cuando termina te aparecera algo asi.

Ahora hay que ir a la carpeta, que se creo en mi caso bytefate-front y oprimir ejecutar el siguiente comando y el te dira en que puerto esta corriendo.

npm run serve

Despues vas a la direccion que te dio y voula ya esta corriendo.

Ahora con el editor de texto preferido, van a ir a la ruta src/views y vamos a modificar el home.vue.

Voy a quitar todo el contenido del div, a eliminar el import y modificar el export y dejarlo algo asi. 

Dentro del form los input tienen una etiqueta llamada v-model, con ella se va a almacenar en un objeto llamado user, los valores que se le pasaron desde el navegador. Lo que hay en la linea 9 solo es para mostrar en pantalla lo que almaceno el objeto. En la linea 18, asi es como se define el objeto que almacenara la informacion. Se puede probar en el navegador y ver como los datos ingresados en los inputs, se imprimen en el navegador.

Ahora algo mas interesante, como toma la aplicacion los datos desde el navegador.

Primero se importa el mapa de acciones desde vuex, en la linea 26, se trae una accion o mejor una funcion y que la va a ejecutar el form, pasandole como parametro el user que tiene los datos del input. El @submit es un evento propio de vue que se dispara al precionar el boton y el prevent es para que la pagina no se refresque.

Cuando se instala vuex, lo que se pretende es centralizar los datos entre las rutas, los componentes en un lugar. Ese lugar es la ruta store/index.js, por defecto tendra modulos, las acciones por lo general lo que hace es llamar a una mutacion, que a su vez modifica el valor del estado y  el estado es como un tipo de variable global que vamos a acceder a ellas.

Bien como en la vista llamamos en el mapa de acciones a la funcion login, aqui debemos definirla. Hay que pasarle el commit como parametro y el objeto user, ahora con el console.log podemos mostrar los valores en consola.

 

Bien ahora que tal si se envia esos datos al backend?

 

Como se va a hacer una peticion con fetch al backend, lo mejor es convertir la funcion en asincrona, dentro de la sentencia try, se hace una peticion fetch pasandole en el body el objeto usuario y la respuesta la ´muestra por consola. Y el catch me mostrara si hay algun error.

 

En la linea 26 lo que hace es que llama a la mutacion llamada setToken y se le pasa el token recibido del backend. En la linea 8, setToken es una funcion que recibe un objeto state y un payload que en resumen toma una varible que es la que va a interactuar con el navegador pasandole el token para navegar en las rutas protegidas. Se puede visualizar en el almacenamiento en el modo consola del navegador.

Una comprobacion para que la aplicacion compare si hay un token en el navegador desde el componente padre de la aplicacion (App.vue). Lo que hara es con el siguiente script, es que cuando ingrese a la aplicacion verifique si hay un token de un usuario.

Ahora las rutas protegidas.

Lo que se hara es colocar un meta en la rutas protegidas y un foreach, pasandole 3 parametros (to, from, next) y al final verificar si contiene o no esa ruta la meta que se le coloco a la ruta.

En la linea 14 coloco el meta con un booleano en mi caso es isProtected y en la linea 23 se recorre router, verificando si es protegida o no la ruta. E la consola del navegador se podria visualizar el mensaje de protegido o no.

Ahora una condicion mas si existe el token y la ruta es protegida deberia dejar seguir y en caso contrario deberia redirigir al inicio. En este caso se evalua que si el token existe accediendo al store (import store from '../store'). Despues solo es consultar si el state del token es null se redirecciona al inicio o en el caso contrario podra navegar sin problemas.

Para probar que se este ingresando bien desde una ruta protegida, vamos a alguna ruta que se haya definido. Se importa el mapState como en la linea 9, se accede a los estados a travez de una propiedad computada. Hasta ahi perfecto, ahora para hacer una peticion hacia el backend se debe pasar en los headers un token y en el metodo created se inicializa la funcion que hace el fetch al backend.

 

Para cerrar sesion lo primero sera ir al index del storage y se creara una funcion Signup que resive un commit como parametro. Ahi se llamara al localStorage y se eliminara el token y tambien se cambiara el valor del estado token a null.

En la pagina principal de vue, anteriormente se habia mapeado las acciones para traer el token, lo que facilita la operacion. Ahora en la linea 14, se debe llamar a la funcion signout que se creo en el store y crear un boton que ejecute dicha funcion como en la linea 5

Para desplegarlo, corre el comando 

npm run build

Con eso compilara el proyecto y creara una carpeta nueva llamada dist.

Al ir dentro de esa carpeta, creas el comando git init para crear un nuevo proyecto

Descargar las actualizaciones desde el repositorio para evitar errores

Añades los arhivos al stage con git add nombreArchivo

Creas un commit -m "mensaje sobre el commit"

realizas el git branch -M nombreRama

git push -u origin nombreRama

 

Con eso se hizo un basico sistema de autenticacion con vue, mongodb express nodejs.

Chat Socket Tcp Con Node.js

 Profundizando un poco sobre los sockets bajo los protocolos TCP / UDP, como es la implementacion de socket tcp con nodejs, con un pequeño ejemplo de un chat room.

server.js

 

Como ya hemos visto, lo primero seria importar la libreria .net de node.js, se guarda en una variable la instancia del servidor. En la linea 6, se crea el evento connection, que se ejecutara si hay algun socket hace una conexión, ademas muestra por consola la ip y el puerto del usuario. Como esta recibiendo un socket, con el evento data, recibe la informacion que haya enviado el usuario, en este caso el consol log mostrara el buffer y los datos transformados a utf-8, en otras palabras,legible para humanos, asimismo devuelve con el metodo write lo que el usuario escribio. Y al final la instancia del servidor necessita en el evento listen, un puerto y host en este caso se le especifico que corriera con ip4 en el host y mostrara en consola el puerto en el que esta corriendo el servidor.

 

client.js

 

 El cliente tambien importa la libreria .net e instancia un socket en una variable.

En la linea 4 se esta importando una libreria tambien nativa de node.js que permite leer flujos de datos de distintas fuentes, como archivos, peticiones http, una consola, entre otras, una linea a la vez a travez de una interfaz, declarando el input y output.

El socket se pasa en el evento socket el host y el puerto del servidor, en la siguiente linea convierte los buffer recibidosen utf-8. En la liña 12 se instancia la interfaz de readline con el evento line que emite una linea, que se la enviaran al servidor a travez del evento socket.write.

Y por ultimo el socket data, recibe la respuesta del servidor y lo mostrará por consola.

Lo que se acabo de hacer, en el ejemplo anterior es conocido como servidor espejo, que reenvia los datos hacia el mismo usuario.

 

 server.js

Los cambios se hizo al ejemplo anterior, es comprobar que una clave que enviada desde el cliente cierre la coneccion del socket. En este caso es FINISH, cuando es enviada al servidor muestra un mensaje por consola y desconecta el server, en caso contrario solo mostrar la enformacion recibida.

client.js

Los cambios al cliente son si envía una clave cierre la coneccion con el servidor, y esperar una respuesta cuando este completamente cerrado. En este caso no espera una respuesta del servidor pero cerra la interfaz que captura lo que el cliente escribe por consola.

server.js

Para finalizar este ejemplo, severifica si hay una conexión  sin registrar, delo contrario se continua normalmente y se esta atento a los errores del servidor. Cuando hay una nueva conexión de socket al servidor, se guarda ese mensaje y el socket en un mapa declarado en la linea 5. Si el usuario envía la clave para terminar la conexión, el socket del usuario es eliminado junto con su usuario. Delo contrario se pasara la información del usuario formateada, junto al socket a una función creada en la linea 7, que enviará un el mensaje a todos los sockets almacenados excepto al socket del emisor.

client.js

En la interfaz, hay un método query que permite es un método que permite recibir un dato como entrada por el usuario y utiliza como salida este dato. Para utilizarlo en la interfaz debe especificar el output  debajo del input así output: process.stdout. Este dato de entrada la utilizara el servidor como nombre de usuario y se le muestra por consola la clave para cerrar la conexión.

Hasta aquí el ejemplo de chat desde consola utilizando librerías nativas de node.js a través del protocolo tcp.

ref: https://nodejs.org/en/docs/

Sockets Nodejs

Socket es un interfaz con la cual, se crearon las implementaciones de la pila de protocolos tcp-ip con la que permite que internet se creara, y con ello dos servicios colección 

TCP

Los tcp sockets son los que gestionan todo lo relacionado a los circuitos vistuales conectando tanto a clientes como a sevidores. Tiene una serie de metodos como el connect que permite establecer el circuito desde el cliente hasta el servidor,destruirlos datos , crear eventos y utilixando el modelo de cliente servidor.

El socket de server sirve para escuchar eventos de forma pasiva y establecer la comunicación con el cliente.

El  socket de cliente que son las estructuras de datos despues de haberse establecido todo el circuito permitiran la interacción con el servidor.

UDP

Es la alternativa mas rapida y simple, enviando datagramas sin establecer un enlace obligatorio como es el 3 handshake, que utiliza tcp para establecer la conexión entre el cliente y servidor. El envio de datagramas, tiene unos datos asociado con un tamaño maximo.Es una comunicacion sensilla, sin embargo, no hay garantía de la integridad de los datos. Al  no establecer una conexión con el receptor de los datos, no se espera mensajes de respuesta, mucho menos el orden de llegada de los datos o si los paquetes están completos, haciéndolo un caso de uso muy especifico primando la velocidad de transmisión como lo son o servicios de voz y vídeo.

Ejemplo  

ServerUdp.js

En la primer linea se implementa la libreria dgram nativa de nodejs, la siguiente línea se crea un socket con ipv4 y la almacena en la variable server, e inicializa el socket con el método bind que recibe por parámetro un puerto por donde escuchara a los clientes. Los demás son eventos, el primero se emitee cuando un nuevo datagrama esta disponible en el socket, el segundo dgram.Socket es direccionable y puede recibir datos y el tercero si ocurre un error. 

Para entrar mas en detalle lo que esta haciendo el código, en el evento message, lo que esta haciendo es retornar al cliente el mensaje enviado, el evento listening esta guardando los datos del socket y los retorna en consola y el evento close si detecta un error, va a mostrarlo por consola y cerrara la conexión.

ClientUdp.js

De manera similar, tenemos al cliente que es muy similar al servidor, en este caso los process.stdin y
process.stdout fueron utilizados para que desde la consola se pudiera escribir e imprimir texto. Como se había mencionado antes los eventos del servidor son pasivos y necesita que el cliente los active. En este caso en la linea ocho, el socket llama al método send, que lo que hace es mandar datos al servidor. En el evento message su funcion aquí sera escribir en consola la respuesta  del servidor ypor último el evento error, mostrar por pantalla el error, cerrará la conexión y cerrara todolo demás. 

 

ClientTcp.js

Para trabajar con sockets tcp se debe cargar la libreria net que es nativa de nodejs, en la 2 linea se almacena un socket en una variable, en la linea siguiente, en el evento connect se le pasa el host y puerto del servidor al que se quiere conectar.

Cuando se trabaja con sockets los datos no se transmiten en texto plano sino en secuencia de bytes llamado buffer, por eso en la linea 5 se esta convirtiendo a texto legible por humanos. En la linea 7 se envia datos en el socket y en la linea 9, se espera el evento data que envie datos y los muestre por consola.

ServerTcp.js

En las primeras 2 lineas se carga la libreria, se crea y almacena una variable del servidor tcp, en la 4 linea se emite cuando hay una nuevo socket conectado, imprime por consola el host y el puerto del socket que se conecto. En la linea 7 en evento data, recibe los datos y los imprime en pantalla y devulve al socket lo que envio. En la linea 8 imprime en pantalla 2 valores, el primero el buffer recibido y el segundo, ese mismo buffer convertido a texto con el metodo .toString.

Con esto se ha profundizado un poco sobre protocolo y como nodejs desde sus librerías nativas permite realizarlo probando con un servidor eco.

ref: https://nodejs.org/api/

NODE.JS Y DOCKER

Docker es una software open-source que lo que permite asilar o enpaquetar aplicaciones y sistemas en contenedores, similar como lo hace la virtualizacion pero de manera mas eficiente y liviana.

Instalar las dependencias 

Ya sea que estes comenzando o estes trabajando con un proyecto, la confuguracion de las dependencias sera crucial al momento dev desplegar la aplicacion.Si vas a crear un nuevo proyecto prueba el comando

npm init

Te pedira informacion relacionada con la aplicacion, como el nombre, la version, el tipo de licencia entre otras cosas. Ahora solo debes especificarle los paquetes que necesita. En este caso, se necesita a express solo para este proyecto.

npm install --save express //version completa o
npm i -s express //version reducida

O en el caso de trabajar con previamente creado, y contenga un archivo package.json en este caso solo con el packete de express similar a este. 

package.json
{
  "name": "bytefate_app_node",
  "version": "1.0.0",
  "description": "Node.js Bytefate App on Docker",
  "author": "name ",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Crear el servicio web, en mi caso se vera algo asi.

app.js
'use strict';
const express = require('express');

// Constants
const PORT = 8080;

// App
const app = express();
app.get('/', (req, res) => {
  res.send('Welcome to Byte Fate');
});

app.listen(PORT, HOST);
console.log(`Running on http://localhost:${PORT}`);

Si hay algunas retricciones por parte del firewall, con este comando habilitara la operacion del puerto donde estara corriendo la aplicacion.

sudo ufw allow 8080

 

 Dockerfile 

Ahora a lo que vinimos Dockerfile es un archivo que se le va a indicar en secuencia, al contenedor el comportamiento una vez se ejecute. Lo primero es escoger la imagen, hay distintas distribuciones dependiendo del tamaño de las imagenes, en este ejemplo se utilizara la mas ligera con la version 14 que hasta el momento es la version recomendada

FROM node:14-alpine

Lo siguiente es prepara la ruta para guardar los archivos dee la aplicacion y en lo posible limitar los permisos asignados al contenedor como buena practica

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

Luego se asigna el espacio de trabajo.

WORKDIR /home/node/app

Copia el archivo en el directorio que se le asigno en el comando anterior

COPY package*.json ./

Se asegura que los archivos de la aplicacion este con el usuario node

USER node

Descarga las dependencias de la aplicacion

RUN npm install

Copia los archivos y le asigna como propietario el usuario node

COPY --chown=node:node . .

Espone con el puerto asignado el contenedor

EXPOSE 8080

Inicia la aplicacion, con los parametros que se le han pasado.

CMD [ "node", "app.js" ]
 

El archivo queda algo asi.

Dockerfile
FROM node:10-alpine
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 8080
CMD [ "node", "app.js" ]

Nota: En dockerfile si tienes varios cmd solo el ultimo se ejecutara. Cuando se trabaja con git, es conveniente que los anexes tambien a este archivo, el .git y gitignore. .dockerignore

.dockerignore
node_modules
.dockerignore
Dockerfile

 

 Ahora a crear la imagen, con el siguiente comando.

docker build -t username/bytefate_app_node .

La -t es para colocarle un tag, que la usaremos para reconocer las imagenes personalizadas y es usual que primero se coloque el nombre de usuaro de dockerhub, seguido del tag de la aplicacion(username/tag). Y el punto (.) es para ejecutarlo en el contexto actual. Para listar las imagenes que tenemos usa el comando.

docker images

Estando todo listo, es hora de ejecutar la imagen con el siguiente comando

docker run --name bytefate_app_node -p 80:8080 -d username/bytefate_app_node

lo que hace el --name es darle un nombre al contenedor que esta corriendo, -p para redirigir el trafico a otro puerto de ser necesario y -d es para correr en segundo plano.Para verificarlo es facil, con el siguiente comando podras ver todos los contenedores que estan corriendo.

docker ps

 

 Bueno eso es todo por el momento, espero que les haya sido de utilidad y nos veremos pronto.