Microsoft 365 Community Getting started with SharePoint Framework - Training videos, 17 Jan 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Training - Leverage the Microsoft Graph & 3rd Party APIs

Description

This module will introduce you to utilizing external APIs in your SharePoint Framework projects. This includes accessing anonymous external APIs, Microsoft Graph APIs or custom 3rd party APIs secured with Azure Active Directory.

The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-getting-started.

More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.

You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!

A

Hi in this module, we're gonna see how we can leverage data from third-party REST API s and SharePoint framework components. We're going to look at a couple different ways. We can do this and then we're gonna look at first. What is involved in consuming REST API is in the SharePoint framework. We're gonna see how we can first do that in this first section, when these api's do not live in sharepoint and they're anonymous so like say, a third party rest api by some third party. We're look at that.

A

First, in the second section, we're gonna see how we can leverage the azure ad client and calling services that are secured with Azure ad and understand how that works, and then the third section we'll take a look at how we can call the Microsoft graph, which is a secured service in Azure by the azure, my Azure ad, and it is available inside my tenant. But it's also we're also going to use it to see how we can use the the graph client from the graph team to make our lives a little bit easier.

A

But first we're gonna start with calling REST API is with the SharePoint framework anonymously. Now a common requirement that we have in a SharePoint framework component or a project is to display or interact with data external to the to the web part. This could be data in a SharePoint list in library or data, that's accessible via the Microsoft graph or that's accessible via external third party API s that are either anonymous or secured. Now the SharePoint framework provides api's for all these different situations.

A

When you need to work with data in data sources external to the web part, we have really four different scenarios here. I've got three listed, but it's really four different scenarios. You've got the HTTP client, which is great for calling third-party REST API s, and that's gonna cover things like if you have a third party API that lives, that is, that is either anonymous or is secured. So that's gonna be great for for those situations.

A

The second option that we have is that I don't have listed here, but we cover in another module and the SharePoint content module is the SP, HTTP client and that's gonna, be derived from the HTTP client, but he's gonna have some additional logic in him and some little wrapper to them.

A

That understands how to call the SharePoint REST API and making our life a little bit easier so that we don't have to worry about calling things like the handling things like changing from OData v3 to v4 and what kind of metadata we want to get back. But what? If we want to call a web service that happens to be secured with Azure ad? Well, we have this additional client called the aad HTTP client, and this is great because this is gonna be able to leverage some existing infrastructure that Microsoft has provided in SharePoint Online.

A

That's going to make it easier for us to call these services that are secured with Azure ad we're going to look at that in the second section of this module, and then the third option that we have there I have it listed, as the second is the MS Graf client- and this is gonna- be great for calling the Microsoft graph REST API.

A

Now it's using the same infrastructure to get the token that we need to call the graph that the aad HTTP client is requesting, but as you'll see when we get to the third section of this, of this module, you're gonna use a different style of accessing or making those calls and we're gonna be using the SDK that is provided by the Microsoft graph team for a JavaScript or client-side implementations. Now most of these different scenarios require no extra clients or libraries. We have everything that we need now we're gonna.

A

First focus on calling third party API is with that are anonymous with the HTTP client now, provided that we are. This is provided to us on the current SharePoint context and you can get to it by going to a SharePoint context and then saying HTTP client, and this is optimized for REST API s and it leverages the underlying fetch API, which is a standards-based way that all the or most browsers have implemented on making HTTP requests. You can think of it as like the core, like jquery ajax method.

A

It's a way for us to do HTTP requests in the browser. It's fully configurable. We can have full. We can override any of the HTTP headers and the payload. If we need to now. There are some browsers that have not implemented this, such as ie and edge. But in those cases we have a polyfill that is included for us by the SharePoint framework on all of our projects, called the what WG fetch and that's going to implement the fetch API for us.

A

So we can just assume that it's going to be available for us you're going to use this to call anonymous, REST API s and you can even use it to call secured rust api's. But if those api's are secured with Azure ad you're gonna see in the next section and we've got some stuff, that's gonna make life a little bit easier.

A

But let's say, for example, you were going to call some third-party web service that was secured using a token in the query string or if they had a different way, a different style of authentication, or they were using an additional provider ooofff provider. To obtain your tokens other than Azure ad. You could use any of those things now you're gonna base. The base HTTP API in is what is to use this HP client is what's used by most of the other clients.

A

The SharePoint client and the aad HP client are both using this as their underlying infrastructure. So you want to call an anonymous REST API. How are you gonna? Do it? Well, it's really straightforward: you're, gonna import, the HTTP client and the client response objects from the SP HTTP package and then you're gonna issue a get request, so you're gonna, say HTTP, client, dot, get and there's three parameters that you can pass in to a required and one is optional.

A

The first one is the endpoint that you want to go query and the second one is a list of configurations, and by default the configurations are pretty basic. That's the only option that you can specify in there. You can always create your own configuration and pass it in, but for the most part, that configuration is is is what you're looking to use.

A

The third option is, if you need to override any headers or if you want to set the body things like that, the next thing you're going to do is you're going to get back a client response, and that response is going to give you access to the HTTP headers and the response object.

A

You may have, if there's any data that comes back in your response, which is we're gonna, be the case most of the time. If there's any data that comes back in the response, you're gonna want to use the JSON method to parse the byte array of the response as a JSON object and use that in your response, when you get that response, then you can do whatever you want with it.

A

As you can see there at the very bottom, so let's take a look at a demo on how we can call an anonymous third-party REST API, we're gonna call a very open service that supports cores, which is gonna, allow us to do requests across domains. You do have to pay attention to course, requirements by the service that you're calling, because if the service doesn't support cores, then you can't make cross-domain calls across that service.

A

So that's just something you're gonna want to pay attention to, but let's dive in, let's look at a service that does support course.

A

In this section, we're gonna look at a demo on how we can use the HTTP client, that is part of the SharePoint REST API or the SharePoint SPF X API that we can use in order to call a external third-party rest endpoint. That is not. That is not authenticated.

A

That is an anonymous endpoint, so here I'm calling a NASA public imagery web service and I'm going to show an image of the first image that comes back when I do a search for Apollo 4, and so you can just see some information here that I'm writing out. So let's look at the code for this.

A

So when I look at the code for this, if I go down into the web parts, this is a react control. So all I'm doing here is I'm passing in a Apollo mission. To this react control and this react control is going to end up rendering it out by showing the image it's gonna show the title of the image. Some keywords as well: we're not really interested so much in the react piece to this we're more interested in how we're actually using this HTTP client object.

A

Right here, so in this case here you can see I'm, referencing, the HTTP client and the HTTP client response from the SP HTTP client, and so, if I scroll down here, you'll see that, in my render method, I'm gonna check to see has this web part already been rendered one time and if it has then I'm, not gonna rear-end her I'm not gonna, rewrite this.

A

This stuff out, instead I'm just gonna skip it, but if it has not been rendered one time, then I am going to go through and render it until what I have to do is call this function. That gets an Apollo mission. It's gonna get back a promise and then it's gonna run the the then part of it is gonna. Add the react component to the page. So let's take a look and see how we're actually getting this data. This is really straightforward.

A

I'm gonna issue use the Kamakura context of the current SharePoint page I'm gonna, say this context: dot, HTTP, client dot get and I'm gonna pass it in two parameters. The first one is going to be the URL of the endpoint that I want to go to, and so in this case here, if I take this endpoint and if I just try and go to this endpoint in the browser, you'll see I'm just getting this big JSON object back.

A

It's a gigantic JSON object with a bunch of information in it, but once I get that once I do that I'm also going to pass over the configuration now there's a third parameter. I could use to pass over any additional header information that I want to set like header values, for the current like for any authentication, headers I would need if I was going to a custom service that I managed stuff like that, this I'm going to when I get the response back. The response is just gonna.

A

Come back to me is just a standard object. It's not gonna. If a response is in JSON, I need to parse that data as JSON. That's part of the fetch API, and so what I'm gonna do here is I'm gonna call response JSON, which is going to parse the response out as a JSON object and return that back to me. So here I've got that JSON response that I'm being that's being returned so here I can see the JSON response.

A

That is the actual object coming back from the the the NASA imagery webservice and if I scroll up and look here, you can see that here's that response that's being returned back, so I can see a response and I. Looking at the the data that got back I saw that there was a collection object which had a single thing that was in it and inside of that we had an items collection. That was an array and there were multiple items that came back.

A

I just went through and said: let's just this is focus on the first one that comes back, so you can see here's the image that's coming back, so I can actually click on that and show that there's the image we got and the title of the image, as well as any pictures that came back and I can even have a description with it as well, and you can see here in the code that I said go to the collection, object and the items collection and get the first one, and then I already showed you the react component showing us how we're rendering that out.

A

So this is a great way for you to go: get data from a third party web service that is not authenticated. That is a anonymous web service. It's a great way for you to go through and to get some information that way and integrate it into a SharePoint framework. Custom web part.

A

Okay in this section we're going to talk about calling third-party REST API, but we're gonna focus on those that are secured with Azure ad, and this is gonna get fairly complicated because it's very involved of some really cool infrastructure. That Microsoft has included in SharePoint Online that we can take advantage of so we're gonna, look at Azure ad and how we have protected resources and how they work and then how the SharePoint framework is gonna.

A

Allow us to call those we're gonna understand what permission requests are and then look at how we can take advantage of all this using the API aad HTTP client that we get in the SharePoint framework. Now, resources and Azure can be easily secured with Azure ad. You can easily go through with like an azure function and you can just basically just check a box. That's gonna, say I want to use Azure ad to secure this. You could always secure services that are that are not hosted in Azure with Azure ad.

A

It's just that if it's hosted with an azure, it's just a heck of a lot easier now this is gonna require you. This is gonna require the request to that endpoint when you, when you enable this to include a valid ooofff access token in the HTTP header of that request. It's gonna have to have an authorization header, and this is how a lot of existing services already are secured, like the SharePoint REST API, the graph API and the azure management REST API, just to name a handful.

A

So this is where I said that securing an azure function is really simple: you're gonna go into the azure function, application go into the platform features you select the authentication and authorization element from the networking tab, and then you can just turn it on by just flipping a switch and saying I want to go from off to on and that's gonna go through and set up our app service authentication.

A

Now, when you want to call secured azure ad secure resources from the SharePoint framework, there's a couple, let me explain how this is going to work when I look at a diagram of this in just a minute. So the way that this works is that, first of all, you need to understand that any when you make a request to a secured service from the client it you there's some limitations on what you can and can't do so.

A

I can't include the OAuth token inside of the code base for my web part, because that Olaf token is not tied to my application. It's just a or tied to that use of that application. Once I have an OAuth token, it's like currency, it's like it's like cash I can use it for anything that will accept that cash right. It doesn't matter how I got it. That's the big thing. Is it doesn't matter how you obtained it? One thing.

A

Another thing too, is that that token is only good for a certain amount of time, so once it expires, it's no longer valid. So that's one aspect to it. So I need to somehow get that token. Well, I can't include a username and password or an applications. Id and secret I can't include that in the web part, because then it's no longer secure, because once I provide that, then anybody could use it.

A

So the way that Microsoft did this, the only way to really secure this stuff is to do a server-side based authentication acquisition of that token, and so the way that this is done is that I, the SharePoint team has created a special or a special is just actually a regular Asher ad app, but they've created an azure ad application that we're going to grant permissions to to access a specific resource with a specific permission or permissions.

A

So the way that it's going to work, then, is that my my client side component is gonna, call a SharePoint, REST API. It's gonna request the from the SharePoint API that I need an access token to call this secured endpoint and what that's gonna do on the server side. Is that's gonna trigger SharePoint to go to Azure ad and say here's the app ID and secret for this special? As your ad application called the SharePoint Online Clym extensibility web application principle, it's a really big name.

A

I need to get the access token for this Azure ad app to make a call to this protected resource, and what Azure ad will do is it will say: I can see that that app, the SharePoint Online client extensibility at web app principle has been granted by your tenant administrator.

A

These permissions to that resource so I'll create a token for those scopes or permissions for that resource and give it back to you and then SharePoint will give that back to the SharePoint framework and I can then use that access token inside of my SharePoint framework component to call those different endpoints. Now a couple things keep in mind here. There is no way to tell who requested or what application requested, those that that access token. So there's no way to tell that you know web part a requested it and web part B did not.

A

So whenever you do this what's gonna happen is: is that it once this permission has been granted any application any any component? Any client-side component can request this access. Token, inside of can't request that cram across an access token using this mechanism, so it's not tied to your application. Okay, this that's very important to keep in mind is not tied to your application. These are two independent things: you've got the permission, grant and you've got the application code and they both rely or the application code relies on that grant has already been was already implemented.

A

So the way that this is going to work, the way that this will work is that you will have to grant the permission when you deploy the application you then are going to have to or the SharePoint framework component you're gonna have to grant that permission to that to the tenant you're, not granting it to the app and then that grant is valid until it's revoked. So if you uninstall the application, the permission is still there and you could still use it.

A

The grant is not directly linked to the solution, so solution installation is not linked to the permission, grant or rejection. What that means is you should probably in your code, assume that the grant has not been approved, so you want to have some air trapping code in there that's going to handle when you get a an error that comes back.

A

So a this special app must be granted these permissions. How are you going to grant those permissions? These permissions are going to be defined within a solution manifest file. So there's three different ways: you can do it through the solution manifest file, so you can do it. Declaratively and I'll show you what that looks like in just a just an exam oment. The other option is to do it using PowerShell or using the office 365 CLI. So you can see all these different options available on this link that you see there on the page.

A

So if you want to do it declaratively the way you do that is that you go into the package solution. Json file and you're gonna, add in a new section called the Web API permission requests and that's gonna have a collection of objects. Each object has a resource. So where do you want to post this and a scope and the scope is is going to be, is going to define where the data is gonna end up going we're gonna define like what the permission that you're that you're granting that's being granted.

A

So when you package up your solution, you deploy it you're going to get prompted for that request. So before we do that, let's understand how this whole thing works. So at the bottom here you can see. Here's my tenant administrator and what he's gonna do ahead of time is he's gonna, deploy the solution to the tenant, app catalog, step, 1 or step 2.

A

They don't have to be done in any particular order, but what this, what this chart is showing is that what he has done is he has gone into my into my tenant and he has granted that SharePoint Online client, what a ad AB a specific permission on this in this resource and that was defined inside that either either using the package.json manifest file or it was defined using PowerShell or the office 365 CLI. Then my web part, when it wants to go call that Web API.

A

It is first going to use the SharePoint framework API to go to the server to say: I need to get an access token from Azure ad for this app. With this permission to that resource and Azure ad will validate that. That has actually been granted and when it has, it will return back an access token. That is then used to call that API. So what's the code look like for this?

A

Well you're gonna use the AAT, HTTP client, and everything really boils down to these first two lines here, so the client factory, what the client factory is going to do is that is going to create an instance of a ad client that you see down here.

A

That is gonna, be configured to call that endpoint you're gonna call get client and pass in one of two values: either the name of the resource or you're gonna pass in the URI of that resource, the either one of those things is gonna work here, because the URI is the unique like the unique ID of the thing that you're trying to talk to. So maybe it's graph, Microsoft comm or it's the SharePoint REST API or it's some other third party API that we're working with that's gonna.

A

Do that that git client is what's going to trigger all the stuff. You saw on the previous slide and give you back that azure ad client and then statement there, and so then a little bit farther down. You can see where I'm, showing a get request to that endpoint and jumped ahead of myself to that endpoint. With this configuration and I have again just like the other options.

A

You've seen at capacity in that third option, which is a request object what's special about this, though, is that a ad client has already been configured with the with the HTTP header authorization equals bear with the access token. So that's how the authentication is going to be handled for us right now when the administrator deploys the SharePoint framework component to the tenon App Catalog, he or she is going to get this extra little message at the bottom. If that component has the declarative permission included in it?

A

That says, you need to go to a special page in the tenant admin, but the ten administrators to go to a special page to enable this or disable this all right. So, while the application can be installed in the sites, it doesn't mean the permission has been granted. They're gonna have to go to this special page called API management in the sharepoint online admin center and they're gonna select the permission and then say I approve it and once that's done, then they can go through and get the data. Now.

A

I'm gonna show you a demo of this of doing this with the Microsoft graph and while in the third section, we're gonna see how it's even easier using the API. That Microsoft gives us for the Microsoft graph. I wanted to show it to you. First with the azure ad client, because I'm going to show you the manual way on how we're doing the authentication and it's gonna help us avoid having to deal with creating a custom service and securing it. We can just use an existing service, that's already been deployed and secure.

A

So let's take a look at that.

A

Now, in this second demo, we're gonna use the azure ad HTTP client to talk to a either a be secured web service. Now, in order to do this, we're gonna need a secured web service to talk to, and one of the easiest ones that we can find.

A

Is the Microsoft graph we're gonna see in the next demo how we can talk to the Microsoft graph in a little bit easier way, but I'd like to show it calling the Microsoft graph with the azure ad client, because you can see exactly what is required here in how the graph client is gonna, make things a little bit easier as well, but two different ways to talk to the exact same service.

A

So, let's first start by come over here and taking a look at the code for my project, so I have a web part and what this web part is going to do is it's gonna show some information from the Microsoft graph, so I'm gonna have some user items that are gonna, come back and we're gonna write those out to a react based component.

A

So if I look at this component here, it's gonna write out a list of some people, so you can see I'm looking at all the user items that come back for each user, I'm gonna write out the ID, the email and the display name of those people.

A

So if I come over here and look at the web part itself, I'm first going to using the same pattern that we used in the last demo, I'm gonna check to see, has this been rendered and if it has not that I'm gonna call get users and then write those users out. We can see that's the results that we're getting back here of these eye user items. So, let's see what this function does.

A

So what this function is going to do is I'm, first going to say this doc context and I'm gonna use the AAV, HTTP client factory to say: go create an instance of this, as your ad client now I'm, going to tell it that I need an HTTP client or an azure ad client for a specific resource and I can use this by name or I can use the URL of the endpoint I prefer to use the URL in this case here so I'm saying go to the Microsoft graph now under the under the coverage behind the scenes.

A

What's gonna happen is that the Microsoft graph or the azure ad client is going to call back sharepoint on the server side and say that the this tenant means an access token to call the Microsoft graph, and so, as I explained in the in the slides, what that's gonna do is that's going to trigger the SharePoint API server side. We don't see this happening, but what's gonna happen. Server side is that it's going to go to Azure ad and it's gonna request an access token.

A

On behalf of me, the current user has logged in for the azure ad application that was created by SharePoint for my specific tenant, and it says I need a token using this user ID and/or, this logged in user, and this in this app as Ray. The app I need a token for the Microsoft graph and using this endpoint, and what our IDs gonna do is it's gonna check to see. Has that application already been granted access to the Microsoft graph and if it has, it will turn around and give me back an access token.

A

That is good for all the permissions, otherwise known as scopes that have been that were granted to it. Okay, once that happens, the sharepoint framework is then gonna go return back to me and as your ad client that then I can use to call as your ad and/or a service. That's been secured with Azure ad, and so what I'll do is I'll say, create an endpoint.

A

That's gonna call the Microsoft graph, v1 endpoint the users in point and say give me the first ten users and just give me their ID, their display name and their mail address, and then here I'll say, go call you.

A

You should use that client to issue an HTTP GET and then it's gonna say to this endpoint with this configuration that's been set up, and the nice thing is is that the azure ad client is gonna automatically include the token in the authorization header and the HTTP authorization header, so that I don't have to go deal with, adding that additional information, I'm gonna get a response back just like the other HP clients, I'm gonna parse out the JSON and then hand that back to the caller, which is under get users.

A

That's the part of my calling get users. That's the part right here. That's gonna use that to add those to my react component now. How do we play with this? How do we actually use this? Well. I can't just run this with like a gulp, serve and see this run, because I have to deploy this to trigger the request. The permission requests to get to happen now.

A

I talked about the slides, how you can define this either using PowerShell or using the office 365 CLI and in my project what I did is: I created a Web API permission for the Microsoft graph for the scope of user dot, read basic dot. All so I went ahead and saved a little bit of time. I went in and I already ran, gulp build gulp, sir gulp bundle with the ship flag and gulp package solution with the ship flag, and what that gave me is inside the SharePoint. Folder I have this SharePoint package.

A

So let's go over to the browser and let's deploy this. So if I go to my app catalog for my site, let's go ahead and upload this and I will find that in my list of downloads here.

A

Here we go so I will upload this and what we're gonna see is it's gonna prompt me to say, deploy, but also notice that it says please go to the Service principal permissions management page, because I'm gonna have to approve the permission of the Microsoft graph of read user dot, REE basic at all, so I'll say: go ahead and deploy it and so it'll get deployed just scroll over here and make sure there are no errors.

A

Everything's been deployed so we're in good shape, and now, let's come over here to our our admin site for our sharepoint online tenant. So I have to go to the api page, which is in the new admin center, so I'll go to try it now and then down here under api management, I'll select this and we should see a new tenant wide request here for a pending approval. So I will say: I'll select this for Microsoft graph and then I'll say approve or reject, and so it's telling me that this just happened.

A

I made the request and it's saying that when I do this, it's going to apply to every single client-side solution. In my in my tenant, so I'm gonna go ahead and say approve.

A

So there we go, it's been approved so now we're in good shape. We can actually use this. So, let's now come over to my SharePoint site and I need to go to a page where I can actually play with this. So let's go to SharePoint.

A

Let's go to: let's go to SharePoint here: OSPF X site, I'm gonna go to the site, contents page or list, and we're gonna create a new app.

A

So I have to use my real site here so we'll scroll down and we'll use this, the one that we just installed or deployed, and so now we're installing it. And so, while this is installing, so you can see it's installing here: let's go over to the site pages and let's create a new page. We can test this on so we'll create a new page.

A

And we will come down here and let's, let's see if our, if our webparts already been created, so go with this and I'll just open this up in the big mode scroll down and there it is so we're going to add it.

A

And sure enough, we can see that we're getting some data coming back, so the data is coming back because we only have one user in this tenant. This is just a test tenant that I use, but we can see that we're actually getting back users from calling the Microsoft graph endpoint using the azure ad HTTP client. So we can see that this is working. Just fine I can even go through and we'll publish this name can't be blank got to give it a name. So we'll just call this page, our test page.

A

There we go, and so there it is, there's our page, it's actually running and you can see that we're actually calling the azure ad client they'll go to the network tab over to xhr and if I do a refresh here on this page and do a filter for graph there we go, you can see our request, so we did the first request here.

A

This is our pre-flight, for course, so for the options tag, and then here is the real one here for the get, and so there's our request and the data that came back we can see is just a single person that came back, but what's nice about this, too, is if I go. Look at this I can see the authorization header so I could take this entire string right here. I copy this entire string.

A

So we'll copy this and if I go to a site called JWT io and if I scroll down a little bit, I can paste that in right here and I can see that this access token is for the Microsoft graph. It was issued for my tenant and my test tenant right here. This is it's not valid before this address. It's not valid. After this address, it expires on or timestamp. It expires at this time, the app name. This is the azure ad app name and that special app that SharePoint created for my tenant.

A

It's called the SharePoint, Online client extensibility web application principle with this ID and every single tenant is gonna. Have the exact same one there's the person that made the request. There's this name, there's my object, ID and then, if I scroll down a little bit farther I have the scope or the permissions that I can use.

A

With this and there's my UPN or my my unique name here, my full full-blown name to this, and so you can see that if I was calling a web service that I had created, I can not only check to see that it came from my tenant. So there's my tenant ID right there, but I can also check to see the user ID. That's actually that's making the request. So this part I could not I couldn't I couldn't spoof or anything like that.

A

It was becoming from the user that made the request, and so that's how we can work with Azure ad, the azure ad HTTP client, and calling a secured Azure ad based web service.

A

Now, in this last section, we're gonna talk about using the Microsoft graph or calling the Microsoft graph, which is another third-party REST API, but this one and it's also secured with Azure ad, but this one. We have a couple extra little tools here: they're gonna make our life a little bit easier than having to go through the azure ad.

A

Authenticated story like we did in the last demo and section so I'm gonna, do a quick overview of what the Microsoft graph is talk about the JavaScript API, the typescript declarations and then understanding the SharePoint API rap that microsoft has given us. So what is the Microsoft 365 platform? Well, it just encompasses a lot of different things.

A

You can extend these things that we have out-of-the-box in Microsoft, 365 and office, 365 things like documents and conversations and pages, and you can also build your own experiences and applications and all of that the way you're gonna get to all of that data is using the Microsoft graph, which is a think of it's like a proxy based API now office 365 is has a lot of different sources of data and different data repositories and things like users and groups and organizations and Outlook and SharePoint and onedrive you've got things from Windows 10.

A

You get things from enterprise, mobility and security. All of these different things are these different places have data and they have different REST API s where you can access that data. One of the nice things about the Microsoft graph is it's acting like a proxy endpoint to all of these different sources, and so we only need to get 100 auth token to authenticate and go to one endpoint to be able to get access to all of this data. That is provided that we have been given access to the underlying data and data sources.

A

Now it's a single resource, as I said it's kind of proxy multiple Microsoft services and allows for easy traversal of different objects and relationships. Now what I mean by that is that I can find someone inside the Microsoft graph using the Microsoft graph, REST API and then from that entity from that individuals. Entity I, can say, show me their direct reports and so I could see that someone named Mary works for that one individual.

A

Let's say that individual we started with his name was John, so I can see that Mary works for John and then I can look at the files that Mary has worked on and shared and using them graph, rust, API and then once I find one of those documents. I could then see other people who have collaborated on it and it may have also been John so I get a circular.

A

Reference back to John that was just kind of cool about, is just being a graph there's, no like clear path of how you want to follow through it. It's just a whole network of all these different people that you can get to. This is also the Microsoft graph is also simplifying token acquisition and management, and it's doing it in the way that it's keeping us from having to connect to various endpoints and obtain an access token for each one of those endpoints way.

A

Back before Microsoft graph, we had to talk to say a SharePoint, REST API and then a onedrive API and a contacts API and a mail API. Now we just have to go to one endpoint to get to all of that stuff. It also eliminates the need for a traditional discovery service, and so in the past, as I was explaining a moment ago, we also had the concept of where we would have to go to different endpoints, and but we didn't know what the endpoint was.

A

So like, for example, the onedrive endpoint for me as an individual could have been different for a different user and it was the way the domain was set up and so I didn't know what these things were. So I went to one well-known discovery, endpoint that would give me access and two and give me a list of kind of like being a was like a phone book or yellow pages to all of the other resources that I have access to now.

A

The Microsoft graph has the it's not just a REST API, but they've created multiple JavaScript or sorry, multiple SDKs for different platforms that we can take advantage of, but they've also built. One of these SDKs is a JavaScript ace SDK.

A

What this is going to require us to do is it requires you to initialize it first with the azure ad provided ooofff to access token, in order to then use that client to be able to talk to the Microsoft graph. So this is a snippet of the JavaScript SDK for the Microsoft graph. You see here that I am calling the anit method on this and passing in an object that is an often an off provider for it, and that is going to give me back a access token. So I was set up an offer.

A

Vidor and I'd have to go, handle the authentication with Azure ad to obtain the access token, and then once that's done, you can see down at the bottom, where I'm calling API slashed me and that's how I'm getting access to my information inside the Microsoft graph.

A

In addition, they've also created a typescript type declarations for those of us who are working with typescript to make it easier for us to work with the Microsoft, Kraft, JavaScript SDK and a typescript experience, and you might start to see where all this is going because we're in the SharePoint framework and we're using typescript. So, let's just say, I wanted to use these type declarations.

A

Well, the benefit here is that I can reference them by importing that project into my end of my project or import those types into my project and you'll notice, here that, in the response that I get back to going to me, I'm getting a user object back and I can type that as a specific kind of object.

A

So, as you see a little bit farther down on those console dot, log statements, I'm able to say user dot, display, name, dot, display mail name and also show my business phone, so I'm able to see all this information about these users.

A

Now when it comes to the SharePoint framework, what Microsoft has done is they said you know, instead of them creating an API for the Microsoft graph. What they did is they took they're leveraging the JavaScript, API or SDK that the graph team has created and they said well. We already have this a sure ad way of obtaining an access token. Why don't we create a wrapper for you that is going to handle the initialization of that Microsoft graph client, the JavaScript SDK? So we can get the token for you because you're a well-known in point.

A

We know that you're called Microsoft graph. We know where the URL is to go talk to the Microsoft graph and we already know the azure ad application that we have in SharePoint that we saw in the previous section that that can be granted access to the Microsoft graph. So why don't we just take advantage of all of that, and so what Microsoft has done and then in sorry and then what they would do?

A

Is they just give us access to the graph client JavaScript SDK that the graph team is created and that's what this is they create? This thing called the ms graph client factory off the current context, and now all I have to do is just call get client remember before when we did this with Azure ad, in that factory I had to specify what resource I wanted to talk to well, in this case, I.

A

Don't have to do that because the client already knows what endpoint or what what resource were going to is the graph, so I called get client, and then it's gonna give me back the Microsoft graph client that I can do any work that I want to from there and that's what I could do like the client done.

A

You know dot API sloshed me I do have to also set up the permissions the same way that I would have to do with the azure ad permissions for an azure ad secured service, because the graph is an azure ad service or it is an azure ad secured service. So I can specify the resource and specify the scope, and here you can see the different permissions and stuff that have all been defined.

A

You were still going to have to go through that exact same process of granting a permission to the graph for your application. You could do that. The exact same way that we did earlier as well, where I can specify the the the name or the the permissions and I can do that either using a declarative approach, as you saw on the last slide or can use PowerShell or the office 365 CLI, and you would then have to approve those permission, requests the exact same way using the API page in the SharePoint admin portal.

A

So after we saw a demo in the previous section where we were able to see how we were able to call them an azure ad secured service and we called the Microsoft graph, let's see how we can do the exact same thing, but this time we're gonna see how we can do this without having to specify the resource name and instead get access to the graph SDK. Now.

A

In this last demo, we're gonna look and see how we can work with the Microsoft graph for the MS graph, HTTP client, the client that the SharePoint framework team has provided to us in the SharePoint framework API and in the last demo. If you recall, we looked at the azure, dhp client. We use that to authenticate and call the Microsoft graph, but the Microsoft graph is a there's two things there's two characteristics to it, and, first of all, it's a well-known endpoint.

A

It's a well known, it's a well known resource and web service that we can take advantage of. So it has a name that we all know it has an ID that we all know. The other thing, too, is that the Microsoft graph team has created a JavaScript API and a typescript declaration file type declaration file that we can use to call the Microsoft graph. So some of the things that we have to do with the azure ad client, we don't have to do with the graph client.

A

So let's take a look at what I mean by this. So what I did is inside of package JSON. What you'll see here is I've installed the Microsoft graph type script or type declarations here, as the 1.5.0.

A

Now, if I come over here to the the web part, the web part is gonna work very similar to how the other one worked just a minute ago. But what you're gonna notice here is that getting getting the data for this it's gonna be is gonna, be a lot simpler.

A

So it's written this one's written a little bit different and the way that this one's gonna work is that I'm gonna actually pass the entire Microsoft graph client to my react based component, my react component, so I'm gonna say this dot context, dot, Microsoft graph, client, factory, I'm gonna, call get client. Now the difference is is remember with that.

A

Now remember, with Azure ad I had to specify the endpoint that I was gonna, go to the Microsoft graph and I didn't have to do that in this case, because in this case here we already know that we're going to the Microsoft graph. So this graph client factory is gonna, be able to figure to do all that stuff for me and it's gonna handle all the authentication stuff in the token acquisition from Azure ad to talk to the Microsoft graph, because it already knows where it's going and all that stuff.

A

So then I'm, given my client back right here, you'll say I'm gonna pass it into my react component and then inside of my react component, all I'm doing here is I'm checking to see once the thing is initialized I'm using the component to go to the Microsoft graph me in point and then I'm saying the state of the current component, equal to my name, my my email address and my business phone and then just just for the heck of it.

A

I'm also gonna go in and I'm gonna use this to get a reference to the graph client and say: go get the my picture, which is a blob type and then I'm going to set the state of my image property on the state equal to the blob. So then, down here in the rendering method, I'm using the fabric react component. The purse, the persona component, to render myself out to render out showing my name and my email address, and just some other information too there's the image URL as well.

A

So we can take a look see how this, how this one's going to work, except one more thing that we have to look at is inside package solution. I have to specify a permission that my component is going to be granted here. So you can see here that I've got the resource equal, Microsoft graph and the permission is the user.

A

Three basic dot, also I still have to give my my component still is: gonna have to have be granted permission to be able to talk to the Microsoft graph, so I've already gone ahead and I've already built this. So you can see there's my package right here. So let's take a look at this guy. That's working so I'm gonna come over here to the browser and I'm gonna go ahead and upload this component, so I will select the Microsoft graph, let's jump over to demo three.

A

I'm gonna go ahead and upload it and it when it goes to prompt, that's going to go ahead and install it. It's gonna say you want to go through and deploy it and scan tell it. It needs these permissions. So it's not checking to see that I've already granted it permissions from the previous demo.

A

It's see it sees these as two totally different things, so we can see everything's done deployed so we're in good shape there, but come back over here notice that I still have this one permission that's been approved, but when I refresh the page you'll notice, there is now a second one. That's being that's, that's pending approval now I don't have to approve this because I already have this one that's approved here and in fact, if I try to approve it a second time you'll see you get this kind of a weird experience here about hey.

A

It's already approved you can't it's not telling me that it that it that it's already been approved. It just says that you've already granted that permission in that scope. On this same thing. So, even though you get this error, I mean, if I refresh the page here, you just get- you can leave it sitting here, because because I've already got this permission, it doesn't know that this permission goes with one sharepoint framework component and this one goes with a different one. There is no differentiation on permissions with what you're doing so now.

A

If I come back over here to the page and if I go to the site contents and go install this graph client app.

A

So we'll scroll down a little bit there's my graph client right here.

A

And so we'll do is we'll wait to see this guy get installed an easy way to do. That is to switch over to classic mode, and you can see here, it's already been installed, so we're in good shape, so we'll go back back from classic back to the modern experience, we'll go into the pages library and then let's go to our test page and we're gonna put this into edit mode, and we can see.

A

We still have our a a DHCP client from before I'm going to put this in edit mode and I'm going to add in a new web part right above it, and this will be our graph persona component and there we go. We can see now that this one is also showing us information from the Microsoft graph. So we have two things now you got pulling it using the azure ad client and we're doing it using the graph client.

A

So just two different ways to do the same thing, except what I'm really trying to show you here is that one of they're both calling an azure ad secured endpoint, just the graph one. We don't have to provide it anywhere near as much information here in our and our in our demo, and the reason for that again is because the the graph client already knows where the graph is it hardening.

A

Those at the endpoint is, it already knows the the Scopes and all the permissions and stuff that we're going to need here, and so that's how we can work with the graph client for the SharePoint framework.

A

So in this module, what we were able to see was how to call third-party REST API s.

A

We started off first by seeing how to do this with an anonymous service, the H using the HTTP client, and then we saw how we can do that using calling a service that was secured with Azure ad and being able to use the azure ad and HTTP client and the special irradiation that we would be granting permissions to inside of for SharePoint and then after we saw that we saw in this last section how we call the Microsoft graph.

A

I've included a couple extra resources here that you can take a look at in reference throughout your applications or throughout your development, to learn more about how to call these third-party services. So with that hope, you've learned a lot about how to call third-party services, including custom and anonymous and secured services, including the Microsoft graph, using Azure ad. So thank you very much and I hope you pick up another one of our modules and again so. Thank you very much.