[MUSIC]
Ahora que hemos entendido la necesidad de autenticación básica en nuestra
aplicación Express, procedamos al ejercicio en el que agregaremos
autenticación básica al servidor ConFusion que hemos estado desarrollando hasta ahora,
el servidor Express REST API.
A lo largo del camino,
aprenderemos cómo podemos usar la autenticación básica dentro de nuestro servidor.
Y luego, en ejercicios posteriores, ampliaremos esta idea aún más
para agregar un servicio de autenticación completo para nuestro servidor Express REST API.
En este ejercicio, iremos al servidor ConFusion, en
lo que hemos estado trabajando hasta ahora.
Así que usted debe haber completado la implementación de la segunda asignación por
ahora, donde usted habría desarrollado las promociones y el modelo de líderes.
Y también actualizó las rutas para el enrutador líder y
el enrutador promocional en su aplicación de servidor ConFusion.
Entonces, dentro de este código, vayamos a app.js y
luego agreguemos la autenticación básica en app.js.
Entonces, en app.js como hemos entendido sobre la forma en
que funciona el medio en la aplicación Express.
Así que comenzamos aquí en el app.js
importando todos los diversos módulos de nodo aquí.
Y luego, después de eso, comenzamos aquí diciendo primero app.use logger dev.
Así que todo esto se va a aplicar a nuestra aplicación.
Y luego, esta llamada aquí app.use (express.static)
es lo que nos permite servir datos estáticos de la carpeta pública.
Ahora, quieren hacer la autenticación justo antes de
permitir que el cliente pueda obtener datos de nuestro servidor.
Así que ahí mismo, vamos a entrar y añadir una insignia de autenticación.
Así que te das cuenta de que todo lo que viene después de esto,
todo el middleware que está montado y viene después de este punto en particular.
Tendremos que pasar por la fase de autorización antes de
que el middleware pueda tener acceso.
Así que ahí mismo, voy a agregar en app.use y
luego agregar una función llamada auth, que voy a implementar en este momento.
Así que al hacer esto, lo que estamos especificando es el predeterminado,
el cliente puede acceder a cualquiera de estos,
ya sea sus recursos estáticos en la carpeta pública, o cualquiera de los recursos
, platos, promociones, o líderes, o incluso usuarios como veremos más adelante.
El cliente tiene que ser autorizado primero.
Así que ahí mismo, vamos a añadir en la autenticación.
Así que permítanme agregar la función aquí llamada auth justo allí.
Y luego úsalo inmediatamente dentro de nuestra
aplicación Express como middleware allí.
Así que esta función, auth tomará tres parámetros,
el objeto de solicitud, el objeto de recurso, y el siguiente objeto, sí.
Entonces, dentro de esta función, permítanme primero,
solo para saber qué está contenido en el encabezado de solicitud.
Permítanme registrar los encabezados de solicitud justo allí solo para demostrarle,
porque una vez que agregue el encabezado de autorización,
entonces queremos poder verlo allí.
Así que primero haremos un registro de consola,
solo para ver lo que viene desde el lado del cliente.
Luego, permítanme obtener su
encabezado de autorización diciendo
req.headers .author.
Así que aquí es donde obtendremos el encabezado de autorización que es agregado
por nuestro lado del cliente.
Si no está ahí, obviamente, entonces tenemos que actuar en consecuencia.
Entonces, si el AuthHeader es nulo, lo
que significa que no hay encabezado de autenticación en nuestra
solicitud entrante, obviamente, nuestro cliente no incluyó el nombre de usuario y la
contraseña en el encabezado de autenticación.
Así que tenemos que desafiar a nuestro cliente a proporcionar esta información.
Entonces, si el encabezado de autorización es nulo, veremos,
var err nuevo error,
por lo que no permitiremos que nuestra solicitud de cliente vaya más allá de este punto.
Así que diremos, que no está autenticado,
y luego desafiaremos al cliente allí.
Así que diremos Res.setHeader, por lo que
vamos a establecer el encabezado en
el mensaje de respuesta que dice WWW-Authenticate,
y desde la conferencia anterior,
verá por qué estamos poniendo esto
en el encabezado de respuesta.
Y luego diremos err status.401.
401 es acceso no autorizado.
Y luego simplemente generaremos nuestra llamada a continuación con el encabezado.
Entonces eso significa que saltará todo esto e irá al controlador de errores,
donde el controlador de errores construirá el mensaje de respuesta y lo
enviará allí a mi cliente.
Así que, si el cliente no ha incluido el encabezado de autenticación o
el encabezado de autorización, entonces voy a desafiar al cliente a
pedirle que me proporcione el encabezado de autorización allí.
Entonces, si no, entonces sé que existe el encabezado de autorización.
Entonces, más allá de este punto, diremos var auth,
y voy a extraer el encabezado de autorización.
Y luego, dado que el AuthHeader es una cadena,
voy a dividir ese valor y
este encabezado de autorización, voy a dividir el valor.
Entonces, como puede ver, el búfer le permite dividir el valor y
luego también le damos la codificación del búfer que es la codificación Base64 aquí.
Así que vamos a convertir eso en un buffer dividiéndolo en dos partes,
usando el espacio como la parte divisoria.
Entonces, cuando miró el encabezado de autorización, vio por qué el espacio
separa el valor que dice básico, y luego le da el resto de
la cadena codificada Base64 que contiene el nombre de usuario y la contraseña.
Y a partir de eso, queremos extraer el nombre de usuario y la contraseña.
Así que vamos a dividir ese valor, y luego solo vamos a considerar Así que
cuando dividas la cadena usando esto, lo dividirá en una matriz.
Y el primer elemento de la matriz contiene Basic.
El segundo elemento de la matriz es donde existe esta cadena codificada en base64.
Entonces, es por eso que solo estamos mirando el segundo elemento de esta matriz.
Entonces, esta división hará que la cadena se divida en una matriz de dos elementos.
Así que podríamos, estamos recogiendo la cadena codificada base64 de eso.
Y luego estamos en este Buffer, y luego vamos a convertir eso en cadena.
Y de nuevo, divida la cadena una vez más porque la cadena
en sí contendrá el nombre de usuario y la contraseña separados por dos puntos.
Entonces, voy a dividirlo usando los dos puntos como
punto de división para esta cadena aquí.
Así que note que estoy cargando dos divisiones aquí, una en el espacio y
la segunda, usando los dos puntos que separa el nombre de usuario y la contraseña.
Así que al final de esta variable auth debería haber una matriz que contenga dos elementos,
el nombre de usuario y la contraseña que se extrae de la cadena base64.
Así que en este punto, lo que voy a hacer es,
solo para su claridad,
simplemente voy a decir var
username = auth [0] y luego,
var password = auth [1].
Así que ahora he extraído el nombre de usuario y la contraseña de mi encabezado de autorización.
Ahora voy a usar un valor predeterminado para el nombre de usuario y la
contraseña en esta implementación.
Más adelante veremos que podemos permitir a los usuarios crear su propio nombre de usuario y
contraseña.
Pero por el momento, sólo voy a usar,
El nombre de usuario codificado y contraseña como administrador.
Y la contraseña será solo contraseña.
Para este ejercicio básico,
vamos a usar esto como nombre de usuario y contraseña predeterminados.
Si el nombre de usuario que obtengo es admin y la contraseña es la contraseña de cadena.
Entonces estoy bien para permitir que la
solicitud del cliente se pase al siguiente middleware, así que diré a continuación.
Entonces, cuando digo lo siguiente, esto significa que desde la autenticación
su solicitud pasará en el siguiente conjunto de middleware aquí y
luego Express intentará hacer coincidir la solicitud específica para el
middleware específico que servirá a esa solicitud.
Así que aquí es donde vamos a permitir que pase.
Si no, eso significa que el nombre de usuario y la
contraseña no coinciden con la solicitud,
el nombre de usuario y la contraseña predeterminados que estoy configurando.
Así que eso significa que hay un error.
Entonces, en este caso, voy a volver a causar un error aquí,
así que diremos otra cosa, Error.
Así que volveremos a generar un error y luego desafiaremos al cliente a enviar
la información de autorización correcta, el nombre de usuario y la contraseña aquí.
Así que eso es todo.
Este poco de middleware que acabamos de implementar aquí,
middleware de autorización que acabamos de implementar aquí.
Es suficiente para implementar la autenticación básica dentro de la aplicación de salida.
Así que después de haber realizado estos cambios,
vamos a guardar los cambios y luego veremos cómo funciona esto realmente en la práctica.
Vamos a guardar los cambios.
Y luego iremos a poner en marcha nuestro servidor.
Ahora, yendo a la terminal, por supuesto,
asegúrese de que usted es el servidor MongoDB está en funcionamiento.
De lo contrario, su servidor Express no se iniciará.
Así que tengo el indicador de inicio npm, y
luego su servidor Express estará en funcionamiento.
Ahora, abra en la ventana de incógnito en su navegador.
La razón por la que le estoy pidiendo que use una ventana de incógnito es que cuando escriba
el nombre de usuario y la contraseña, será almacenado en caché por su navegador.
Entonces, si usas una ventana de incógnito, si reinicias el navegador...
Luego, la caché se borrará automáticamente,
por lo que esta información no se recordará.
Ahora lo que sucede si escribe el nombre de usuario y la contraseña, se almacenará en caché,
por lo que posteriormente cuando intente acceder al servidor, la información almacenada en caché
se enviará automáticamente en la solicitud que genere.
Por eso es importante
usar una ventana de incógnito solo para mostrarle que la autenticación básica funciona.
Entonces, en la barra de direcciones de su navegador vamos a escribir localhost: 3000, y ver qué sucede.
Así que cuando escribe localhost:3000, inmediatamente ve que su navegador aparece
este diálogo en la parte superior pidiéndole que escriba el nombre de usuario y la contraseña.
Si no lo escribe, déjame escribir algún nombre de usuario aleatorio y luego ver qué sucede.
Entonces, si escribo un nombre de usuario y contraseña aleatorios,
entonces verá que la solicitud es rechazada.
No se me permite acceder al servidor, y
luego si el servidor volverá a decir que el cliente no está autorizado.
Y así volverá y nos desafiará de nuevo para la autenticación correcta.
Así que permítanme escribir la autenticación actual.
Así que déjame escribir admin y la contraseña como contraseña.
Y luego inicie sesión, y verá que ahora la
aplicación Express le permitirá ingresar y acceder al valor predeterminado,
que en este caso es el archivo Index.html de esa carpeta pública estática.
Ahora, lo mismo si está tratando de acceder a localhost: platos
sin la autorización, entonces no funcionará.
Y te lo demostraré usando cartero en un minuto.
Ahora, habiendo visto cómo funciona la autenticación, vamos a
ver lo que sucedió en la consola en nuestro sitio de servidor. Al
ir a la consola en nuestro sitio de servidor, ve que
se ha impreso un montón de información aquí, así que como vio,
estábamos cerrando la sesión de los encabezados de solicitud aquí.
Entonces, esta es la primera solicitud que entró con el encabezado de solicitud.
Y aquí puede ver que no hay encabezado de autorización en la solicitud.
Así que su servidor lo rechazó con un 401 pidiendo a nuestro cliente que se autorice a sí mismo.
La segunda vez también desde que no escribimos la autorización correcta que el
servidor rechazó.
Por supuesto, ahora nota que en el encabezado, justo allí, la autorización está
realmente incluida allí, y ve la forma en que se incluye la autorización.
Dice Basic separado por un espacio, y
separado por la cadena codificada de 64 bits que contiene el nombre de usuario y la contraseña.
Y luego, vemos que el servidor
rechazó esto porque la autorización era incorrecta en ese momento.
Ahora más adelante, escribimos el nombre de usuario y la contraseña correctos.
Así que ahí mismo, en la tercera solicitud que entró, escribimos el nombre de usuario y la
contraseña correctos.
Y así, es por eso que ve que el encabezado de solicitud contiene la autorización,
y esta cadena usa la codificación correcta del nombre de usuario y la contraseña.
¿ Cómo sé eso?
Bueno, he cruzado y sé que,
esa es la versión codificada externa básica de la cadena allí.
También veremos eso a partir de nuestra imagen de cartero o qué.
Ahora, verá que la solicitud fue aceptada y
devolvió el valor correctamente.
Y luego, por supuesto, posteriormente, el cliente solicitó un favicon, el icono.
Y como no tenemos el favicon en nuestro lado del servidor, responde con el 404 y,
por supuesto, su icono favorito no se muestra en la barra de direcciones.
Así que está bien, pero ten en cuenta en particular.
Aquellos solicitados en particular entraron,
donde se incluyó el encabezado de autorización correcto.
Y así, fue exitoso en ese momento.
Vamos a tratar de ver cómo podríamos hacer lo mismo con postmap.
Así que aquí tengo mi ventana de mapa postal abierta.
Y así en mi ventana Postman voy a escribir
un llegar a localhost: a mi servidor, y luego enviar la solicitud y
se dará cuenta de inmediato de que desafía decir 401 no autorizado.
Así que este es el mensaje de respuesta desde el lado del servidor,
así que observe lo que guarda, 401 No autorizado.
Y dice que la respuesta debe incluir un campo de encabezado WWW-Authenticate.
Y esto desafiará al cliente a enviar la información de autorización,
el nombre de usuario y la contraseña.
Así que previsualizando esto, vemos que la frase que no está autenticado y
luego el código 401 aquí.
Ahora mirando los encabezados del mensaje de respuesta.
Cuando se mira el encabezado del mensaje de respuesta, se puede ver en particular
este encabezado incluido allí, que es www.authenticatebasic.
Ahora, ¿cómo hacemos la autenticación o autorización en la publicación?
Así que aquí es donde irían a esto justo debajo de este cuadro aquí,
verá esta autorización aquí.
Y cuando haces clic en la autorización, ahora mismo dice NO AUTH..
Vamos a usar la autenticación básica.
Entonces, cuando digo autenticación básica,
me dará estos dos campos aquí donde puedo escribir el nombre de usuario y la contraseña.
Permítanme escribir el nombre de usuario y la contraseña correctos.
Así que voy a decir nombre de usuario admin, la contraseña es la contraseña P-A-S-W-O-R-D.
Así que puedes ver eso, esa es exactamente la contraseña que tenemos aquí.
Por lo tanto, una vez que escriba el nombre de usuario y la contraseña, dirán Solicitud de actualización.
Entonces, cuando hago clic en Actualizar solicitud, verá que inmediatamente en el encabezado,
verá que
hay este campo aquí que se ha agregado aquí diciendo autorización.
Y luego, verá lo que esta segunda parte, el valor que puede tomar.
Dice básico y un espacio, y luego esta cadena en particular.
Entonces, si comprueba esta cadena en particular aquí, esta será la
cadena exacta que verá en el encabezado del mensaje de solicitud exitoso.
Observe lo que dice esta cadena.
Dice YWR algo, y luego termina con una Q igual a. Al
ir a nuestra terminal, ves que la solicitud exitosa
realmente contenía exactamente esa cadena aquí.
Dice YWR y luego termina con Q igual a allí.
Por lo tanto, al escribir la información en la autorización y luego hacer clic en
la solicitud de actualización, esta información se agrega a los encabezados de autorización.
Así que ahora esta es una solicitud get,
no necesito el tipo de contenido allí porque no contiene ningún cuerpo.
Así que ahora que se ha incluido la autorización,
enviemos la solicitud ahora correctamente y luego verá que
la respuesta que viene desde el sitio del servidor contendrá el archivo de índice como se espera.
Ahora, permítanme eliminar la autorización.
Esta es la razón por la que Postmap me ayuda a verificar estas cosas mucho más
fácilmente, puedo eliminar la autorización y luego enviar la solicitud.
Y aún contendrá esta autorización,
porque escribí esto en el campo de autorización.
Así que déjame despejar la autorización desde allí, y luego enviar la solicitud aquí.
Y luego dice que no estás autenticado.
Del mismo modo, si envío la solicitud a los platos.
Anteriormente, esto funcionaba bien, pero
ahora ves que también se nos impide acceder al extremo /platos.
Y lo mismo con todos los otros puntos finales APR resto también.
No se le permitirá acceder, porque el middleware de autorización viene antes de
obtener acceso a cualquiera de estos extremos
en la lista de middleware para su servidor express.
Así que ahora si ahora incluyo la autorización,
y luego actualizo mi solicitud y luego envío la solicitud al servidor,
entonces el servidor responderá.
Ahora, obviamente, en este momento, mi base de datos está vacía, por
lo que está respondiendo con una matriz vacía allí.
Pero ahora la solicitud se realizó con éxito, y
puedo recuperar la información del calcetín del servidor.
Así que esta es una demostración rápida de la
autorización básica en nuestra aplicación APR de descanso expreso.
Con esto, completamos este ejercicio.
Este es un buen momento
para que usted haga un comentario con el mensaje de autenticación básica.
[ MÚSICA]