AJAX Requests with Token Authentication
HTML-код
- Опубликовано: 6 май 2019
- When working with fetch and making AJAX calls, you will often need to authenticate your requests.
Token authentication, and in particular, JWT token authentication is a common way of handling this. This tutorial covers the basics of JWT tokens in the browser and how you can include the Authorization header in making your bearer token requests.
NOTE: the header in the code should be "authorization", not "authentication".
Code GIST: gist.github.com/prof3ssorSt3v...
JWT website : jwt.io/
JSONPlaceHolder site: jsonplaceholder.typicode.com/
If you want more information about the whole JWT lifecycle, watch this new video - • How JWT Works - Client...
You're like the bob Ross of programming. Just gonna code some happy little Bearer tokens
The best front end token explanation!... Thanks 👍
Steve I just want to commend you for how you take time to answer everyone on the comments well done.
Precise and good explanation.
Even though the video is quiet old, still relevant solved a major problem for me. thanks😀
Most of the videos I have made in the last 4 years are still completely relevant today.
at the 4:00 mark I believe the name of the header is actually Authorization and not Authentication. Awesome tutorial as always though, I've learnt a ton from this channel and was now trying to figure this topic out.
Very thanks, I'm from El Salvador!
Helped me a great deal, grateful I'm !!
Thank you very much, big help
Great example, just wondering if this setup can be applied to Twitter or Facebook api, if I have a token and need to access or fetch some data?
It all depends on how the individual API is set up. In the documentation for the API they will say if they want a header value or query string value etc.
great 👍💪💪
Great video. Session storage will be destroyed once tab is closed. I think its better to store them inside cookies.
We want them to be destroyed frequently. Cookies are not secure and will transmit the token to other origins useless you take all the precautions. Don't save them in cookies.
Thank you, I really enjoy your delivery. I have one concern: Consider a large application where you will be writing many AJAX calls that require the token in the header. Every AJAX request will have the exact same lines of code to add the token. Is this not seen as a design problem because there is lots of code duplication? If you had to change the way you add tokens, you would have to change it for every AJAX request. Is there a solution to this?
I would have one function that does my fetch( ) calls. I would pass things like the Request Method and the endpoint to that function, as well as a boolean indicating if the token needs to be sent in the header. There is only one place in my code that I add the header.
Even if there were multiple functions doing fetch( ) calls, the token is coming from my session storage. It is in a variable that I put in the header. There is not really much duplication. It's not like I would be hard coding a token string. Ever.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for the reply, I understand your solution. Thank you!
When the 'Authentication' header is set (with ' :' where ':' is encoded as a base 64 string), is that request header seen in the DevTools? I couldn't see it and if it is not seen, how is it sent to the server? Also, if it is seen, won't it reveal the username and password or the token?
The password should never be in the token. You can see the headers through the Network tab.
hi @steve , how are you ? Hope you are fine. My qst is, in your fatch using basic authentication video you set the header property name as "Authorization", where in this video you set the property name as "Authentication". Now is it authentication or authorization ? thank you.
The header should be called "Authorization"
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization
The other video was correct. This one has the typo. I've fixed it in the Code Gist and added a note in the description.
This video covers the server side too - ruclips.net/video/QCCmWNlEkdY/видео.html
Thanks for asking.
Hey man, I'm having a problem with a current project.
I'm scraping a website with authentication and grabbing some data. I have that all done, however, I'm also setting up my own web app and I want the users on my website to authenticate using the other website, but then only show the data I scraped. I'm not currently storing any kind of user data. The problem I'm having is keeping the user signed in on my website. Would I use jwt? Or is there a better way of doing this? I'm pretty new to all of this so any help would be great.
PS I have permission to scrape the website as it is for a college project.
If you want to use another website to do the authentication of your users then you should look into OAuth. JWT is typically part of that.
Can this be used to access a wordpress page which visibility setting is set to private? I'm making a music app (personal project) with cordova where I load my music data from a custom post type loop. To make things easier I just load the div of the wordpress page that displays this content. Off course, I don't want the page to be visible publicly on my wordpress, so I set the visibility to private. Problem us, this also breaks my ajax (understandably). Can I use a similar method as you did in this video so that the app users can authenticate themselves and access that content despite the page being private?
I would not recommend trying to put part of a protected page from a WordPress site into a Cordova app.
Create a separate authenticated system that provides the media. Then allow both the WordPress site and the Cordova app to access the media API using the token.
Thank you for the video. Could you explain/reccomend some resources on how your "MyUniqueUserToken' actually ended up in your session storage?
Here's my video on session and local storage - ruclips.net/video/hOCYNdgsUfs/видео.html
@@SteveGriffith-Prof3ssorSt3v3 I just rewatched this again and felt foolish for asking so soon! haha, thank you.
The attacker is still able to see the authentication header token right?
Then he could easily get the token and create another request.
Is it true or not? Please explain.
Yes. But the headers will be created and signed by the server. If they are modified then they will not longer be considered valid. They should also be replaced at regular intervals.
I explain more about the process here - ruclips.net/video/QCCmWNlEkdY/видео.html
Can you teach about debounce for window scroll events. Suppose only if the image comes to the viewport then only request for the image.
I have a video already on debounce - ruclips.net/video/2qRE071fWxw/видео.html
Please post your request for an infinite scroll video on my tutorial request video.
Thanks I will.
Please, what VSCode colored extension is being used in order to have a better understand of indentation?
There are two extensions that I am using "indent-rainbow" and "bracket pair colorizer 2". The first makes the vertical coloured stripes. The second colours pairs of ( ) { } [ ] to make it easier to match them.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for your help Steve, quick by the way.
Now what I don't understand is: the server has to first send the token to the browser right? So how does this make anything more secure? any attacker could just read the token out and then use it in his requests or am I missunderstanding something here?
There is still management of the tokens that needs to be done on the server-side.
- The token has an encrypted signature contained within that is generated by the server.
- The tokens need to time out. So they will include a timestamp that lets the server check how old it is before accepting it
- The tokens should be replaced by the server on a regular basis.
- Unlike a session id in a cookie, the token will include more information about the user and what they are doing or have done. We won't include anything private or that is a security risk inside the token. However, the contents are included in the signature. This means that nobody can alter the information in the token and still have it be valid.
- The fact that it is signed by the server means that other people cannot create fake ones to try and hijack a session. If you guess a session_id correctly you could take over a session.
- If the user is going to do anything mission critical like change a password or process a credit card for a purchase you would probably want to have them reconfirm their username and password on top of having a valid token.
There's a lot more on the server-side when it comes to tokens. For the browser it should be just the simple process of putting the token into a header.
@@SteveGriffith-Prof3ssorSt3v3 thank you, got it - you might know any tutorial that covers the server side implementation?
@@knufflpuffl none off hand but I will be doing some more serverside node tutorials in the next month
Hello you you can to explain how conect with api mercadolibre by fetch?? i have problems with the token!
I'm not familiar with that library
Why do I need to use 'JSON.parse()' when I am getting the token from the session storage?
The values stored in session storage are strings. Typically when retrieving a value from Session or Local storage we need to convert back to the original datatypes with JSON.parse. However, if the whole value is only a String then you can skip the parse step.
@@SteveGriffith-Prof3ssorSt3v3 yeah that's what I was wondering. Thank you for the reply! It's amazing how you still reply to old videos!
how to redirect to other pages with authentication header?
thanks!!
The authentication header is a token that you send along with your request for another file. It doesn't really have anything to do with the redirect. On the server, if the user provides an invalid token, you might then redirect to a different resource... or you might just send back a different data set that indicates that there was a problem.
How if the user can copy the token saved in sessions storage and use the request outside other website?
I don't understand your question
He's talking about security issues where different users can copy the token and use it externally to retrieve data from the web api using your account
@@bosunadepoju1656 yes you're right. because the token is put in the client side users can easily get the token.
sir why we did JSON.stringify,JSON.parse
Kindly explain these terms in brief with your gentle feedback
The JSON object has those two methods which allow us to convert back and forth between a JSON string and a JS object.
IF you need to understand the difference between those - ruclips.net/video/912_cPllMyg/видео.html
If you want more videos about all the aspects of AJAX and fetch, then here is my playlist - ruclips.net/video/7EKebb4VUYQ/видео.html
I got something like this running. Thanks. But the token only last about 24 hrs. Is there a way to refresh it? Better yet, is there a way for me to have a permanent "token"?
You never want a permanent token. That would make it very insecure tokens should have short lives. Every minute it stays is another minute a hacker has to gain access to your session
@@SteveGriffith-Prof3ssorSt3v3 good point. But I also don't want to update the token manually every 24 hours. How do I achieve this?
hi bro, what about if that token are used by anonymous user ? when this user know how request is send from dev tools ? are safe ?
Even if the user is anonymous you can create a session id to track that person. The session id would be in the token.
@@SteveGriffith-Prof3ssorSt3v3 okay, i'll try this method. thanks man. you're so helpful
Do you have any videos like this but entering username and a password?
I have a whole playlist about AJAX playlists. username and password are just two strings that you send with your fetch request in the body. This video, in the playlist, should help - ruclips.net/video/gL8M9Sl5QLs/видео.html
and this one - ruclips.net/video/KJdD8pdZSo8/видео.html
@@SteveGriffith-Prof3ssorSt3v3 Thank you so much! Great videos!
How do you verify if token is valid and not expired?
That is handled on the server side. The server side script is what handles the signing of the token and checking for expired tokens.
But visitors can see my token when show page source, so they can use my token. How can I block to them?
A real token should be signed by the server, temporarily valid, and returned from the server, not hard coded in the client side code.
@@SteveGriffith-Prof3ssorSt3v3 👍
anyone can get that token easily