Saltar navegación

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

Back end vs Front end - Vídeo 12 - 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 13 de julio de 2024 por Mario S.

22 visualizaciones

Funciones Promise(resolve, reject), optimización del código, res.cookie(token, token)

Más información Transcripción

Descargar la transcripción

well in this video we are going to continue working with the touch that we created in the previous point 00:00:00
we stayed in this code ok here we used the jason web token to create with the point 00:00:06
yes to sign it digitally create that touch and we sent it to 00:00:13
the front if there was no error if there was any error what we did was to visualize 00:00:21
through the console.log that error, okay, we did this through the callback that 00:00:27
provides us with the function of jasonwebtoken.sync, okay, remember that we passed the field to jasonwebtoken 00:00:34
on which we wanted to build that token and encrypt it, we passed a password that 00:00:43
could be a public or private password, we passed some options that in our case 00:00:50
I only passed the time of expiration that I have put in a day the callback and it was worth the 00:00:56
callback to receive that error or that touch is worth created is worth then now what we want to 00:01:05
to do this is not to send a json with the touch what we want is to send a 00:01:16
a cookie is worth then to send that cookie 00:01:26
we can do it from the pack that is, we send the rest.cookie and the value of that cookie that in the 00:01:33
front is going to generate that cookie we could also send it this touch is worth and then from the front 00:01:41
collect it collect that information and already in us create a variable or create a cookie that would be 00:01:49
more cumbersome and it is the cleanest code if you send it directly from the park and you create that 00:01:58
cookie in the front is worth then to do that what we are going to do is put a point here 00:02:04
cookie ok and to this to this function to the rest point cookie what happens to it are two 00:02:13
parameters for what you have here the name and the value the name 00:02:23
is a string so here the name because we are going to put it because for example touch is worth and the 00:02:28
value separated by a comma is going to be because it is going to be the touch is worth in this way we are creating it 00:02:38
we are creating that cookie is worth we can also send it in addition to creating that cookie 00:02:49
well, so that we also get a message in the body of the front, not something that indicates to the 00:02:58
client that the cookie has been created, we are going to put a dot res on it, we could put a 00:03:06
send on it, we are going to put a json on it, especially because in the end we are all the time working 00:03:13
as others are, because we are going to use a json in which we are going to pass a key that is 00:03:20
message and we are going to pass a value that is going to be the 00:03:30
no this is not the error because here it would have been created satisfactorily because it is already 00:03:39
well that user created correctly or satisfactorily as you want correctly 00:03:44
ok and it would be with this it will already work for us it does not give us any correct you see that in 00:03:56
any error you see that here the server is all right, no demon is not telling us that there is 00:04:04
no problem we are going to try it we have everything raised you know 00:04:12
we have mongo mongo express raised raised servers we have our 00:04:20
database with the different values ​​we are going to 00:04:26
create from the thunder from the client from our front we are going to launch this 00:04:31
that we had that we did in the last video ok that was carmen in the mail it was carmen 00:04:38
at 2.com 134 ok we send it ok this is all good if we send it ok then now 00:04:44
we have not missed any error the network that we have put has been the network.json the user message 00:04:55
correctly created and tells us it receives the from ss json with the message key and then the user 00:05:07
created correctly, that is, this has put us well and also if you look up here we have 00:05:17
in addition to the response we have the guides of the cookies the results docs is worth in the guides that 00:05:23
the information that accompanies or that we can the heads of the information with which we can 00:05:30
work there is one that is the set cookie and in the set cookie it has created the touch for us, it has created the 00:05:38
touch, it has put all this touch here, which is what we have told it from this line, it has 00:05:45
put the cookie, sorry, the token and if we go to cookies we see that we have the cookie 00:05:55
touch ok and here we have that that that touch if we trust this touch we come to 00:06:01
jw t.io what we talked about the other day in the last video ok let's go here we are going to paste 00:06:14
our touch control v we see that the idea is 669 25 c ok we go back here and we are going to see that the one that has 00:06:35
created us is 669 25 c ok so everything is fine now we have everything working well everything 00:06:53
where we have reached, but if we are creating a cookie, we are 00:07:07
sending the json well from the front to the backend and from the backend to the front, we are using 00:07:12
the json web token that as I told you, you use it a lot later in the tfg, well here I call it jwt 00:07:19
when we import it, okay, we are using that callback that allows me to play with the 00:07:28
right or the error, okay, you are playing, you are playing with the arrow functions, there are already 00:07:38
several things that you are doing, okay, and so far everything is working for us, okay, 00:07:46
So now what I want to do is place a little bit of all this code. 00:07:52
Okay, so this code. 00:07:59
This code and well, I'm going to modify this later, too, because in the end here we are sending a error message through the console, through the terminal, if 00:08:03
some error occurs but instead of this his thing is to send the client an error code 00:08:14
ok then I will do that later now what I want is to optimize a little or think a little about 00:08:22
this piece is worth this function jw point without ok then first that function well there we do 00:08:28
varias cosas y lo suyo es que sea síncrono vale siempre que podemos entrar en algún tipo de 00:08:41
conflicto de una manera más o menos fácil y eso pararía nuestro desarrollo lo suyo siempre es 00:08:48
utilizar las funciones vale asíncronas entonces por un lado vamos a pensar cómo hacer esto 00:08:56
asynchronous on the other hand we are generating a touch but of course we are generating it only in the 00:09:07
register function ok then that touch if the user is already registered and exists you have to create it 00:09:15
also in the login function ok then we cannot forget we are playing the register all the 00:09:28
time the register then we will touch the login but we cannot forget then this piece 00:09:34
is worth this portion of code we could take it and come and paste it here and like god but you 00:09:41
are programmers and you are asked to work as programmers then you already know that one of the 00:09:51
characteristics that the code has to have in the reuse of code when we are going to 00:09:59
use it varies in many places we have several times his thing is to be able to export it and call 00:10:10
that code every time we need it not to be copying all the time which would lead us 00:10:18
to a very serious code inconsistency and that in addition any programmer who sees 00:10:24
your code what he understands is that you do not know how to program, it is worth apart from going crazy because you 00:10:31
multiply the code, it is worth it, you make it much bigger and much less clean, so we have to 00:10:38
get this to be cleaner, it is worth a bit like we are doing now that I am creating 00:10:43
constant all the time variables that then I call the variables well and we are 00:10:50
ordering it in this way ok then we are going to go step by step for example we are going to start with 00:10:56
this of the password the key not the key on the one hand you cannot put it 00:11:03
like this because anyone who gets into your code will see it quickly then well 00:11:13
maybe here it would be good apart from using a type of public and private key instead of only one 00:11:19
ok but we could to organize it a little we are going to make a field that we are going to call it because 00:11:28
the secret touch or secret word or whatever you want ok then to do this we could 00:11:42
and within that recent I am going to create a file that I am going to call config.js for example it is worth 00:11:51
config.js configuration.js then here I am going to save because that is what 00:12:02
would be values ​​of this type values ​​that are variables or that are constant and that I am going to 00:12:08
have access to them from any part of my development through the name of that 00:12:16
variable not through the value which makes it a little safer ok then what am I going to 00:12:23
create here because a constant that as I tell you we can call it password or as you 00:12:30
you want, it is worth the best, it is usually used always when it is for the touch 00:12:42
the touch as it was this low password 00:12:48
secret touch in low secret okay this is the same and here I pass the password for example 00:12:55
we are going to put the course dam 2-2024 for example, it is worth the one that you want, so I 00:13:08
have this cost this variable touch in secret I have the value the seed that I am going to use to be able to 00:13:21
then encrypt that touch then if I come now to the out controller I import 00:13:31
and import 00:13:38
we have called it 00:13:41
touch in secret it is worth touch in under secret from and here we are going to put it 00:13:53
config.js is worth remembering the js is worth and then what am I going to do to pass it here 00:14:08
instead of this field it is worth this string we are going to pass the touch it is 00:14:18
good so it is no longer the same that you are seeing the code all the time although well the only thing 00:14:27
that I have done has been to move it here as well as at the security level it is not a very 00:14:35
spectacular thing either or well it can be a nonsense but if you order it if we can call that key from 00:14:39
different sites and be able to change that key only by making a change in config.js it is worth 00:14:48
for it to affect the rest of the javascript files for this on the one hand now on the other hand 00:14:56
because we have said that this is this portion of code we are going to call it from different 00:15:03
sites then I am going to take this portion we are going to create ourselves in lips that for that we have 00:15:10
a new file ok we are going to create a new file that we are going to call it for example because 00:15:17
Since we are with the JSON Web Token, we are with the JWT, we are going to call it JWT.javascript. 00:15:25
And within this JS file, we are going to create a function that I am going to export later, 00:15:35
so we are going to put the sport function, okay, we are going to call this function, well, 00:15:49
create access, create access, touch access, touch access, okay, a classic function that will have its 00:16:02
retun that will have its stories, it is a classic function in this function I am going to and I am going to paste 00:16:16
all this this code control x here control ok well the first thing here is going to give me a problem 00:16:24
because JWT does not recognize it because I have not imported the jasonwebtoken, okay, then import JWT from 00:16:39
jasonwebtoken, now at least this part of the JWT 00:16:55
because we are going to have it well, okay, that leads me to eliminate it from here, 00:17:03
okay, I delete this and this instead of putting it here as I have taken it to jw t.js 00:17:15
then control x and I'm going to take it to jwt point s ready ok ok then I keep looking at the jw 00:17:24
testing in the jw s jason web token point without the first thing that happens to him is a field that is the 00:17:37
idea that we are working on to generate the touch and then encrypt it ok then we can 00:17:47
how we are going to pass an idea of ​​different users because every time a user is logged in, 00:17:53
it will be created or we are going to use their ID, we are not going to use only one, it is worth to generate those 00:18:01
touch because that information we have to pass it to this function then to this function 00:18:07
we are going to pass that load value before if you look or if you remember when we were talking 00:18:15
of jw we talked about that when the touch was created there were three three groups of numbers and letters 00:18:21
separated by points some that were the header another that was the value load is worth the pilot and the 00:18:38
other one that was the signature, so we saw that in the previous video, then what I pass that 00:18:46
idea is worth that later jw t.io recognizes it as that load of value is worth looking at how 00:18:55
here it is putting it with the pilot data is worth and it is here where I have this idea because 00:19:06
because to follow a little the coherence with the names that json web token gives it or the technologies 00:19:12
that we are using, we are going to tell it that I am going to pass an input parameter that is that 00:19:24
idea and that input parameter I am going to call it because the father does it, the father does the value load 00:19:32
and then in the jw t this first value that identifier is going to take it through the pay loat 00:19:39
then I already modify the pay loat the touch in secret expires in a day ok well these 00:19:51
options this res cookie j are this I am going to leave it to send it is worth this instead of putting it 00:20:00
here I am going to put it in the out controller and I am going to put it here ok I am going to put it here 00:20:09
because in the end what I want is good I am going to call that function ok so we are going to import it 00:20:19
we are going to import it, we have called it to create access, it is worth it, then import, 00:20:27
create access, it is worth it, there I have it, then here it is worth it after saving it, which is what 00:20:42
we were doing where we had the jw function without what I am going to do is 00:20:51
I still need this one, otherwise it will give me an error 00:21:02
I probably left it here 00:21:11
This is the one 00:21:16
Yes, this one is over 00:21:20
Here I would miss the key, I have not copied it well 00:21:26
this would be here, this would be here and this would not be left over, now everything is fine, then what I was 00:21:36
telling you is worth this value, this is from where it is from the jason web of the jason that we are sending it, 00:21:47
vale esto ya está todo bien vale entonces sí aquí voy a llamar a esa función vale a la que estamos 00:22:00
creando entonces la función primero la hemos importado crear acceso token vale entonces aquí 00:22:11
le voy a llamar a crear acceso token le hemos dicho que le vamos a pasar un parámetro de entrada 00:22:19
ok then that input parameter is going to be that field and it is ok then that field 00:22:27
and we are going to put it in the mobile that field and I can't put the 6 directly 00:22:39
lo que le voy a pasar es todo el jota son entonces lo pongo entre llaves le pongo el campo y de 00:22:57
dos puntos y le ponemos él 00:23:06
el 6 que es el usuario que hemos que ya hemos 00:23:12
saved it is worth then we are going to use the user 6 user 6 point under and d 00:23:17
in this way I am passing that identifier to the pilot to the payload and he is loading 00:23:32
that identifier in the jw point yes ok and this would create it for us ok what else are we going to do well 00:23:45
we are going to use a function ok because I need to return this I need to make a retun 00:23:55
where I am making this call ok then as I want to make a retun 00:24:08
I want this value that then I am going to put this touch in that this touch is the one that generated us 00:24:13
the jw testing is worth that touch right now in this function does not exist that that value does not 00:24:22
have to return it to create access then here I am going to create a touch and it is worth 00:24:29
so that this does not give me an error ok and that means that this has to return us a challenge 00:24:37
ok but this what we had was set if there is an error you do not show it by console and if there is 00:24:45
no error then you send it to the front ok then this function I need to make a 00:24:52
challenge then we are going to use some functions that are called promise that is promise is worth 00:25:01
then these functions what they do is that they always return you an error or a 00:25:09
created one or it does it well or it does it wrong it returns you only those two those two outputs 00:25:19
it is valid or it is well done or it is badly done then to use those functions because we are going to put it 00:25:26
or if the way to use them is no more, this is the function no more, it is worth and you see then it 00:25:36
gives us a when this function is executed this type of function that is an arrow function gives us 00:25:51
a result that is resolved that I did not get the word or a king that is a black one is worth 00:25:58
then this will always have as input parameters a result or a network is worth and this 00:26:05
is a type of function but more than it is a type of arrow function is worth then 00:26:22
this 00:26:29
then this is going to return a result or a rayet it is a type of arrow function 00:26:40
so I'm going to take and I'm going to copy this 00:26:47
control 00:26:52
and this we are going to paste 00:26:55
ok then this is like a pipe ok the jw t 00:26:58
is going to give us back 00:27:09
a touch or an error is worth it that is going to be if it is a touch it is going to pick it up 00:27:13
promise in king sorry in resolve and if it is an error it will pick it up in king ok and that is 00:27:22
what I am going to return then this we are going to put it with the challenge ok then the challenge is going to 00:27:31
allow me to return this because I use the promise function because this one already makes me return these 00:27:40
two options but it would have to or return an error or return a touch and that is not done, it is never worth 00:27:45
putting two returns in one in one function that is one is a barbarity then we put the return we put 00:27:54
the promise we play with the result or the king and that result or that king we are going to give it a value 00:28:02
in the jwt point yes it is worth then here we would not change anything because we are with the jason 00:28:10
web toque signing the identifier with a secret key and the only thing that we have passed is the option 00:28:19
that it expires in a day ok and here if here we have an error it is worth the callback of the jwt 00:28:28
point zinc which is the error and the touch in if there is an error then this now I do not tell you that 00:28:37
a error is displayed for me by the terminal what I tell you is okay because if there is a 00:28:45
error then king parenthesis is worth this is if there is an error but if there is no error and if he 00:28:54
ha hecho todo bien entonces lo que le digo es un sol toque vale y esto lo que va a hacer es me vas 00:29:03
o devolver en mi función o en mi variable token me vas a devolver un token o me vas a devolver 00:29:16
an error ok and we have said that this function we said before this function that yours is 00:29:28
asynchronous ok then we to make an asynchronous function man we do not do it we use 00:29:38
the weight and the async but we do not do it on this function it is worth this type of classic functions 00:29:49
for that we do it from the arrow functions and this is our arrow function that we already 00:29:55
have here in the zinc as and therefore we can use a weight here and tell it to 00:30:02
execute us in the background to create access to touch and we are already passing the 00:30:12
pailo at the value load with the user 6 point under id ok ok and then we say this ok 00:30:22
on the one hand you are going to create this variable that is because that is the cookie ok with the touch that we have 00:30:33
created in creating access touch ok or yes and we also tell him to visualize us this is ok 00:30:47
and if it were if there was any error then we can tell him we can visualize this or tell him 00:30:57
because here what I do is the king but good is that I am not interested if there is any 00:31:17
error that is when I am going to skip the cat what I am going to tell him is to send a state to the 00:31:25
client to the client to the front then we are going to put the status network I am going to pass the 500 ok then if 00:31:32
you are looking for the states that is a 500 is an execution error ok and here I am going to pass a json 00:31:44
that I am going to put as always the keys that they do not always ask for 00:31:59
2 points and here it is going to be the point ok I close the keys I close and that's it ok then we can do we can 00:32:04
leave it like that and then everything should work correctly here it says that there is an error 00:32:22
it failed in the index 00:32:30
we are going to 00:32:42
touch the secret from 00:32:45
.js is worth where we are using this is in jw 00:32:51
and here I tell you to go up one and it is in conflict 00:33:00
I have not taken this, I do not know why, we are going to see 00:33:06
import-secret-from-info-config.js 00:33:10
ok let's see where that error is 00:33:45
ok then the error comes from 00:33:50
no le he puesto el sport vale entonces sport ahora sí debería de que está todo 00:34:01
bien vale y ahora vamos a hacer nuestra prueba entonces tenemos 00:34:11
vamos a eliminar al carmen 00:34:25
so we are going to launch our from our client we send it this json so that 00:34:29
everything works for us I give it to senf ok in the answer it tells us user created correctly 00:34:45
we have not missed any error and if we come to the cookie we already have our cookie created it is worth 00:34:51
the same as before, the header, we have everything, everything works for us well, this is the correct way 00:34:59
to use the code to make it efficient to be able to use what will be from the controller because we will use 00:35:06
that same function in login and place a little, it is worth organizing a little the whole code 00:35:16
that we are using is all this we could remove it is worth this because the user created 00:35:26
satisfactorily if you want instead of this now we could send them if you want 00:35:35
we could send them the information as we did before, it is worth as you were 00:35:43
wanting and what you are looking for is worth then with the network also look at how we send a 00:35:51
6 to send a string a json to send a json a status to send a state is worth accompanied 00:36:00
with a json is worth staying with all those ideas ok well until here a greeting see you later 00:36:08
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
22
Fecha:
13 de julio de 2024 - 14:04
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 08″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
89.27 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid