Saltar navegación

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

Back end Vs Front end - Vídeo 33 - 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 18 de agosto de 2024 por Mario S.

23 visualizaciones

Verificando el token en la parte del Back end. JsonWebToken.verify.

Más información Transcripción

Descargar la transcripción

well in this video we are going to continue with the continuation of the previous one in which we saw that we cannot 00:00:01
work with the state variables of the context when creating protected routes and 00:00:11
you had to understand why it is necessary to use that touch that we are generating with 00:00:20
the cookie is worth the idea is that touch in that we have in our cookie send it to 00:00:28
the back end and the back end when it takes it remember that part of the information of 00:00:38
that touch that we created with the jwt was the user's idea then the back end when it receives 00:00:46
token has to extract that idea, launch a consultation to our mongo database, 00:00:54
verify that that user exists and then we do accept that token as good, okay, 00:01:01
then a little that is what we have to do now, so if I want to send 00:01:09
information from the front to the back in what we are doing all the time is 00:01:15
Well, by routes, then we associate each of those routes with a function, we had our routes and we associated the login page, the register page, so we are going to have a route to a backend route, we are going to associate it through Axios 00:01:24
y le vamos a decir pues bueno pues cuando el usuario o el propio from manda información a 00:01:49
esa ruta pues entonces qué es lo que quiero qué elemento qué función quiero que se ejecute 00:01:57
entonces me vengo al out js y aquí me voy a crear como siempre una función flecha que le voy a 00:02:04
call it, for example, I call it verification, verification, touch it, it is worth 00:02:12
that this in principle we do not send anything 00:02:26
here I am going to receive an answer this is going to be the same as instance instance is to remember why 00:02:33
we had created the axis js to initialize our connection our axis and that it did not give us 00:02:40
credentials or cores errors when we tried to use those context variables when we tried to 00:02:49
that touch in this case to be great because I am not going to take anything from the back in what I want is 00:02:56
well, send that information to him, but then return it to me to return the information of 00:03:04
whether that user is correct or not, I am not going to register anything in the database, I am not going to leave anything, 00:03:14
then I do not use the post protocol, I use the get, okay and in the get we are going to put it 00:03:20
because it is the route that, for example, that route right now does not exist, now I have to do it, 00:03:28
then I can put verification or as we are putting everything in English because we can put 00:03:33
verify ok and it would be then this function is the one we have in the front and the one that is going to 00:03:41
be put through axios in contact with the back-end receiving the back-end that touch is worth and the 00:03:51
backend is going to do the tasks that I am telling you to extract the idea and launch a query 00:03:58
against mongo to verify that that user exists and answer the front saying and that user if it 00:04:09
exists or that user does not exist it is valid or that user if it exists but the touch that they have sent me is 00:04:17
erroneous, there are different cases there that we have to control, then I am going to leave 00:04:22
now the front part ok and I am going to come to the back end part then client I am going to minimize it 00:04:32
and we are in the back end part then in the part of the you are seeing the code 00:04:45
in the backend part we have our routes here, okay, so what am I going to do? Well, 00:04:50
that one that I have created a new router dot get 00:05:00
verify, okay, and what I want is okay when a get request enters the verify route I want it to be 00:05:08
execute a function, it is worth the same as we had here in middleware or the different functions in 00:05:19
this case there is nothing in middleware or anything like that I am going to say here verification we are going to put 00:05:27
touch touch verification ok I call it the same as in the from and so we do not get lost ok 00:05:38
this function this token verification does not exist, it is worth then where we are controlling 00:05:47
all these functions of the register log in the file in the out it is worth all this we are doing it from 00:05:55
the controllers in out controller js then in out controller js we had all these 00:06:02
functions to which we exported and then we continued calling them from the routes, it is worth 00:06:09
then what am I going to do? Well, create this new one 00:06:15
that we have called token verification is worth then 00:06:21
for token verification we are going to see that token access 00:06:27
and we are going to need the jw 00:06:35
because we have to verify that touch that we are receiving from the front with the one that 00:06:42
generates the one that is generated through the id that we have saved from our users, it is worth 00:06:50
remembering that with jw we can make that comparison then I will need that jw 00:06:57
I'm going to import jw t 00:07:04
jason web 00:07:12
what else can we need the jw t remember that we play with in this case a 00:07:21
couple of keys or we could play with a couple of keys or a encryption key 00:07:27
we played with an encryption key that we had 00:07:31
in conflict in conflict the touch in secret is worth that the course of am 2 2024 3 that 00:07:37
I will also need it because we are going to put it we are going to import it then here 00:07:44
we import the touch in secret and it recognizes me perfect we may need something else 00:07:51
I think not I think that with the jw and the touch well if we need something else because as 00:08:00
always we are putting it ok and now we are going to create our function ok our function 00:08:08
of token verification we have not called it token verification token verification yes ok 00:08:15
then come to it then export with verification touch these is worth and since we are then 00:08:23
we are going to put in here that it also brings us verification so then I do not forget 00:08:38
vale verificación toque esto como vamos a ir contra mongo y bueno y puede haber posibles 00:08:50
errores con más o menos facilidad a zinc vale vale esto va a recibir un rey y un res como 00:09:00
always worth a request and a response is worth the answer and the data that comes from the client is worth 00:09:12
we do our arrow function come on ok we are going to take with what I need the 00:09:20
the touch that we have that we are sending from the front is worth then that cookie 00:09:36
what we are sending are the cookies ok that cookie is called touch then what I want is 00:09:51
touch constant in this is equal to the point 00:09:57
ok ok now we start to ask questions this is strange to me this is worth it you have to be 00:10:07
aware of it because well it did not seem like with that ok well then 00:10:27
we start to ask the questions, the first one may not exist, so if 00:10:37
they touch if there is no touch, it is not empty, then we are going to do a return, we return a 00:10:47
status point that is, for example, the 401 that if you remember this one that we have already used it 00:10:59
is the unauthorized one, then we are going to put it instead of unauthorized because I am going to put it 00:11:10
not touch there is no touch for example okay this is this I try to that cookie that comes to us from the 00:11:25
front rack is worth and from all the cookies that can come then I ask as it is key value 00:11:50
ok I ask for the key to be touch that should save if it exists ok that touch that we have 00:11:57
created if it touches it is empty then it tells me you send me a message to the response to the front with the 00:12:08
code 401 and that you tell me that the touch does not exist now that touch if it exists ok what am I going to 00:12:16
do? Well, a JWT point verify, okay, I want you to verify the token that you just took on the one hand, okay 00:12:25
with the touch in secret that for that we had taken it and this we are going to create another 00:12:40
function asynchronous this function here inside it is worth that it is going to 00:12:49
I will tell you it will generate or an error or it will be able to collect the data of that user that 00:12:59
we are taking out through the touch that we have received from the front ok then here 00:13:09
well, as I go against the monkey, that is why I also put it as asynchronous, it is not worth then this 00:13:16
can return us or it will generate an error or the data of a user is worth and this is going to be 00:13:28
another arrow function is worth the jw t verify is worth then with this is what I say if 00:13:36
what is produced is an error is worth if yesterday then what am I going to tell you because it is worth 00:13:51
because it returns the same thing as before, it is worth the status point 401 json 00:13:59
and here we can put 00:14:12
let's see, we can put it here, yes, we have sent the token variable, okay, what happens 00:14:16
is that when we have tried to use the jwt point verify to compare it is worth to extract that 00:14:30
id and see if that user exists, that user does not exist then 00:14:38
we are going to or that idea does not exist then we are going to and we are going to say 00:14:45
touch touch is incorrect ok this is if it returns us an error ok what happens if it does not return us 00:14:53
an error? Well, we are going to launch it, user found, okay? If when you do the verify it does not 00:15:11
return us any error, it means that we do have that ID in the database, okay? And that it 00:15:21
does belong to this dictionary or to this Mongo collection, okay? Then we are going to put 00:15:28
a user fan we are going to tell him the white because we are going to go against mongo and we are going to launch a 00:15:35
consultation with user ok user which is the one we have to control the possible models and such is worth 00:15:44
as a bus that is in the end the one that will also allow us to launch that consultation 00:15:59
because if we put the use the point here we can launch the query that is fine by 00:16:03
and it is worth and what is the id that I want to take because the one that I have taken in user point 00:16:10
and use the point and it is worth in the user when I have taken the verify in the user here 00:16:20
comes the username all the key values ​​that we have saved in that document not in that 00:16:35
dictionary in that key value that we are saving for each of the users within the mungo 00:16:41
must be worth then one of those fields is the one and it is worth then I tell him ok then find me 00:16:47
find by id ok find me by id this user and if you find it you are not going to put the result in 00:16:55
user fan ok then what are we going to do now you can tell him well yes 00:17:03
and it does not exist if you are in the void it is worth no more returned anything in the previous line 00:17:09
then here we are going to put a retun and we are going to put it because again the rest status point 00:17:19
401 jota son 00:17:29
and here we are going to put the user 00:17:43
there is no user related to the touch for example it is worth it, you personalize it, you only put it in English, 00:17:56
what you want to do is worth it if the user found does have information because 00:18:08
what I am going to do is return that information and that is already telling me that that touch is correct 00:18:19
ok then here we are going to put the challenge we are going to put the red dot j son and we are going to 00:18:25
saying it is worth in the field and you are going to see me you are going to return the user found 00:18:36
point this is it was a low id as in the username 00:18:44
you are going to see me the user found point username in the email we are going to send the user 00:18:53
and it is worth and this would be our function in the back end part, it is worth then we would receive 00:19:07
in the network we would receive that touch and well, we would already have possible problems here that 00:19:19
we could find ourselves with, we have done it asynchronously, it is worth above all 00:19:28
especially especially when we are going to have access to our database, which is when 00:19:33
different errors can occur that is active that is not 00:19:42
raised that I know is worth then there is always as well as in the end look 00:19:51
well, well, it would be okay and I would already have my part of the back in 00:19:57
touched ok we have added what we would need to be token verification because in 00:20:06
principle this part would already be ok we are going to continue with the part of the front 00:20:12
I am going to close I am going to close this I do not want to go to the client ok 00:20:20
then in the part of the client we are going to 00:20:27
first 00:20:34
we are going to come to clients rc 00:20:36
we have the answer here is worth first 00:20:43
that we have the register and cookies 00:20:48
here ok here we are here and here we are importing the request register and the login request we are going 00:20:55
to use the token verification then we have to here tell him that I also want to use 00:21:20
this is a comma token verification ok ok this we are also going to use it in our context 00:21:27
now we are in the file of the outcontext.js x and from here the idea is that every time the page is loaded 00:21:38
that was the problem we had with the context variables every time that page is recharged 00:21:48
we are going to create or we are going to better said to control that that event is not to reload and that 00:21:53
event that we already know that it is with the use effect what we are going to do is control or send 00:22:04
information to that verify that we have used in I will say it in the back-end ok and with the 00:22:11
response that you send me I will know if that user exists or not ok then we go with it we are going to 00:22:22
create a new function that we are going to call this one, we can leave it, I don't care, I'm going to 00:22:31
leave it, okay, I'm going to leave it and here we are going to put the effect of the effect 00:22:46
we are going to create our arrow function 00:23:04
and in our arrow function what we are going to tell you is what I want is not to control 00:23:08
any variable, what I want is 00:23:23
we check 00:23:38
we verify the touch against the back 00:23:41
ok and here we are going to put 00:23:50
we look at the variables 00:24:01
ok then I have here the use effect that we are going to control that it is done is that it is updated 00:24:12
In the useEffect, it seems to me that in some video we have already seen that you cannot put the Asynchronous, 00:24:23
okay? So what is usually done is within the useEffect, if you see in the documentation, 00:24:31
is that a function is created, as they are created from all life, and then we call that function, 00:24:36
that function that we create within the useEffect, we can put it as Asynchronous, okay? 00:24:43
entonces la forma de jugar cuando queremos jugar cuando queremos contemplar el sincronismo es así 00:24:48
vale entonces aquí yo lo que voy a hacer es crearme una función que le voy a llamar por 00:24:57
ejemplo y que va a ser asíncrona vale que lo que ando buscando y le vamos a llamar función 00:25:03
and we can call it here, for example, the check, we are going to put the check, 00:25:10
the token, the token, for example, something like that, okay, okay, then this function, 00:25:23
lo que le voy a decir es la vas a llamar justo cuando se ejecute el yus efectos aquí le vamos 00:25:36
a poner vale ahora que va a hacer esta función que lo interesante bueno pues primero vamos a 00:25:48
to see if it exists or does not exist in this case and if a cookie has not been generated 00:26:00
is worth cookies get then this because the same thing that we had put before I would need here before 00:26:13
the lift, then we are going to put the same as above, it is worth cookies that variable cookies that is going to 00:26:25
take and a touch is worth and exactly the same as above 00:26:35
ok we are going to take all the cookies that we have in the front we are going to save it inside cookies and 00:26:43
then I am going to ask if there is a cookie that its key is touch ok that there is no such cookie 00:26:58
well, what are we going to do, well, nothing, we are going to put the set and the authenticate to false, okay, we are going to 00:27:08
be you and we put it in values I am going to put it with the retun so that this returns to us, okay 00:27:26
y luego hay una hay una variable de estado que es cargando vale porque a veces sí bueno podemos hacer 00:27:47
qué cuando estás aunque me genere algún tipo de problema si en el momento en el que estamos 00:28:01
generating those cookies, it is worth at the moment that you are logging things in that style, 00:28:16
then we are going to create a state variable, then we will see if we use it or not, okay, I'm going to call 00:28:21
the cons, we can call it loading 00:28:29
as always we can do something like this this is going to be a use state and here I am going to put 00:28:42
this I am going to do only to tell him that he is loading that we are waiting for those 00:29:02
data ok then it can be good for us to do that ok then where are we here I am going to put 00:29:10
the set and this I am going to leave it ok then I put it is not authenticated it has not generated 00:29:21
any cookies so it cannot be authenticated the loading those data I am going to put it in 00:29:40
false value and I am going to return the set user to zero, that is, in the context right now, because there will be 00:29:45
nothing, this loading variable is also worth it, we are going to export it from the context, okay, okay, 00:29:54
ok this is yes if that is a cookie that does not exist ok yes if it does exist what we are going to do then 00:30:07
is how it can give us possible errors because we are going to go against the back-end 00:30:25
in the try we are going to and we are going to say it is worth trying we are going to put a cons as 00:30:31
always to collect this answer and it is here where we are going to call wait, that is why using 00:31:01
this function check token that is in sync mode is worth it if I could not use this water and 00:31:08
this weight because in the end it is calling everything that we have done before in the backend it is worth and 00:31:13
an error can be generated then be careful with that it is worth you could not use the web and then 00:31:18
put directly the joseph it is supposed that you are programmers ok after that don't do it it's 00:31:25
a bit of a mess ok here we put token verification which is how we have called it and here 00:31:33
lo que le voy a pasar es cookies punto vale esto lo va a recibir back en el back en va a comprobar 00:31:41
todo lo que hemos hecho antes vale va a ir contra mongo va a ver si el usuario existe bueno pues es 00:31:50
justo lo que lo que estamos buscando vale ahora en res vemos que no nos devuelve nada recordar 00:31:57
that there were different cases, okay, then we say well in networks it has not returned anything to us 00:32:06
then we are going to and we are going to say if 00:32:13
three data points, that is, there is no data here, it is because you have not returned any value then 00:32:18
we are going to put the set and false we are going to put the set loading 00:32:24
false ok it is not loaded and a challenge and here we would finish ok now and if this is good yes 00:32:36
we have been returned values ​​is worth all the user found that we had put in the part of the 00:32:55
back-end user fan with the id with the username with the email that yes that he has returned it to us 00:33:01
and then this is not empty the data response is not empty ok what do you want me to do with that 00:33:08
well then there with that what I do want you to do is put the set and it is authenticated it is 00:33:14
authenticated we tell him that you because if this has returned us data it is authenticated we have 00:33:23
sent the touch is already we send it to the set and use of course that we are going to put the response of 00:33:33
attack that are all the values that we have received from the back in ok which is what I insist what 00:33:43
we have put with the user for a point and the user for a point user name and the user for a point and mail ok 00:33:51
ok and what else can I put on it because the set long this now I put it to false because now 00:34:01
I already have it all loaded ok then at a given moment I can ask for the variable 00:34:12
loading then it is true or it is false and that allows me to know if it is all loaded or not ok 00:34:18
with the set is autentic and that because I could also do it but well we are going to put this one 00:34:26
it is also worth that this state variable is usually used, it is worth that some 00:34:31
error occurs because nothing because then we are going to put the set and it is authentic false we are going to 00:34:41
we are going to put the user set we tell him that there is nothing I put it in null and we are going to put the 00:34:52
set the link 00:35:02
to false ok and in principle I would already have that function made here that effect that is going to 00:35:09
control not to take the cookies will send if the cookie exists we are going to send 00:35:18
to verify token verification which is what we have generated in the back 00:35:27
the information that will return me information or not that does not return me 00:35:34
information because there is some kind of error that returns me the information for 00:35:38
the guard that some error has occurred from the try 00:35:42
because the same is worth a little all the time it is the same 00:35:46
ok what else would we have to do 00:35:52
because in principle we would have to take and 00:35:57
we are going to take this we will have to verify it from somewhere then from where we are 00:36:05
seeing or for what we are doing all this effect well to see if we can enter a 00:36:28
protected route or not ok then where we were checking the protected routes 00:36:33
because in the rota protected routes.jsx here is where we are asking and sauté indicate 00:36:40
ok well here is where we are going to make some changes for example we have put the 00:36:51
variable in loading and I want to use it ok then I am going to use it I am going to say yes 00:36:59
when it was in loading to true which means that we still did not have no we had not done that 00:37:09
verification against the back in ok then if loading then here I finish this function and 00:37:20
return we return, for example, for example, I do not know, it occurs to me, it is worth that they put us on the page, they do it very well 00:37:29
now if it is authentic and you are denied and also we are going to tell him that he does not have it in this false 00:37:47
we make a name and if this is false and this is false then it takes me to this one, okay, in principle 00:38:02
I think it would be okay and now we are going to try it, we come to our page 00:38:21
here if I try to put the task it is finished in that it is worth it as I am not logged it sends me to the 00:38:31
login it is worth well this would be fine mario santos 1 2 3 4 5 and 6 log in this is supposed to 00:38:47
that we have already generated the touch more development tools here if I come to the 00:38:57
application I already have touch ok there it is if here I go to task it has returned to 00:39:06
he has returned us to the login impromptu so the error 00:39:21
in 401 00:39:58
is worth I am going to stop the video while I look to see what is happening to him and now we continue well 00:40:05
is a slightly wrong error, let's see it after you are looking at it, we have in the 00:40:18
js file of the client we have the sport with token verification, it is worth that it does not receive any 00:40:28
input parameter, it is not like the login or register that the user receives, it is worth then from out 00:40:36
context well we are already passing it here in 00:40:41
token verification is not to verify if we are passing the cookies 00:40:45
token but we are not using this in reality at all because then 00:40:51
we are 00:40:55
taking that touch of the network itself is worth then this would not be necessary 00:40:58
at all then 00:41:04
instead of erasing it I am going to comment on it so you always have it visible there we are going to see the code that 00:41:09
seems to me that you are not seeing it no then we are going to come here now yes it is worth then this is 00:41:19
what I told you that this cookies touch in reality we are passing it as an entry parameter 00:41:28
token verification but in token verification I am not using it for anything so 00:41:37
like we don't need to put it here for nothing good this I'm going to 00:41:42
comment and I'm going to put it the same 00:41:50
but without passing anything to see if it gives us some kind of error or not and I'm going to 00:41:56
leave it like that in principle the rest of the code that we had put is all 00:42:06
all right ok this we are going to call the route that the route we have said that it will be associated 00:42:10
with the out of control of the js that is token verification and token verification as we always receive 00:42:19
the network and that is, these two parameters are worth the network and the network is to answer the network is the network 00:42:24
that is the request is the request ok we have the verify that because it is not returning it to us 00:42:30
returns an error, it returns us that user who is going to locate it, we have done it with an arrow function 00:42:37
that we could do with a normal asynchronous function, it is always worth the asynchronous because we are going to 00:42:43
find the json and this is verified and this one if it works perfectly for us, it is worth and here it is 00:42:48
here is where I have the problem if I put a console point here and here I put the user 00:42:59
and of good that is the one that I am passing to the fine by haiti ok if I do this we are going to log in 00:43:08
let's go to the page I log in 1 2 3 4 5 and 6 and it is worth if I go back to the terminal I see that I have not 00:43:22
had a problem I have logged in it gives me 200 it is all right ok if I pass the task here now 00:43:41
vale me está dando este indefinido y eso es que no está accediendo a él y de vale pues claro 00:43:48
al no estar accediendo al y de al lanzar la consulta a la query con el fan by air y con 00:44:03
este y de que es indefinido pues no me está encontrando nada y me está dando un error 00:44:08
vale además es que ni siquiera es un error que no que no lo esté controlando vale porque es en la 00:44:13
propia base de la propia query por eso me aparece por algún lado me aparecía 401 pero no me dice 00:44:21
nada más vale entonces si yo cojo y aquí por ejemplo le ponemos voy a comentar este momento 00:44:31
le pongo cons y usher fan igual a weid y usher pain vaya y si le pasó directamente el ide 00:44:41
aquí copiar copiar copiar copiar si le pasó directamente este y de 00:45:03
ala we are going to remove all this we are going to comment to comment no sorry to put it as a string 00:45:08
if I pass this idea that is the user with whom I am logged this if it works for me if I put 00:45:28
here now task ok you see that I am inside the task page it no longer returns me 00:45:34
to login because because it has detected that there is the touch that I have cheated ok but we have already 00:45:47
reached here and in finding the user I have passed this directly to him, it is worth that 00:45:52
it is the one that is not finding me with the user and this is what has to be solved then this 00:46:00
me lo está dando como un error de axios porque es la conexión desde el front con el back en pero en 00:46:06
realidad es un error de no estoy pasando bien ese y de ese dato y de por eso es importante que sepáis 00:46:12
utilizar bien el front y el y el baque vale por lo menos que cuando os da un tipo de error sepáis 00:46:19
hacer una traza de ese error para llegar a una solución una posible solución para entonces vamos 00:46:26
to see that it is returning us in and it is worth then if here we put the console 00:46:32
and I do not need it I have it up there we are going to see that it is returning us in user it is worth that it 00:46:44
returns us in user if there is no error in user it should be loading that idea of ​​the 00:46:51
touch is worth remembering that within the touch the id is saved then to see that it returns us 00:46:58
this is worth here I see it good as we are we would not need it either ok here I put 00:47:05
tasks ok and then this is what this user is returning to me then I have the 00:47:16
the load is worth with that idea and it is worth it and I am trying to access 00:47:27
directly to this air and then this is what it does not leave me if I get here to put 00:47:35
well a bit like the route not the pilot 00:47:42
point there then to see now when I update here when I put the task now 00:47:47
if it is returning the id that I need then yes and here I pass the user point 00:47:59
to the point and it is worth this I remove it here I remove this one 00:48:10
well then now if it is going to work for us we are going to see it I am going to 00:48:23
go back I'm going to go back to the web page ok we have we log in mario santos 1 2 3 4 5 and 6 00:48:28
log in the email is mandatory ok that's it I don't know why that email has come out is mandatory and 00:48:38
if now we go to task and it leaves us without problem ok it no longer returns us to the 00:48:59
login to the window to the login page ok and well this would be the error that was giving us that 00:49:08
I did not know where it was ok and in the end well it is a nonsense like this but good because I have already 00:49:19
thrown my little time to find it ok well already in the next video what we are going to start 00:49:26
do is the whole issue of tasks but well I think that the most important thing is already there 00:49:34
good a greeting bye guys 00:49:41
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
23
Fecha:
18 de agosto de 2024 - 19:55
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 22″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
147.80 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid