Microsoft 365 Community Community Demos, 15 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using custom SDK built with Microsoft Graph Kiota generator within SharePoint Framework solution

Description

In this 13-minute developer-focused demo, Luis Mañez shows how to use a Kiota generated client in an SPFx Teams webpart. Review what is Kiota, the OpenAPI Initiative (OAI), a Teamified SPFx web part, and architecture overviews on working with Graph and on Azure and Kiota client authentication in SPFx. Dive into the code to see how the SPFx TypeScript web part calls the API using Kiota and how Kioto can list off all dependencies for your project.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 15, 2022.

Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez

Supporting materials
• Sample - Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kiota-custom-api-client
• Documentation - Welcome to Kiota | https://microsoft.github.io/kiota/
• Repo - Project Kiota | https://github.com/microsoft/kiota
• Library – Project Kiota TypeScript | https://github.com/microsoft/kiota-typescript
• Article – Using Microsoft Kiota tool to generate Atlas API SDKs | https://www.clearpeople.com/blog/microsoft-kiota-tool-to-generate-atlas-api-sdks
• Article - Using a Kiota client for your API in a SharePoint framework solution | https://www.clearpeople.com/blog/howto-kiota-client-api-sharepoint-framework-solution

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

How we can use it inside an spfx web part, pretty quick about me. My name is Luis Mania I work as a Chief Architect at Green people, I'm, a Microsoft, this 65 development, MVP and also at usual contributor in this amazing community, and you can find me in the usual social networks at Luis. Manet, so feel free to film me with any question on feedback. It's always good and well apologies in advance. If the you were expecting some kind of some new rice or anything related with the Japanese culture.

A

But the truth is that kyota is um Swahili word and, and it means nest, but what's kyota exactly uh well kyota, it's a common light tool that generates a client, an SDK if you will for any API described using open API.

A

So the advantage are really clear because, instead of you coding, your SDK for for the API, your client for the API and you just wanna command line and you're gonna, get it and in in just a seconds and even more because if you need to provide different sdks in different languages cover as well, because currently support most of them. Well known, languages like CSR, Java, typescript and and so on. Everything is in the official documentation.

A

Please know that it's still in in public preview, but as per my experience and it's very stable and also I'd say that even Microsoft is already using it for some of their graph sdks internally. So and it looks pretty pretty stable and that's it. You just need to run this command. There's a bunch of different properties.

A

Everything will documented, but you can say, kyota generate you pass the open API of your API, the language you want to use and also where the one do you want to place them the generated files and that's all uh by the way, if you don't know about open, API, open apis and just a standard for describing an API.

A

So a bunch of expert in development apis gathered together and create this um a standard, and you can see an example in the in this slide, but you basically say hey: this is the title of my API version, all these endpoints, my HTTP paper, for example in the response code and the different objects for input and output in the in the endpoints um and yeah. This girl is the one and only AEG in arenas, so good for us is in there.

A

Okay, what we have in the in the sample- and we want to see in the demo- is um we have a custom, API called dimified API, it's secure by a relative directory and that API calls a Microsoft graph API to do some actions around the team's endpoint.

A

So um you can get a list of the different themes in your tenant and you can get um detail of a specific theme and also you can provision a new team and then we also have an spfx weapon that is going to use a Toyota generated client in typescript and to call that API and really really easy.

A

Let's, let's have a quick look on how authentication works on on kyota and an Azure active directory and the API is secured by the relative directory. So um we leave the kyota client to be able to get a token for calling the the API and to do so and first we have the entry point. The entry point is then a client generated by by kyota there's a main class as an entry point. That class requires what is called a request adapter for all the networking operations and the request.

A

Adapter also needs an authentication provided and an access token provided. These are different packages in the in in kyota, provided by kyota.

A

Everything by the way is open source, so you can take a look to the to the short code and finally, the document provider is using the aid token provider that is coming from SharePoint framework, so the action to get the token is actually done by SharePoint framework by the spfx using the aid a token provider, the other classes from kyota is kind of a wrapper and and the action is done by the aid token provider.

A

Okay, let's take a look to the Nemo so well. Fortunately, the web part is nothing to fancy. To be honest, I have already the the Web Bar running locally, so in the workbench there's a team's list web part and is so in the different teams in the tenant, with title description, picture and and some of the members of the of the team, the interesting part is how we are calling the the API using using kyota. So let's take a look into this.

A

This is a visual studio code with the with the sample. Everything is already in the GitHub repository, so you can take a look to the code and I've already placed an open, API Json file, and this Json file by the way has been generated using swagger I'm, pretty sure you, you know Swagger from the asp.net it's already available in the in the template when you create a new usp.net web project and just in Swagger I got this open.

A

Api Json file with the different endpoints input, output, response on the different and the different objects and then we're gonna use kyota to generate a client so I'm getting into the console. And if we do something like Yota generate, we specify the open API. We are saying and we want typescript and we also specifying the the main class name, which is called dignified, API client, and we want to place the generative files into the Kyoto generated folder and if we do so is done um so at this.

A

At this point, we've already generated the the files, but also take a look that kyota is saying here: hey if you want more info about the list of dependencies that you need to add to your project. You can write this Kyoto info command, so, let's copy paste and what this is doing is telling you all the different dependencies and in this case, as the language is typescript and is getting you, the npm install commands that you need to run into your. In this case the spfx web part project.

A

If you are using.net, then you're gonna get the download package command one with the different packages from from nougat and I guess it was the same way with them with all the different support languages. I've already moved them generated a code to this and to the spfx and webpart project.

A

So we have the different packages in the in the packagation, the abstraction authentication and and so on, and let's see now how we are using kyota inside the the spfx web part, instead of doing it from this on the studio code, let's jump in into the slides.

A

This is just what we've seen well, we're not gonna go into much detail into the API. It's just a standard, minimal, sp.net web API is secure by using by Azure active directory with this with this code and configure to be enabled to call graph and only half of the on the user.

A

These are the three endpoints provided by the API, as already mentioned, get a little bit of the themes, a list of teams specific and any information for a specific team and provisional team, and actually the API is using the Microsoft graph SDK. The dominated SDK, and so everything is done by the graph service, client and so here's the code for getting the different deals of the tenant, and this is the code to to provision a new and in teams just using the vsdk.

A

Okay, the important part is is now here in the spfs web part. So this is the code from the from the web part itself and the web part is calling a teams list and we have component and that component is getting as a prop the aad token provider, Factory that it's already in the context in the SharePoint and Web Bar context. Remember from the authentication on a slide that we're gonna need this aav token provider for authentication.

A

So we need to pass the the factory in this case that is already in the in the context and when the web bar is Mount and what we are doing is calling the token provider Factory and when the promise is resolved, and we already have a token provided an IED and token provided. What we are doing is creating a new authentication provider.

A

This is coming from kyota the Azure ID spfx authentication provided pass in that token provider and some other parameters like the Azure ID application, Theory from module ID when you register the the application and when you have the authentication provided you create the fetch request, adapter passing that out provider and finally, we created timified, API client.

A

This object is the one created by a kyota and we pass the the adapter once we have the client it's as simple as calling the client dot teams, because our endpoint is, is teams dot get and when the promise is in resolved. We get the the list of themes we pass to the reactor State and we render them and the different teams using the flu and UI document component. As you see, as as it is, let's take a quick look to the code generated by by kyota so coming back to we saw the story again.

A

We have scrolled again and then we take a look to the folder in here client, and this is the code generated by kyota. We don't care that much it's kyota's magic and so we're good. But this is the main entry point that I already showed you in the in the in the previous slide and well.

A

This is the client, so you can see there's a request adapted in the Constructor and this kind of things, all the different models and from the API, the channel, the team and so on, and all this code is generated by kyota. So you don't need to do anything it's already there and for using. You just need three lines: three lines of code, jumping back to the slides, as I said, the the sample is already available in the repo.

A

So have a look, and let me know by the way the the spfx authentication provider is, is a contribution from from myself to the kyota repository. So if there's any issue or worry about this, let me know- and there are some references on here- the official dogs and the different GitHub repositories- and that's all thank you very much.

A

Thank you, Luis great demo and really interesting to see where kyota is now uh nowadays and what what you can do with kyota.