Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end vs Front end - Vídeo 11 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 12 de julio de 2024 por Mario S.

29 visualizaciones

Creando Token - JWT (jsonwebtoken)

Más información Transcripción

Descargar la transcripción

well in this video we are going to see how to create a touch but the first thing we are going to do is 00:00:01
explain a little what a touch is a touch is a tool that will allow us to know that the 00:00:09
client the front is the person who says it is worth it will be useful to us to know 00:00:23
all the time to authenticate all the time to that client to that front then what 00:00:33
we are going to do is create a touch from the user's identifier, that is, 00:00:40
every time the user logs in and puts their password and their login and password are correct, 00:00:48
then a token is going to be generated and we are going to send that token from the backend to the front, 00:00:58
okay, so that every time the user, the front wants to make a request for some data from the 00:01:05
database that handles or files or objects or whatever that handles the backend is worth the backend is not going to 00:01:17
respond to it until it verifies that touch before a little the idea is that good and we are going to 00:01:25
work with the jason web so that the token is valid and that good touch then that is better known as jw 00:01:34
The JSON Web Token what it does is digitally sign certain information, in this case it can be 00:01:44
or the JWT is usually used for two things, one that is for an authorization, which is what 00:01:57
that we are going to work and another is to send data, it is worth that there is an exchange of 00:02:10
information, then in either of the two situations the jw t comes in handy because it 00:02:20
sign digitally and then it guarantees the legitimacy of that information, it is good 00:02:31
we are going to start doing it then to start using the jason web token what we do is first 00:02:47
as always to install that module then we are going to come to our terminal of visual studio code 00:02:54
and we are going to install the npm and jason web 00:03:03
ok well it is already installed ok let's see that we have everything raised we have mongo I am going to 00:03:10
also raise the mongo express ok we have our database here 00:03:22
ok they give 2db user and we have and ours 00:03:30
this is jacinto ok it was the last one because that's it 00:03:38
ok we have our mongo db database with the collection and with the 00:03:42
different documents, okay, well then, what is the first thing I am going to do the import 00:03:50
and import jw from jason webtoon ok there we take it ok I do it in the controller because in the end here 00:03:58
I am going to play with the login function that right now I am not doing anything and with the 00:04:14
register is worth then I am going to generate that touch right now in register and then we will play with it 00:04:17
in the login is worth then to do this well if we are looking at what we already have in our 00:04:25
register arrow function we receive the information the variables that have been returned to us in a json 00:04:37
that sends us in a json the from is worth the user mail the email the password then we have done we have 00:04:45
encrypted the password is worth with a depth level of 10 we have created a new user 00:04:54
through the model and the mongoose scheme and we have assigned that encrypted key to the 00:05:03
key we have saved it and once we have saved it and no error has been skipped, that's why 00:05:14
the target is here, it is in this hole where we are going to generate that touch then in this hole 00:05:24
what I am going to do is with JWT there is a function, it is worth with JSON Web Token, there is a function that is the 00:05:35
point without it is worth being signed, it is worth then we are going to put JWT point without there it is 00:05:45
and this function we pass three parameters ok if you see them here separated by commas the 00:05:55
first is the field that we want to code to make that touch the second would be a 00:06:02
key principle a secret key is worth that this can be a single key or it can be a couple of keys a 00:06:11
public key private key it will always be better to make the public key the private key is 00:06:25
ok but well we are going to do it with a single key and then we could put 00:06:31
several options in this case the options are going to be the lifetime that that token is going to have, 00:06:38
then we are going to do that well before starting to write if I come to the documentation of 00:06:45
JSON Web Token, the JWT.IO introduction, here I have all this that I am telling you, okay? 00:06:56
I'm going to stop here because now when we create the token I'll explain this about the header, 00:07:08
payload and signature, okay? Well, this is what I was telling you, that we can use it for 00:07:13
authorization or for the exchange of information, okay, well, let's go back 00:07:20
to our code then the first field that I have told you that we are going to put it will be a field 00:07:32
I'm going to pass that it's going to be and it's going to be equal to and use the 6 point and a low and d 00:07:41
second field 00:07:51
second field parameter that I'm going to pass 00:07:57
because that secret key 00:08:03
secreta vale entonces eso es un string que por ejemplo le voy a poner dan 2 guión medio 2024 00:08:04
por ejemplo vale esto no hay coma aquí tercer campo que le voy a pasar bueno las opciones vale 00:08:16
then in the options we are going to put the expire in two points and we are going to put a day 00:08:29
ok ok and we have all these fields this I am going to put it also between keys and so it is 00:08:40
as more orderly ok ok then we have first what value am I going to use to create that touch 00:08:50
what is the secret key ok in this case they give 2 2024 I am going to modify this because 00:09:02
passing it in the code like this because security has very little expiration time ok and 00:09:09
then I can put a callback, a callback is a property that allows me to evaluate this function, 00:09:16
then this function either gives me an error or gives me a touch, then that callback 00:09:34
what it does to us is we put it in parentheses or it gives us an error or it gives us the touch, okay, this 00:09:42
will do depending on whether it is one thing or another, because it will do different things, we are going to tell it to 00:09:53
do different things, okay, then I need to do an arrow function here, okay, this is 00:09:59
ok then what am I going to tell you that if an error occurs then the only thing I want you to do is 00:10:07
visualize a message that is, for example, the error that is being produced, okay and if 00:10:26
no error occurs then you are going to send me to the front that is why we put the rest a json is 00:10:33
worth a document in json format in which I am only going to pass the touch to the front this is between 00:10:41
parentheses and between keys the token variable that we have generated is worth 3 this the jw t the 00:10:56
sin function would be this one that I just described here is worth then I pass the field that I am going to 00:11:08
use to generate that touch I pass the secret key I pass it in options that if we go to the 00:11:17
jwt documentation you will have more options in this case the only thing that interests me is the 00:11:27
expiration time then we tell it to expire in a day ok and then a callback that is to 00:11:33
evaluate if an error has occurred or this function returns me the touch that is what 00:11:41
we want to create if there is an error we visualize through a console ok and if there is no error you 00:11:49
return or send better said from the backend to the front that touch is worth then we are going to and I am going to 00:12:00
to comment on this and this is worth because it does not make sense that we are sending the client what 00:12:10
he has already sent us, it is worth to the front, he has already sent us the id, the username, the email, it does not make 00:12:24
sense, what does make sense is that we send him the touch so that later that from can be 00:12:29
being authenticated ok then we have already verified that we have it all active let's go to our 00:12:36
thunder client ok and here we are going to generate a request then as always we had made the route 00:12:44
remember with the post here because we had told him the port 4000 and the register is worth and we are going to body and we are going to 00:12:54
generate a new document, well, as we have done, it is worth username, this is going to be 00:13:09
postponed, we can put, for example, Carmen, we can put an email that will be 00:13:29
carmen arroba dan 2.com and the password that is going to be 234 00:13:44
we are going to put it as a string in all we have put it like this ok ok I already have then that 00:14:04
json that I am going to pass from the client, that is, from the front to the back in the back in, it will receive the fields 00:14:12
worth the back in that there is something 00:14:21
this I cannot put it with the keys 00:14:38
that is why it is giving me that 00:14:47
from the front we have sent these data and what I told you before we have done the 00:14:48
encryption we have generated the new user so that it passes through the model or the scheme and the model 00:14:57
we have saved it in mongodb and now we generate the touch and if it is good it has to respond to us 00:15:02
with the rest one has to return us here a touch is worth then if I give it to send it tells us 00:15:12
that the connection was rejected because because I do not have activated 00:15:21
I have not raised the service of the express it is worth it is as if we had the back-end 00:15:28
then here that we are going to put the npm npm 00:15:33
of 2 ok ok now we have everything well set now I give it to what there is and when sending sorry 00:15:44
then it has already returned to us it has told us ok I have done everything well it has done everything it has signed 00:15:55
well, he has used the key well, the ID field and no error has occurred and he has 00:16:01
returned that touch to us, so this is the touch, okay, this is the touch control that we are going to 00:16:07
copy it and I am going to go back to the jw web page, it is worth then, notice that here it is 00:16:15
saying the structure of the touch is worth of the jw of the jason web talk and then it tells you that 00:16:27
that structure is that touch is divided into three parts one that is the header is worth it is in 00:16:40
la que me va a dar estos dos datos que es el algoritmo que usa para la encriptación y el 00:16:49
tipo de encriptación que es jota w vale entonces si nos venimos a nuestro código vemos que este 00:16:57
todo este conjunto de números y letras está separada cada línea por un punto eso lo divide 00:17:08
en el primer trozo este es el primer trozo que es el que en la documentación os dice que es el 00:17:15
que vale el primer el primer trozo el segundo que sería esta línea y el tercero que es este 00:17:22
vale en este va entonces el tipo de encriptación jwt y va el algoritmo que ha utilizado en el 00:17:29
second is the one called the useful load and here what is encrypted is the value of the field that 00:17:38
we have used in this case it is the identifier ok and in this third part of the touch the 00:17:50
digital ok then this can be verified then if you select all the touch that 00:17:59
has generated you we return to the web page I come to jason 00:18:08
or sorry jw point and I go down here a little here we can paste 00:18:17
that touch we are going to copy it we are going to paste it here well let's see okay let's see now there you are okay 00:18:24
then look at how I have pasted that the touch that we have generated gives me the three sections in the 00:18:56
first tells me that the algorithm he has used is the hs 256 which is the one that is by default the type is 00:19:06
jwt json web token gives me the identifier ok and then he starts to put me here information that 00:19:11
good that we do not care but if he has returned me that field identifier that is the one that 00:19:19
we have used to generate the touch this is the 6 6 918 ok if we go back to our visual studio code 00:19:25
we go to mongo we refresh here 00:19:37
we see that we get 66918 b which is the same identifier that we have 00:19:43
generated is worth with carmen carmen they give us two is worth and if 00:19:50
we come 00:19:57
localhost 8001 root, root, okay, we enter the database, let's go, it's the same, it's just to do the two ways and not get used to just doing it in one way, here I already have Carmen, okay, and I have that identifier that is the one we have used and the one that right now we have a token that takes it inside, okay, coded but inside, 00:20:00
Okay, and then, well, this is how we are going to generate the tokens and how we send it to the front. 00:20:32
Okay, in the next video, what we are going to do is this touch. 00:20:42
We are going to send it as a cookie. 00:20:47
So that it does not happen that we do not have to be constantly generating that touch when the client, the front, needs some 00:20:51
type of information or data that can be generated by the API or the backend, so in the next video 00:21:00
what we are going to see is how to do that how to take that touch and pass it to the front as a cookie a greeting 00:21:10
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
29
Fecha:
12 de julio de 2024 - 22:32
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 09″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
56.20 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid