Microsoft 365 Community Transform SharePoint Add-in model solutions to modern development patterns, 30 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Understanding Azure Active Directory and OAuth models with SharePoint solutions

Description

This module introduces you to Azure Active Directory and OAuth 2.0 to manage authentication and authorization when consuming Microsoft Graph or third party APIs in SharePoint Online modern solutions built with SharePoint Framework. You will also learn what a Delegated Access Token is and how to use it to consume external APIs.

This video is part of a series in a playlist about "Transform SharePoint Add-in model solutions to modern development pattern": https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe

➡️ Next video on this series - https://www.youtube.com/watch?v=jNKX6qos8ZI&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=9
⬅️ Previous video on this series - https://www.youtube.com/watch?v=q-FolBYQDMM&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=7

#Microsoft365 #AzureAD #MicrosoftGraph #OAuth #AccessToken #DelegatedPermissions #SharePointOnline

In this video, you will learn about

- Understanding Azure Active Directory and OAuth 2.0
- Managing Access Tokens and permissions
- Consuming Microsoft Graph or third party APIs from within SharePoint Framework

📖 All guidance content including code samples can be found here: http://aka.ms/sp/add-in/modernize/samples

✨ Presenter
• Paolo Pialorsi (PiaSys.com)

📃 Agenda
0:00 Introduction
1:30 Demo
2:22 Configuring delegated permissions
3:54 Configuring application permissions
4:57 Retrieving an Access Token with OAuth 2.0
10:35 Consuming APIs securely in SharePoint Framework

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Connect to Azure AD-secured APIs in SharePoint Framework solutions - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient
• Isolated web parts - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/isolated-web-parts
• Overview of the Microsoft Authentication Library (MSAL) - https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-overview
• Microsoft Identity Web authentication library - https://learn.microsoft.com/en-us/azure/active-directory/develop/microsoft-identity-web

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

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.

A

So you will need to use an instance of the object retrieved through this method and you will be able to consume micrograph.

A

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.