Simplified Oauth 2 0 -- NodeJS Tutorial

so today we're going to take a look at oaworth and what is over well it is a way for us to make a really simple sign up process and the way that it works is that the user clicks sign in or sign up with for example google could also be like facebook github lots of sites enables this feature and then they will be redirected to that site and they will have to click on accept that our site can access their public profile on the oauth site and if they click accept they will be redirected back and then we can retrieve a token from that site that will enable us to fetch some some details about their profile so from there we can choose if we want to create a user on our site or if we're gonna keep a session from that site and just access like their name their email what we can access can be specified per site and i want to build this as simple as possible we're going to have a server on our side a simple little node server that will handle these callbacks and the redirections the purpose is to show the simplest way possible to achieve this and in our example we're gonna use oauth sign-in with github so let's first take a look at github's documentation for achieving this and before this step one the user has actually clicked on the button login or sign up with github on your site and then step one is fired off here users are redirected to request their github identity so they are redirected from your domain to the actual github.com domain and if they click allow or if they sign in they will be redirected back and this is a bit simplified we'll go into more details about how it actually works real soon and then step three your app accesses the api with the user's access token so let's look deeper into step one so the user gets redirected to login or authorize and we should have some url parameters on this url so it's client id we can also have redirect uri but we can also set that on the oauth application on the settings in github and we'll take a look at that as well as you can see here the client id is the only one that says required so we will just care about these two for this tutorial step two so users are redirected back and we will get a code as a parameter it says here exchange this code for an access token so we will give the code and we will get back an access token and that token can then be used to get data from that user's account at github but i think it becomes clearer once we actually start to try it out in the code let's look at github i have this test up here that we're going to use and i am under settings on my account and then developer settings and then under oauth apps and here you can click new oauth app and you can name it and you need to have a home page url and here is the redirect uri that we looked at in the documentation so here let's see what i have set for that in my test app so here once we are done creating the app we get a client id and a client secret and those we have to use in our code and down here i have set the authorization callback url to localhost since i am developing locally now and then oauth callback so i need to have a route that listens for the oauth callback so i have saved the client id and the client secret and of course i will delete these afterwards you can create your own if you want to follow the guide so now we are good to go with actually looking at the code before we dig into the javascript let's just look at the ui and inside the server folder we actually have a little front end here in the static map and here we have the actual html page so as we can see we have some content for when you're authorized and some other content for when you're not yet authorized and let's start the server and just look at this markup and the styling that i've made here we can see app listening on port 3000 so if i go to localhost 3000 i see here happy to see your newcomer and sign in with github so if we look at our main dot or our server file we see that on the root url we're actually just serving this index.html file that i just showed you and that's what happens in this view we have three routes in this app the first one is slash auth and when we navigate to slash auth we redirect the client towards github and we go to you might remember this from the documentation but it's login slash oauth that's authorized we have a url parameter from of client id so here i use a package called dot end and that allows me to specify some variables in a dot n file and then use them in here with process dot end and then the variable name and it's important that i have this line in the beginning of the file for that to work if we look in the html file we see that the sign in with github button is actually a link to slash auth so linking to slash auth triggers the redirect to github so let's set some break points in the server code to verify that this works so we've already seen the get root that it works because we got the index.html file so now let's go to the font and actually click the link and now nothing happens because we got stuck on the breakpoint here so if i press play we should be redirected to this and see the client id as a parameter in the url i will press play and then we get redirected so sign in to github to continue to test app so now i need to sign into my github account and i don't want to show you the length of my password so i will just do this and now we signed in and then we get redirected back so now that i am logged in in this browser the next time i do it it will since i allow the application it will just go really fast now i got stuck on the break point again and i press play and i just go to github i immediately since i have a logged in session in this browser i just get redirected back immediately this is the route that i get redirected back to so let's stop inside here and see what actually happens so now i click sign in with github and before i get redirected back now it's just waiting and that is because we have this breakpoint here so i just structured some data from the callback here so we get an object that has query and code and this code is important for us so i create this object called body that has the client id and the client secret and the code variable is added that we get from github so now if you remember from the documentation we were supposed to get the access token using this code so we do a post to this url and we pass in this body object so this is the body and then we create some headers and call that opts so we do a post we pass in the body and the headers and then when we get a response we parse out the data.access token and let's stop here so now we posted to github logging on with access token and if everything went well we received a token back from github and that is this one here so now we have the actual access token but we have it on the server side so here we could do like a request directly and get the user's profile and for this simple demo i just did redirect to the root url and then i set a parameter as the token so we should be able to see the token on the client side so i press play and if we go back to the browser we have the github token here let's also look at what happens on the client side so here i have just created two functions to hide and show elements and that is because i want to hide and show the unauthorized content and the authorized content so per default the authorized content is hidden when we run this javascript code if we have a token and the token is the url parameter token if we have that we hide unauthorized and we instead show authorized so this is some very simple demo code here but that's all there is to it feel free to incorporate it for real in your own apps and thank you so much for watching if you like the content like the video and be a subscriber thanks for watching and see you in the next video hopefully you

Channel: Coding Tech

Views: 1,064

Keywords:

Id: qTsqpYz5cGE

Length: 11min 50sec (710 seconds)

Published: Fri Dec 17 2021