Microsoft 365 Community SharePoint, 11 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using a web part to control which Sites have been grated permissions in Azure AD application

Description

During this 10-minute Developer-focused demo, Fredrik Thorild explains how the Sites Selected Admin SPFx web part enables Site Collection Admins to check which in scope apps have been added to a SharePoint site, to list Azure AD registered apps using Microsoft Graph API scope, and to add SharePoint sites to the Azure AD listed Apps. Uses functional components to granularly control apps accessing their SharePoint sites using Microsoft Graph APIs. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 11, 2021.

Demo Presenter: Fredrik Thorild (Sogeti) | @taxonomythorild

Supporting materials:
• Blog - Controlling app access on a specific SharePoint site collections is now available in Microsoft Graph | https://developer.microsoft.com/en-us/graph/blogs/controlling-app-access-on-specific-sharepoint-site-collections/
• Repo - Sites Selected Admin client-side web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-sites-selected-admin
• Documentation - Permission resource type | https://docs.microsoft.com/en-us/graph/api/resources/permission?view=graph-rest-1.0
• Video – Requesting API Permissions in Azure | https://www.youtube.com/watch?v=wcJRQDsXMQ8&list=PLWZJrkeLOrbYJEr_LoIJ7-1Goy09XJzha

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Today, I will demo my site selected admin web part, not so much code, demo necessarily but focus on on functionality. A little bit about myself.

A

Live in sweden, festivals, work for social tea. I guess I am one of those seasoned sharepoint developers. I've done my fair share of farm solutions and and so on and so forth and still loving it. I'm also recently up to contributing to to the various projects and great fun doing that. So I'm happy to be on that track. uh My twitter details linkedin details in there uh uh happy to spend time with my family and so on and so forth.

A

uh So a little bit of context, then I guess for uh the reason on why I built this. uh I was very happy. I guess a lot of you were as well when they announced uh on february 11th. I I believe exactly one month ago that now they will support a specific sharepoint site access via the graph. So, basically in in the past, it has been accessing sharepoint by the graph you you need to give sort of full access or no access at all. So so this this was a very much appreciated uh addition.

A

um So I was really really happy about that um and well actually we can. We can stay over here because uh one of the facts stated in this blog post was that initially you need to to actually use another ad app to to grant the access, and you need to do that sort of from from a developer's perspective, uh which makes sense. I mean this is an early release, so hopefully it will come with an ui capability where you can manage your sites, but not yet.

A

So I saw this tweet, which kind of triggered me like uh he felt kind of the same way as I. I guess that it's a he says that I just wish it didn't, require developer support uh and I got thinking like hey. Maybe we can build this uh via an spfx web part. So that's kind of the the background. I guess uh and I mean given the fact that it's really easy to to access the graph by ispfx.

A

So so that's sort of the background. So with that said, let me do some demo, um so I'm gonna open up my browser again and we can go over here to the azure ad. I do have an app registration which is called selected for this purpose.

A

You can see that I have added on the site selected api permission thing here. I should also say it is in preview so on. Let me switch over to visual studio. There we go uh so I have an console application in here uh where I am using that app registration called selected and I'm going to try to get some data from a site uh called foe. uh Surprise surprise, um so uh I haven't done any configuration.

A

So the expected outcome here is that I don't have any access, because again I only have the site selected permission granted which doesn't give you any access per default. So let's press f5, you can minimize that and you can see that the http code was forbidden. So that's where my web part comes in. I guess so back over here and to my tenant and here's. My web part installed on page.

A

So I'm going to talk a little bit more about it in detail, but first, let's go ahead with my sort of scenario that I have going on. uh So I'm gonna quickly move over to this tab, add remove sites to apps, and you can see that here I have some azure ad apps uh listed and I do have my specific app listed as well selected.

A

So I'm going to highlight that add app permission, I'm going to copy this very url to this site, because this is the site that I want to connect to via the graph pasting in that one. Let's go with read that should be enough, so I'm going to grant that access, yay success.

A

And now, if you go back over here, we should expect well not forbid and more of a 200 status code. F5.

A

And we do have a okay answer back from that one.

A

So that's that's kind of the the main purpose of the web part I I would say, but again I'll show you some of the details uh for it as well. uh We can actually go into edit mode, and I I'll show you one of the key things uh in here.

A

uh If I go to edit, uh you can see that there is a grid, it's actually shipped with my web part, because this one is sort of the the identity of uh this uh sort of the site, selected application scope uh thing. uh I have double checked that that was the same grid in at least another tenant than this one. So I guess that this is the same for for for all the tenants. However, if that is not the case, I made it in yeah, so you can change it.

A

The web part does have this sort of welcome page says a little bit of what it can do and so on good to know a little bit of that, you can hide that nothing fancy and then, let's just republish.

A

So the list of apps in here is actually only apps that has the site selected scope on it, so you can see if I go back into.

A

Here, well maybe one step further. I do have some other apps registered. So when the when the web part starts up, it actually fetches a list of more or less all apps, and then it filters on only apps that that has the site selected scope on it.

A

And uh after that you can go ahead and highlight the app and when you do, you get two options up up here you can add app permissions or you can go ahead and clear up permissions uh and, as you could see, when I did the demo, you need to enter url to the site because it not doesn't necessarily have to be this site.

A

Obviously you can enter in which, whichever site you want and then you just go ahead and press grant and similarly, if you want to revoke access for some reason, you can go ahead and do that as well. So again same concept, you just you like this click remove and hopefully it will be green like it was there there, and you can then also flip over to this tab where you can enter in a site and you can get back the current permissions on that site. So I was a bit lazy in here.

A

I actually just pasted the json object, but I do have a specific reason for that, as well. uh So just an empty array here. So, let's uh I guess I removed a few apps. We can go ahead and add this down.

A

So now we have read access. No, I don't want to clear. I want to check so like so so I I paste kind of the object that you get back from from the graphic api.

A

uh So I guess when you look at the at the documentation, uh it says when you go ahead and click get site permission.

A

uh It says that you should give back what kind of role that you have at the moment, but I I don't see that I get that at the moment, uh but that is kind of one of the reasons that I I just had the pure json message coming back uh so that would have been nice. I guess to see what kind of access this app currently has to to this site, uh maybe something that comes later um right. uh So I guess that is it for for the web part as such.

A

Like I said, I will not jump into that much of code, but somewhere I should have yeah here we go so fairly, simple setup. I mean not as impressive function wise as the previous presenters is it's more like a it solves, a cool problem I think. But, as hugo mentioned, I just did an update to the the project going from class components to function, components, uh I'm not a huge react guy, but but it does, it is nice that you don't have to to type this all over the place.

A

So so that's that's nice, but I still do have a lot to learn on the react side, uh but I think actually that I'm gonna cut it for for for now uh again focus on functionality, uh but you can find the code obviously over in in github.

A

So thank you for listening. Thank you very much for those demos.