Understanding Azure Active Directory and OAuth models with SharePoint solutions

foreign directory and open authorization 2.0 in the context of a SharePoint online Modern solution just to set the context in this video we are going to understand what Azure active directory and open authorization 2.0 are from a consumer point of view whenever you want to consume any rest API in the Microsoft 365 ecosystem in fact using AED and off you can easily and securely consume maxograph SharePoint online rest apis and any other third-party apis registered in age ready which can even be a rest API of your own whenever you consume an API no matter if it is graph SharePoint rest or third party one you will have to provide an access token so in this video we are going to understand what a delegated access token is which is something that we use whenever we want to consume an API on behalf of the currently connected user or the application token access token which is the one we use whenever we want to consume through a back-end service or a demon an API without a specific user identity and we will also dig into the internal structure of an access token so let me move to the demo environment and let me show that in practice let's start registering an application in Azure active directory to play with it and to retrieve an access token and understand what's inside of an access token so here I am in Azure active directory and I'm going to click on app registration and to create a registration for a new application the application could be the add-in transformation demo application and it will be a single tenant application let's click on register so now I have the client ID of this application and the Tenant ID which are really useful and we will use them pretty soon then in the certification secret we should create a client secret for this application in order to use it to retrieve an access token base for example on an authorization token so let's click on ADD this will be the value of my client secret let me copy it in a safe place because I will later on use it and then let's go to the API permission section in this section by default we have the user.read delegated permission so we can read the information about the current user basically that's the meaning and then we can add a permission for example for micrograph still delegated so we want to use micrograph on behalf of the currently connected user and in the delegated permission I want to retrieve the permissions to work with the mail for example of the user so I can search for mail dot read and I can get the mail.read permission I can eventually add additional permissions likes like like for example design dot full control which means all of the size that the user has access to will be also accessible to the application that I'm configuring of course if the user will grant that permission to my application we can also configure other permission like I don't know site dot read dot all if you rather want to read it and so on so forth so let me add this permission requests so these are the permissions delegated permission that I granted to my application notice that actually I haven't yet granted them because for example this one the site.foodcontrol.org requires a tenant administrator to do the grant for this permission so let me do that being a permission which is quite an elevated permission it is a really useful to have an administrator a tenant administrator to say yes I grant it for this application we we also add permissions of type applications so still select micrograph and now click on application permissions these permissions will be granted to the alpha in order to being able to consume micrograph without a specific user identity but just with the application identity so for example again I can search for Scythe dot read and I will assign the site dot read all permission of type application to my app and again I need the Internet admin to Grant this permission now that I've done that we can configure the authentication of this application in order to be a web application just to make an example and the web application will use a redirect URI which can be for example the URL of PMP on GitHub so pmp.github.io just to make an example and we will enable this application to give back the access token and eventually the ID token if needed so now the application is fully configured we can now switch to postman for example and start playing with it so first of all let me copy the client ID of this application let me go to my Postman tool and let me configure a bunch of variables so for example the client ID of the application that I'm going to use as well as the secret and don't worry about the value of my secret because I will refresh it right after recording this video so not a problem then I will specify the redirect URI for my application which is the one I already configured in my authentication section of the app so I can save the variables and I can come here where using a Postman I can build a URL for getting the authorization code so login microsoftonline.com followed by the tenant ID that I'm targeting open authorization 2.0 authorizing point I will specify that I want to be redirected to the PMP GitHub IO I want to get the access token for this client ID application for this specific permissions so user read mail read and I also want to get the open ID in the profile and the offline access so if I click on this icon I can get the whole URL that I should use in a browser to Leverage The open ID connect protocol and get an authorization code so let me switch to my browser and let's go in a clear tab here we can paste the URL and we will see that we've got automatically redirected to the pmp.gita io site because I'm already authenticated indeed if I would do that in Anonymous session I would have to provide my user credential first now here in the query string I have a code an authorization code I can copy the value of this authorization code and I can paste it as a variable in Postman so let me go back here and in the authorization code I'm going to use this code okay so that I can make a request to get an access token for this application my target will be a positive equals to https login.microstonline.com tenant ID slash open authorization V2 token in the request in the body of the request which will be a form data request I will have the grant type so I've got an authorization code and I'm providing the authorization code back to Azure active directory through this code argument then I'm providing the client ID and the client Secrets my application and again there are direct URI so let me execute this request by doing that I've got back a Json response which includes the access token for the user the refresh token and the ID token and we can dig into them for example if I get the value of the access token right here let me copy it I can go back to my browser and I can go to jwt.ms.ms through this site I can see what's inside the access token and we can see that inside the access token we have a bunch of claims which include information about the target audience this is the unique ID of micrograph because I requested an access token to consume micrographer and then I have the information about the user who made the request and I have the information about the permission Scopes that are assigned to this token so for example May read the site full control.all and so on so forth these are the permission Scopes that we configured in the application initial active directory so using this specific access token which I can copy again back into the variables of Postman we can then make a request to micrograph how well we make any kind of request accordingly to the permissions that we have so for example I can say a consumer https graphmic.com V1 slash me slash messages and I want to get the messages in my inbox from an authorization point of view I will use a better access token where the value is the one I've just got from the token request and as such I can make my get request and here we are here I have all of the messages in my inbox perfect now eventually we can also play with additional stuff like when we requested the code the token we also got back a refresh token and we can use the refresh token to get a new access token whenever the access token will expire in fact in the claims of the access token we have the information about when it will expire and when it will start to be valid from so NBF and exp will be the claims which will state from when to when the access token is usable by an application so I can go back to my variables I can add a value to the refresh token variable as well and we can make a request to get a new access token through the refresh token with Target again the token endpoint now we say that the grand type is not anymore the authorization code but it is a refresh token which will provide in the request right here we still provide the client ID and the secret and the redirect URI and by making this request we will get back a new access token which will last uh more than the previous one and that we can use to replace the current one with a new one to keep it fresh and refreshed now this is the theory if you want to play at low level within access token with the refresh token with the authorization code and so on so forth now we want to use this technology and these security layer in SharePoint framework so let me switch to a SharePoint framework solution that I created for the sake of showing you how to play with micrograph and with the Azure active directory and open authorization in a modern SharePoint framework solution and here we have an spfx solution in which I have a web part in this web part we can simply rely on the context object of SharePoint framework and we can use the Microsoft graph client Factory this will provide us with the get client method which will give us back a client to consume micrograph what is interesting to notice is that from this object we can then get an instance of a client that we can use to consume micrograph without taking care of all of the complexity under the cover of retreating the access token and doing all the stuff we just saw in Postman in a SharePoint framework we simply have all of the planning well hidden under the cover and we can simply focus on what we want to do just for the sake of completeness we also rely on the Azure active directory token provider AED token provider Factory object still available in the context of SharePoint framework to get a token provider and to use it to get a token for micrograph this functionality will allow us to get the access token that we can use to consume micrograph just for the sake of showing you what we get back then I'm going to initialize and use a react component that I created which will accept the graph client and the access token as the input argument this is my react component and in the react component on component bitmount I will simply load some data from Microsoft graph so here what I'm doing is if I have the graph client in the properties of my react component I simply use the client with a fluent API which is available in SharePoint framework to say call the API called me slash me in micrograph and make an HTTP get to that API we can make a get we can make a post we can generally speaking Leverage The HTTP layer protocol to interact with Microsoft graph request will be done we can simply store in the state of our react component the user principle name of the currently connected user moreover in the render method we render the output of the request that we've just made as well as a button which will show the content of the access token retrieved in Microsoft SharePoint framework for consuming the Microsoft graph so this web part is already running in my browser so let me switch here and let me show you the web part in action I can refresh it you can already see that I see my user principal name right here in the web part this has been retrieved through micrograph by SharePoint framework and under the cover I have an access token if I will click on this button we can see in jot.ms the access token that SharePoint framework is using right now to consume Microsoft graph it is interesting to notice that again the access token has the audience for micrograph because we are using it to consume extra graph we have the client application that made the request for the access token and the client application is called SharePoint online client accessibility web application principle very long name but at the very end it is an application registered in every microsd5 tenant which is shared across all of the SharePoint framework Solutions running in every tenant and through this application SharePoint framework is making craft requests to Microsoft graph here we can see the permission Scopes that I have for this application and we can see that we have plenty of permission Scopes registered and which can be configured by developers in the package.solution.json file using the web API permission request section here every developer in every solution can declare what kind of permissions will be needed by the application to consume eventually consumed micrograph and whenever you will do that and then you will package Your solution and deploy the solution in the app catalog of a Target tenant a tenant administrator will be allowed to Grant the requested permissions you see will API permission requests so in your solution you make a request for one or more permissions and then a tenant admin who will install Your solution in the Target tenant will eventually allow those permissions to your application and when it will happen then under recover the SharePoint framework planning will retrieve the access token for you and we make it available to your code so that in your webpart implementation you will simply need to say graph client Ms graph client so you will need to use an instance of the object retrieved through this method and you will be able to consume micrograph the same logic applies also to third-party apis but right now in this video I want to focus on consuming Microsoft graph here you can find additional links to dig into the topics covered and like always thank you for watching this video foreign

Channel: Microsoft Community Learning

Views: 3,286

Keywords: SharePoint, PnP, Dev, community, open-source, Microsoft, Teams, Power, Platform, Graph, Microsoft 365, Modernize, upgrade, transform, classic, extensibility, add-ins, apps, SPFx, SharePoint Framework, Azure, AD, ACS, Azure Access Control Service

Id: 3u1ei8hcGG8

Length: 16min 19sec (979 seconds)

Published: Thu Mar 30 2023