Oauth 2.0 tutorial Explain Like I’m 5

let me run a scenario by you your name is John and you're trying to apply for jobs so you find this service called interview Pro because everything has pro in the name today you connect with them and they want to schedule a meeting now they don't want to have to ask you for your availability so they want access to check your calendar and from there they just want to see when you have an available slot so they could go the easy route and ask you for your username and password but would you really give them your password let's say that you agree to give them your password but now they can they're gonna log in as you with Google and they can see your photos there's no way you can limit what they can do now believe it or not back in the day this is what companies did this sets us up for the problem we want to solve namely that you John can authorize interview pro to look at your Google Calendar and just that we thought give an interview pro your password alright so now that you understand the problem that we're trying to solve let's switch gears you're no longer John you're now eight of you Pro okay so you want to build a way for users to be able to connect their Google account your service so that you interview Pro can go and look at their calendars and find an available slot introducing all that it's exactly the purpose of all we're gonna be looking at the flow in this video and in the second part we're gonna be implementing that through code the whole purpose of the flow that we're gonna demonstrate now is to obtain an access token an access token is something that interview Pro ourselves will take to Google and say hey give me my calendar here's an access token alright so now that you understand the problem we're gonna solve let's look at the flow the flow will require that you have a client ID and a client secret remember we're interview pros before we can access anybody's calendars or data or anything we have to go to Google and register with them so Google is gonna say okay I created this ID for you this is ID is gonna identify your app interview pro so that's called a client ID and here's a secret for you the secret is going to you're gonna need it for NATO in the flow I'm gonna explain that alright guys so in this diagram we have John in the middle John is the resource owner according to all terminology because he's the owner of the calendar the calendar being the resource the client is gonna be interview pro so so don't confuse the client in off with you know like the browser or something like that we're the client because to Google which is the authorization server we are the client requesting that to Google on behalf of John alright so let's jump into the flow what the browser in John's machine is gonna do is gonna come to interview pro and it's gonna say hey I want to connect you know my Google account to to you interview pro and I'm gonna mark responses with a blue color interview Pro is gonna say alright go to this URL so it's gonna ready wreck just browser to Google so Joe's browser is gonna come to Google and Google is gonna respond with a login screen he's gonna be a login screen now once he logs in he's gonna submit that and Google is gonna show him it consent oh I'm terrible at drawing a consent screen once he consents he submits that consent to Google and Google will say all right go back to interview Pro what you see here is just to resurrect okay so John is gonna go back to interview Pro and now interview Pro at this stage let's just simplify for a second it's gonna have access to John's account this is the flow in a nutshell I'm gonna expand it in a second but just so far it's important you understand that the reason that this is secure from John's standpoint is that he is not giving his password as you can see here he's submitting his login information to Google right and then Google shows him a consent screen and then he submits the consent to Google and then Google will say all right you're done here go back to interview pro so let's drill a little deeper here let's go here so John system Pro I want to connect my Google account with you interview pros in this response is just gonna redirect John's browser to Google when we construct this URL here that he is gonna be sent to we're gonna pass in some parameters for this flow the first one is gonna be your client ID so when you're gonna start this flow you say you're basically telling Google hey get me an access token for client you know interview pro you also need to pass in the ready regular which is basically when the flow is done here after he has consented and the flow is done where do you send him back to all right so it's gonna be this URL here so this URL that he's gonna be sent to is gonna come from the beginning here next you're gonna pass the in scopes so this is what are you gonna be allowed to do with the token then there are two more things that you could pass in state which is something that Google is gonna stand back here right so you put it here it comes and then it comes all the way back to you here we'll see an example of that later and then you can pass in the response type in this case we're gonna pass in code and I'll explain what that means just now this is actually very important so this is what we're gonna talk about next so what does Google stand here right okay he has consented all right so Google is gonna send him back to the redirect URI that we are specified in the beginning and what is that you're gonna receive what parameters the state and now you would probably stay okay so you're gonna receive the access token here right you completed the flow you have the access token and then you can just you receive the access token here and then you can just use that access token to query the calendar if that is your guess you will be wrong okay that is the case in a flow called implicit flow all right so I'm passing in code here but if it's an implicit flow yes you would be receiving an access token here okay instead what you receive is a code this code comes back to you so this is a redirect request so as that comes you forwarded along to the API now the API has the code what the API is gonna do is API is gonna use that code and make it request to Google passing in the code and Google is gonna reply to the API to interview pro with the access token the point of this code is ultimately for the API to receive that code and exchange it for an access token and get the access token from Google all right so now you might be wondering why didn't Google just send to us the access token here why make cuts do this extra step so that is what would happen if instead of code you use the implicit flow so here instead of code you would have sent token ok then at the end you would receive the token this is a discouraged flow it's kind of deprecated you shouldn't use it and we'll see why so let's go back you don't you don't pass in token you pass in code now the reason that you do this is because if you pay attention to my diagram here this exchange of a code for an access token it's not going through the browser okay this entire flow here that's going through the browser but this flow here is not so the point is that you do not know what is happening here right you don't control the browser you don't control this could be a mobile phone as well you know you don't have a lot of formal control over that I mean you they maybe the user has installed an extension you don't know that's the point the point is that yes you control this and this is secure because you're using HTTPS here okay so it's secure it's not it's not a bad channel it's not an insecure channel but this is you have less control over this channel over this channel of communication so technically for instance you've used this code that is sent here you know an extension pick it up you know someone would see it in the in the address bar you could lick this code right and that's fine that's fine why because and here's the key here's the key to the extra step along in order to exchange this code for access token what do you need to pass in I just put in code here but you actually need to pass in your client ID and your client secret otherwise you can't exchange that code so these salts are problem right because what if somebody steals this code here you know the when the user is redirected there's some extension something happens somebody sees the address bar takes a picture and tries to exchange that code before you they can't because they don't have your secret but because this is your API this is not something you know you have complete control over what's installed here you have you are the owner of this right you don't need to put that secret in the browser or the mobile apps because someone could you know reverse engineer your mobile apps or someone could just expect the JavaScript in your browser even if someone were to steal this code they could not use it it'd be worthless to them because they don't have this secret this division that we're doing here this first part of the flow where everything is happening through the browser you go to interview Pro it comes back to you it sends you to Google comes back to you shows you the screen you go back to Google since your consent screen you go back to Google Google sends you back to interview Pro this whole thing is happening on the browser okay so this is what is known as a front channel in the docs it's secure and it's fine it's just you don't have as much control but here this is a server to server communication hopefully you control your server you own this and you trust that Google is doing a good job so this is what is known as a back-channel right so we don't expose the access token on the front channel only the code but that's fine because no one can use that code unless they have your client secret so this is the the most common approach to using OAuth with a response type of code like I said before you could not use code you could use token instead and then you would not get a code here you would just get this access token sent to you to the browser here when do you use that well you could use that if you don't have it back end right so if you don't have this well then you don't have a choice but in that case there's an extension to the OAuth protocol called pke poxy or something like that and I'll go into detail on that in a future video okay so we've covered all of wealth remember is for authorization now you might come to me and say hey but I've seen a wall being used for authentication sign up with Google or sign up with Facebook so so if you're building an app the user can create their account with an email or password or they can just sign up using their Google account how come because that's an authentication scenario okay but well is built for authorization so yeah oh it was a very successful protocol and what happens is that it started to be used that way so let's look at how okay so we're back in my tablet and pay attention to this right when you want to connect your account Google is going to ask you to log in alright so you are authenticated with Google and now imagine that in this coops of the things that you want access to is the person's profile so now you have access to their profile meaning maybe their email their first name last name whatever this list of scopes is is not standardized depends on the app so imagine that Google exposes the scope that says profile and that is what you request you could come to Google and say hey give me this give me John's profile information and then you would get John's first name last name and everything because they had to login in Google and because they had to they granted you access to their profile II you could technically authenticate joining that way sign them up you could just grab the approval information and just register me in your app without making him rewrite you know for his first name his last name the problem is that this is not standard now maybe you know Google has a profile scope let's say that Facebook also has a profile scope when you retrieve the profile you know Google uses a certain endpoint and Facebook uses a different endpoint and Google you know cause the last name you know family name and Facebook close here last name this is not standardized information it works but it's not ideal we need to solve that and the way that was solved is through the creation of the open ID standard what the opening D standard does is it's not a replacement of auth in fact it works on top of OAuth and it provides a scope called open ID so when you add this scope it also dictates okay you're gonna have a specific endpoint where you can go get the profile information that will have a specific format so it's just a way of all of us getting together and saying all right we're gonna standardize you know the name of the scope the endpoint where you're gonna go fetch the profile what the profile will have things like that the flow is now complete I'm missing two flows still because I meant I believe I mentioned the authorization code flow and the implicit flow I'm missing the resource owner password credentials flow and I'm missing the client credentials client credentials is more for like your API wants to access its own resources alright so but I'm not gonna cover that in this video that is coming up in the next video alright guys so this is everything I had for you today I hope that you liked it and it was useful to you do not forget to hit like and subscribe and turn on notifications if you wanna see more of that so that should be right there remember that this video was part of my explaining like I'm five series I had the PLS video you should probably see it there so that's all I have for you today I hope this was useful and that you learn something I'm gonna tackle the rest of all in an upcoming video I just want to keep this video from being too long so I'll see you guys in the next one and I hope to see you again

Channel: Gabriel Zimmermann

Views: 46,302

Keywords: oauth, oauth 2.0, eli5, tutorial, how it works, ouath2

Id: hHRFjbGTEOk

Length: 15min 46sec (946 seconds)

Published: Fri Mar 27 2020

Reddit Comments

[u/goldenhunter55]

I believe you are the content creator of this channel, i just took a quick look into your videos and was amazed.. subscribed for sure.
can you mention some of the books that have made a good impact on your career. i am reading Nodejs design patterns, what else should i read?