Microsoft 365 Community PnP Webcasts, 5 Mar 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Using MSGraphClient within SharePoint Framework

Description

In this webcast we concentrate on how to use Microsoft Graph from SharePoint Framework with the updates introduced with v1.4.1 release. At the time of the recording, this capability is still in preview but demonstrates how you can request additional scopes to be available for SPFx when you are calling Microsoft Graph APIs.

Exact details on covered topics from http://dev.office.com/blogs.

A

B

To the SharePoint panel practices webcast on system, we're looking into how to use the Microsoft craft client to connect to Microsoft card from SharePoint framework, and this is a class which is available from you for you to use in your SharePoint framework to kind of easily access the information from a Microsoft graph. An AP is my name is da, so you want an I'm.

B

A Senior Program Manager from SharePoint engineering and with me today is waldek responsible of the demo and obviously participating on a discussion so one that could only do the quick intros as well of.

A

Course, hi everybody, my name is Val Amos, because I am product and a rancor and I am also an office development. Mvp.

B

Excellent Thank, You Waldeck, so the much of crap client is something which is available like that from a SharePoint framework to easily access the rest api of Microsoft craft. Now in the SharePoint framework or in the SharePoint Online. We can't really give immediate access to all of the Microsoft graph scopes without the tenant administrative approval. So there are certain things what you need to consider when you are implementing your customizations or solution with the Microsoft graph and we'll walk through these steps and we'll demonstrate this in practice as well.

B

So you know what has to happen so how do I actually use the Microsoft cloud client within the SharePoint framework solution? So all those we will write the code first, which is using the myself grant client to access the graph API and, in this case, basically adding, for example, accessing your let's say, events or calendars or printer events or emails, for example. Underneath your profile now to be able to access that information, you, your solution, needs to access request permissions to access those scopes.

B

So when we are running in the context of sharepoint online, you do not have access on all of the Microsoft graph as scopes of the particular user, because that would be kind of a violation on the security or potential violation on security. So we want to have this additional control for tenant administrators. So you as a developer, you define what are the needed scopes. What are the the permissions are. What are the endpoints in a crafts? Ap is: what's your hitting in the packets solution?

B

Json file, whenever you are then uploading or the tenet administrator or the App Catalog manager, is uploading. The SP pkg file, essentially the solution file to the App Catalog, the there will be then a UI which is telling hey. This solution does require additional permissions to be approved, so it contains additional permission. Considerations and those permissions can be then approved by using the SharePoint Online Management cell, basically SharePoint Online admin, a PowerShell or the modern admin UI.

B

So you can actually see, then what are the pending requests for additional scopes in a Microsoft graph for additional permissions for third party API is because the UI's are exactly the same for those things, but in this case let's concentrate on the craft. There is also community through an office 365 CLI, which can be used for managing these permissions and these requests in a tenon. Now, whenever the administrator has then approved permissions these permissions, then your code can actually hit those endpoints and it will get the access tokens to hit the additional REST API.

B

And then you can confirm basically that everything is working. Fine did I miss anything while they con this one. No.

A

Excellent, let's.

B

Cool, so now the considerations around this when we are using the Microsoft craft client, so there is no pre approved permission scopes for Microsoft craft client. So if you start from a clean tenant under you, haven't actually retract granted any permissions as the tenon administrator or nobody has requested any additional permissions before there is no permissions for Microsoft graph line. There's none! So you don't actually have a basic set off and there's no default set of permissions or scopes to be available.

B

So you will need to have a tenant administration permission to approve additional scopes, and this is pretty high permissions. But again this really comes down on the fact that the random code- well, it's not a random code. A sharepoint framework solution need to be controlled on the api's and information what it can access. So you need to have that administrative, a mission to grant additional access on this api's.

B

Now, whenever you are creating these permissions using the powershell or using the admin UI or using the office 365, see a line. It's really important to realize that when you crank the permissions to Microsoft grant client, it actually applies. All of the scripts running in that inner, so any sharepoint framework solution which is running in that tenant is getting the same permissions as well. So if you have another solution which is getting in which is not requesting those permissions, but it's using the Microsoft graph client and hitting those endpoint, it will actually work.

B

So this is not granting solution permission it's around Crandon in a tenant level. What are the scopes in Microsoft graph, which is valid to be used in SharePoint framework solution? Super super important thing to remember, and also the final thing at the time of this webcast is recorded. This is still in preview, so it is subject to change. So if you see some changes on the on the demo or in the material comparing to the written material and this video, that is because it was still in preview when this webcast was recorded.

B

Anything what I'm missing here well, I.

A

Would stress one more thing: the important part that permissions that your request inside a package are not a manifest in the same way, permissions requests that are in, for example, and Adhan right. So, if you think about an add-in, Adam can only perform operations requested in permissions right to here. The request does not relate to code in any way you can request one set and you can perform other operations, so they are disconnected and the permissions you request do not constrain the code. You actually run in production.

A

So that's important part for you to keep in mind that permission requests do not constrain the code. You actually run.

B

Absolutely absolutely and welcome, will absolutely have another, let's say more deep times session around. What does that mean from a tenant admin perspective? So you'll understand the details behind of it in this one we really wanted to concentrate on how get started on the on the using the Microsoft graph and not spend too much time on on dwelling on, let's say, administrative or covenants details book will come up with another one on that one now, so how do we actually use the Microsoft graph clients in practice? So let's have a live demo from wallet computer.

B

So how do we use the myself clients to gain access on in quotes additional Microsoft craft scopes in a shipment framework solutions? So how good I do use this thing in practice? What is the administrative operations to be performed and how does the code? How can we verify that the code is working properly? So, let's jump to the demo and we'll come up back on the slides I want the demo is completed all.

A

Right so, let's have a look, how you can use the MS Graf client in code. First thing you have to do, is you have to import it in project? So that's the line here. We import the MS Graf clients from at Microsoft, slash SP, client preview and, as you can see, it is still in preview when we now record it, but when you watch it at BAM, I have changed so always check double check the dogs. What is the exact package name where it's you load it from?

A

That gives you the access to the client and it's types, but then actually to load the instance. You load it from a service scope within the context of web part or our extensions you're working with, and so in other words that's been already or there is already instance of the graft client available for you to use, and you don't need to create one by yourself to access it. You have to use the MS Graf, client dot, says service key, which instructs framework which service to load from the available scope.

A

So you so so using that this key it will know what to give you back once you have the client. You can basically use the fluent API of of the my so graphic as UK that that is here to call out the API and the endpoint you want to use in our case will try to load my events. So that's why we call me events and at that point we issue a get call and then use a promise to data right.

A

So so, at that point, when you have the client, that's basically working with the Microsoft graph SDK and that's basically it from the code point of of of of you.

B

Super super super super clear, the mid last events: it's not available by default in any of the let's say for.

A

B

To access token altercations, so by default that, if you try to use this without granting any permissions, you would get an exception right.

A

Yes, it would fail so so easily. You will get unauthorized right because you wouldn't get a token for this and you would not be able to access this info yeah, so you'll be a so disco will only work if the tenant on which you run it has approved access to two through calendars using the Microsoft graph.

A

Yes- and this is actually a nice segue to our next part, because when you build this code, you also have to request permissions to access it, and you can do it through the package so solution, JSON file in there there's a separate property that that that you use named Web API, prepare perm.

A

Permission requests and in there you have an array of requests or off of basically perm perm missions that your solutions, your solution, needs. So, for example, here you can see that we request access to Microsoft graph calendars read. You could also add things like another one. Imagine that you need to have access to emails, so you would say mail read, write and so on. So in here you, you basically list permissions that your solutions need to have access to in order for it to work right once this is in place.

A

The last step left is to actually build solution package it the deploy it to SharePoint and in there approve the request. So let's do that? Let's open the terminal- and here we'll call golf bundle, ship and golf package solution ship at once, so we'll do it in one step will instruct golf to build build the project builder code package, it the one go and that will give us a SP pkg file that we can then deploy to SharePoint alright. So this is done.

A

Let's switch to our site, which is here- and this is the catalog and here is also our app so now, let's deploy this SP pkg to catalogue, basically a drag and drop. Let's move that aside and here are important part. So, first of all, we can choose what I want to deploy it globally or not.

A

If you, which is the part here, but then important part, is here so this text here this string here, instructs us that this solution has permission, requests in it, so tenant admin deploying it can actually see what additional permissions that solution needs and can then decide either to to approve them or not, and and this can be done through the tenant admin page. So let's deploy it and then, if we switch here, you want me to go from from the start on this one to show how it works.

A

Where's, I, sir yeah, this yeah yeah, absolutely yeah.

A

So first this is the the page --you'll, and so here we go to the tent admin side and in here there's the link to the new preview on new UI and from here there's the link named api, metonym management, and in here you can see now a new request for additional access to graph and, as you can see, by default, there is nothing approved here first right, so if we would first try to run run the web part that we've built, it wouldn't work right because no permissions have been assigned yet so here.

A

Well now we have a request: we can select it and then we approve or reject, and to do this you have to be tenant admin, because that applies to every single script in your tenant, which is why it's important right, which is why you actually has to be 10 admin, and that also is being also pulled out out here right, so all apps, custom, scripts and web parts in all size, 5 collections across the whole tenant will have access to this scope. So we approve.

B

It and that's a super super super super important thing to now realize right, correct it's not about solution, approving permissions for specific solution. It's about approving permissions for all of the SharePoint frame reservations. Yes,.

A

Correct all right, so with that approved, we can now switch to the workbench and in here let me reload it yeah, but first let me start it actually debugging it. Hopefully that's a good reminder: hahaha good serve no browser. Actually, we have deployed it, so we would not need to to run it. Gulp serve no server.

B

Serve yeah typical type of what I do all the time as well. Yeah.

A

All right, so this is available here we go back to our browser. It's right.

B

A

Refresh correct and now we'll be able to see it, let's switch to the networks have in here, move it up and down a bit, and here we look for events, so we build our web parts called called my events and that will use the Microsoft graph to load events from I calendar and in here we can already see that there's a call to the Microsoft graph, so graph dot. Welcome.

A

If you want to know me, events and the the events, that's exactly the call that we had in our code and if we open that, we can see already that it's been a 200, ok call, so it is approved. It is correct, and in here we can see all of the events that I have in calendar. So this works because tenant admin granted permissions for scripts and webparts to access the Microsoft graph calendars or yes to access my cell graph calendars. Yes, yep.

B

And and now the tenant administrator has a permissions and they can manage the the the Krantz afterwards as well. So if needed in attachments, traitor can go using UI or power shell or the office365 zeolite, and removes that permission, which would mean that this webpart would then no longer work. So you can manage those groups as well anytime. We want that's, neither correct cool, so I think that's it for this demo, anything what we were planning to still go slightly read it I. Think.

A

That's oh yeah,.

B

Yes, excellent, so thank you wallet for this one. Let's flip back on the slides and close up the webcast excellent. Thank you ball deck one more time on the demo, so that was really a kind of a simple and and simplistic walkthrough on. How can we use to Microsoft craft clients and what is the process of granting additional scopes and additional permissions for the for these custom applications in your office recess, 510 on and like said before, the demo as well will will.

B

We will definitely release additional documentation and guidance and considerations for the governance side of the story, and what does it mean in practice and this one we wanted to really concentrate on. How do what is the basic setup of getting started and what is the basic flow of granting additional permissions? Anything? What we're missing here and what you would like to reiterate. Waldek.

A

Absolutely not I would encourage everybody to give it a try, and let us know what you think. Would it be a thing that you can use in your solution or is there anything that's missing. And/Or should be changed absolutely.

B

Absolutely please keep on the feedback coming regardless when you are watching the video. If the capability is already 8 or not, please keep the feedback coming using our social media and github channel. So we Microsoft in a shipment engineering will know what needs to be adjusted to further hit your requirements and further make sure that you'll be happy on implementing stuff on top of the SharePoint. And what do you need on top of the SharePoint? But thank you everybody for watching.

B

Thank you for your participation and your feedback already advanced will come up with a new webcast sooner or later. Thank you.