Microsoft 365 Community Community Demos, 6 Aug 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Use Microsoft Graph to hide or show SPFx extension based on user attributes

Description

This community call demo is taken from the SharePoint Framework community call recording on 1st of August 2019. In this video, Velin Georgiev (Pramerica) shows how to build SharePoint Framework application customizer, which is dynamically visible only for internal people.

Code is using Microsoft Graph to identify if the user is an external or not. Microsoft Graph usage with the SharePoint Framework solutions is quite simple and can easily add significantly additional value for your design.

Presenter - Velin Georgiev (Pramerica) - @VelinGeorgiev

Code sample used in the video is available from https://github.com/SharePoint/sp-dev-fx-extensions/blob/master/samples/react-hidefrom-externalusers/

More on using Microsoft Graph with SharePoint Framework is available from https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-1st-of-august-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Let me just show you how it works is based on a business scenario, and then we can go through the code and see how it's been done. Like recently, we had.

A

We had an ask too, because we have a customizer that is behaving like a navigation bar on top. That's not the real customizer, that's just a sample, but we had so many internal links in our intranet that inviting a guest user. Whenever guest user clicks on those internal links, he will go nowhere because he's not part of Internet, so they asked there was to just hide the whole cups customizer, because any external user will not be able to interact with links like those.

A

And what you can see here is my customizer is over here where I'm pointing with the mouse, and it has just two rulings. So that's a sample from the PMP samples it's already contributed, but it is very simple. This is it but from what we can see here, I'm logged in with my tenant account and I'm part of that tenant and here on on the right side.

A

I'm logged in with my gmail account so so unprofessional, but to show you that I'm external user to the very same site, then I'm not seeing the customizer here, so external users will not see it. Internal users will see it and it will contain some information from them. It's pretty. The code is not much so I'm serving it from my local bench, but I will show you the code there. So in general, the way to identify whether user is external is to use a Microsoft graph.

A

So in the Microsoft graph we can retrieve the details about the user and in those details there is something that's called user user principal name and in that user principal name key. There is a value that contains the email, some additional chapters and, along with all the additional charges there is something called EXT. So let me try to zoom it, so this limit a little bit little less. So all my customizer is doing is calling the graph when it loads. So this is the web part here.

A

This is the the up customizer here, and this is the starting point of the up customizer and only neat when the up customizer starts loading on a bit before it starts loading and rendering any kind of izybelle on the page I'm using the MS graph client to execute a query against the graph and grab details about the current user. So I'm accessing that me endpoint to grab the details and in those details is the user principal name here.

A

The user principal name contains that extension in case it's an external user, and if we find that that piece of text within the user principle, we just don't render the web part. So what I'm? Here? What I'm saying here is? Yes, if this is an external user resolved that only need and just don't continue for their own and what it happens. Is we return here and we never show the customizer that is supposed to render here.

A

The rest of the code is not very excited that the excited parties I'm using the graph client. So if you're not familiar with the graph client, this is a building functionality of the SharePoint framework that we can utilize to call the graph the Microsoft graph and get information from there.

A

But before we can call anything related to the graph, as you can see, I can call it from the context of of the application, customizer so doc context, and then you have the graph here just for your information and then before we can call the graph even that we have to grant permissions so that can that customizer will be allowed to act. Data and and get data from the graph.

A

So another highlight here is: if I go to the package solution, we will see additional property here that says web api permissions request, so that basically means that application customizer is allowed to access the graph and read user's data so that being in the package is not enough. Whenever we publish we package everything and deploy it to an app catalog, then we have to approve those permissions. As we can see, it says permissions requests, it's not permissions granted.

A

So once the package is being deployed, there is another additional step that has to be done for the graph and it's that's in the admin. Let me just go to the admin panel very quickly to show you where those where this has to be approved. So admin like that, and then we go to SharePoint.

A

A

Joe and then you so it definitely is not available in the classic screens on the classic screen. So you have to go to the new screens and go to the API management and in case that's not being approved. I already have approved it. So, under the approved categories, Microsoft graph used a read. So that means that my application, we're working. It will elbow to access the graph. But in your case, if that's never been done, it will be here in the pending. Just some highlights and more on how you can get started.

A

We Microsoft graph I think I have a video on the getting started series here. So that's a video from Paulo that is explaining in more details how you can do that and I'll just paste it here in the chat, but in general, the highlight of this demo was to show you how you can hide something from external users and- and basically this is the most important piece of my web part or of my application customizer. This is application customizer, but the same approach can be taken for a web part.

A

In case you just want to hide a web part instead of an extension on the page, so the co is exactly the same. The search is exactly the same and we say we went there or we don't render based on.

B

A

You're, guest user or you're not but I, think that's all for me that I have nothing more to say here is just a very simple sample. Islam.

B

Yeah, it may be is a simple sample, but is definitely valuable scenario villain, because everyone I would ask uses external users and being able to indeed to have your customization rather being web powered I. Guess the application customizes being kind of aware of the context of the user, makes a ton of sense and example that you just show it really clearly explains how to do it so yeah pretty good. Thank you, yeah. Thank you.