GraphAPI Auth: How to Use OAuth 2.0 to Access Microsoft GraphAPI/OneDrive | CodeNameK - 02

oauth is probably the most popular way for cross-service authorization hello and welcome to code wizard i'm sar how you doing in today's video i'm going to share with you about my progress on the investigation today's topic is about oauth that is one piece of the fundamental to make the application work i will first share with you what i learned about how oauth works on the paper then i'll trigger a flow manually gain an access token from this resource provider and use that piece of token to access the resource owner's wall drive i hope by the end of the video we all have better understanding about what oauth 2 is let's get started let's quickly go over our goal we're creating a desktop app a phone app and a web app to store the numbers and we're going to leverage the existing data service to do the syncing for more details please review the quick blueprint video i want to do some investigation around the data storage storage first because there are a lot of unknown for me a full disclosure i'm currently working at microsoft as a senior developer but this project has nothing to do with my job my tech choice will be biased and i know about that and i mentioned this because i wish you to be aware of that as well i'm going to pick one drive because that's the one that i'm familiar with the way i'll do things should be very similar for other services okay let's start today's investigation what i want to understand is how my app the codename k to access onedrive this is specifically for the desktop app and the mobile app by my understanding at this moment the web app is a little bit different but we're going to make another video for it i'll take the desktop app as an example it seems like it's very reachable with an oauth flow and here's what i learned a nullness flow involves several parties some of them are on the client side while the other parties are on the internet in our case the users on the client side and the user is also a resource owner this is easy to understand let's say i created a live account called namek test user at hotmail.com microsoft hosts onedrive but i am still the owner for the onedrive because i own the account every resource belongs to me a second important part is a client in our case it's the call name k application that we're going to build then there is a resource server like one drive in our case there are other parties like the authorization server or the authentication server along with the service i'm not going to distinguish it to just for the simplicity first it is one drive now here's a challenge the user owns the hotmail account by account i actually means a credential that is the username and password and inherently got the onedrive the client or the app actually don't have anything so how does onedrive know to allow access from codename k this is what i learned firstly the application developer need to register an app with the resource provider and that will give back the client id to identify that specific application when the user starts the application the application will request an authorization to access the resource of onedrive from the user there are several ways to do that for desktop applications one common way is to bring up a browser and send the user to the authorization endpoint there are several pieces of important information that will be sent in the url and they are the client id for this app what kind of resource this app want to access and the permission this app requests by the way in some places targeted resource and the permissions will be combined in the core scope now this is essentially to tell the authorization server hey i am this app by client id that i register with you ahead of time i want to access the current users the onedrive with let's say read and write permission okay so how does onedrive respond onedrive would ask who's the current user show me your credential and that's the response to the browser request from the app now it's the user's responsibility to establish an identity and this is the authentication part the user need to prove to the onedrive service hey i am who i am by providing the username and password once that's done the onedrive would ask the user hey now i know who you are do you want this app to access your onedrive it asks for these permissions and if the user says yes as i'm going to do right now onedrive will either give back an access token or a code that could be used to exchange for an access token and then the app could use the access token to access the onedrive resource the app without knowing the username and password is now authorized to access the user's onedrive that's the flow and the theory now that we figured things out on the paper it is time for us to do some proof of concept i'm always amazed like how big the gap could be in between knowing the tone paper this is the implemented this is usually the step to help me gain some further understanding it also helps spot the kvs if there's any so the first thing that i would do when it comes to something new is to find out the official documentation and scan it when i search the onedrive authentication i'm landed on this page and here's our first caveat now the microsoft graph api is recommended over the onedrive api okay let's follow the link let's go over this document really quick the first steps on the documentation is still talking about to register your app which is great that should give us back the client id or app id it lists the authentication scopes those are the possible options for the app to request the permission for during the authorization and then i saw the supported flows that is great with this information i could probably manually craft in authentication flow and if it is doable manually this is definitely doable by programming let's get started by registering an app and get to the client id once i follow the link to register an application on the documentation i need to sign in with my dev account now i want to be very clear this is me as a dev not the codename k test user all right as you can see i already have two applications registered before and i'm going to create another just for the demo purpose the ui might change over time but the basic steps should be there let me start by clicking this new registration button for an application we're going to fill in the display name the supported account types as well as the redirect uri the name will be displayed to the end user so it's probably a good idea to pick a descriptive name for supported account types i'm picking the one that supports organizational user as well as personal users now the redirect uri although it is optional i'm going to fill in a local host address and i'll explain why soon click the register button and there we go a new app has been registered here on this overview page there are several information that is critical the first one is a app id or client id that will be mentioned again and again the second one is this endpoints button it lists all the live endpoints there are several types of endpoints like authorization endpoint token endpoint it's okay if they aren't to make sense now you will know what you are looking for when you follow a documentation but this is actually another spot with caveats these endpoints changes over time the documentations might lag behind if we follow the documentation try to hit the end point and it didn't behave what we expected this would be a spot to check if something changed okay now we got the client id let's proceed forward the next step is to understand what kind of authentication scopes could be used the codename k app need to be able to read and write files so for me the choice might be files don't read write we probably do not need offline access but the comment does tell us that it is possible to having multiple scopes okay scope happily decided now it's time for us to understand the flow if we got everything correct the flow will eventually give us an access token and the access token will allow us to access the target resource let's try that out according to the documentation the first step for us to do is send a request to the authorization endpoint there are four parameters that are needed client id we have one scope we just chose one response type need to be hard code to token because this is the token flow and the redirect uri that is used for telling the onedrive the resource provider when the authorization succeeded where to give the access token to okay that's complex let's see it in action and hopefully it will be easier that way now imagine code name k need to access the user's one drive it will start a browser and type in these oh i am typing this now because i don't have the code for codename k not yet so i'm pretending i am the code and i'm filling up parameters according to the documentation say client id i'm going to copy the scope so that i don't make a typo or something like that hey app doesn't make typo response type would be hardcoded to token and the redirect url is localhost auth and that is to say if the user signed in successfully please give the token to localhost auth and the onedrive is giving me the sign in page again now this me is the resource owner i need to sign in so that onedrive knows i am the owner for the onedrive so i'll fill it up with the codename test user account and we see an error message already empty response let's see on support the response type and the description says the response type is not supported okay after handing for a while i think i find though what it was missing there are actually settings for the registered app it lies in this authentication blade this is a properly used as a pre-negotiation between the application and the resource provider that these other flows that i'm going to use and to use a token flow i believe this checkbox needs to be checked now let's go back and try it again to save time i'll put the url in the clipboard ahead of time okay this is beyond the failure point now the response seems like still an arrow but hey pay attention to the url it has been redirected to the redirect url which is a localhost slash auth and it is giving the access token followed by the pawn sign pawn sign shop sign whatever now let me copy out to the url and extract the access token the token is the url encoded so we will need to decode it before use and it will only live for 10 minutes without further ado let's spin up postman and try to hit the one drive so i'm going to do that twice the first time without the bra token and i'm going to get to 4 1 of course now let me paste in the token and run it again and it succeeded it lists the children of the root if you pay attention to the url that i'm using this is the graph endpoint rather than the onedrive endpoint into the api like v1 me drive rule children this comes down from the official documentation of the graph api this is not the point for this video but i'll put a link to the description thanks for watching during this investigation i understand more about the user or the resource owner in the knowledge flow as well as what is a client and what is the resource provider i have better understanding of what a token flow is and i also get more confidence that the storage story for project k is going to be a success i actually made more progress for investigation than what i can show you in this video and stay tuned next time we're going to talk about sdks if you liked it press the like button and subscribe keep coding keep improving i'll see you in the next one until then take care

Channel: Code with Saar

Views: 11,920

Keywords: graphapi auth, Microsoft OneDrive REST API, OneDrive api, oauth 2.0 api authorization, Token flow, Access Token, Microsoft GraphAPI, GraphAPI, OAuth flows, API Authorization, OAuth 2.0, AccessToken, OAuth, CodeNameK, Microsoft Graph API, oauth 2.0 explained, Resource Owner, OAuth overview, Resource Provider, RestfulAPI, oauth 2.0 tutorial c#, oauth 2.0 tutorial, Oauth 2.0 tutorial c# .net core, Code Flow, Client Application, proof of concept

Id: NljQx11YqNY

Length: 14min 16sec (856 seconds)

Published: Mon Sep 13 2021