Hey friends, as you may know, REST APIs are often described using an OpenAPI definition. Justin Yoo has built an extension to bring the OpenAPI capability to Azure Functions. He's here to show me how it works using net six in Visual Studio 2022 today on Azure Friday. Hey friends, I'm Scott Hanselman and it's Azure Friday. I'm here with Justin Yoo How are you, Sir? hi hi. Hi Scott, I'm fine. Thank you. How's it going? It's going very well. I'm excited to spend time with you today because you've built an interesting thing and you're going to show me how I can make better OpenAPI systems using Azure Functions in .NET and .NET is one of my favorite things, so I'm looking forward to learning from you, Sir. That's correct, I'm really pleased to they have a time and have a chance to talk with you about this OpenAPI extension on as a functions runtime. So I've made a few web APIs and I've used things like Swagger and Swashbuckle so I understand that OpenAPI is a web services description language for REST APIs. It's a standard, right? That's correct, so I think we can start from this chart. First of all, We need to discuss what the OpenAPI is. It's the OpenAPI is a document that describes the how your HTTP API or Web API looks like. So how they operate and what messages they transform. So back in the day, and we used to have the WSDL which is still used for many levels. Web service applications and nowadays, as Scott mentioned, the modern Web API applications use this OpenAPI spec to describe their services. And messages. So with this OpenAPI document, we can decouple both producing and consuming applications. Both the applications are built with their own development velocity. Interesting, that's very important thing that you point out there that it's not just consuming them, but producing them as well. So you can do things in a design first approach, but you can do that by writing code. Yep, so we've got Swashbuckle for ASP.NET Web API, but we haven't got a similar thing for the Azure Functions so far, so I built this extension by myself since 2019. So back in my Microsoft MVP days and fortunately is now become the Microsoft official official extension for the Azure Functions. Congratulations, that's very exciting. OK, thank you. So as you can see this diagram. So with this OpenAPI extensions on Azure Function app, we can integrate virtually any applications as long as they use the OpenAPI such as under logic apps, power, automate the power apps through their custom connector and as an API management and starting web apps and app services. That's really cool. So that means that if I make an OpenAPI compliant web service, I can really consume it from anywhere, anywhere, any tool, anywhere in the world that's correct. So let's so do you mind? I'm starting with them. How we can create the functions with OpenAPI enabled? The capability. Yes, let's do it sure. So we have the features till 2022 and then I have. I have now the blank and the solution file. Now I'm creating the Azure Functions project. Yeah, so I started with them as a functions and I'm I'm using. Actually there are two approaches. Using creating as a functions one is using the input. The worker in process worker and the other one is out of process worker which is introduced in the next five world. But now in under six we can use both. In process our call and outdoor process workers. So what I'm going to do now, what I'm going to use show you now is. Using the inpro applications and followed by out of process worker OK. So in crop, so I'm going to create in progress here. Then we have the options to choose. So there are two options than the six and then that isolated here. But for now we are using the six which is in process work OP. Then if you choose it, there is another option called HTTP trigger with OpenAPI options, so we can choose it and then for now I'm going to choose the anonymous authentication level. So then yeah, just create it and actually this is this is it? This is all we need. All we need to do because once we create this project with OpenAPI extension then you will be able to see like. Is the OpenAPI and the OpenAPI decorators so many OpenAPI decorators in there and this is the magic thing? To get you as a functions application enabled with OpenAPI capability interesting, yeah. So when you see the as of this recording, I think I'm the hour the open API extensions is going to be J very soon very soon, so I'm going to update this application extension form for now. So currently the template shows the the Open Setpoint 2, but the latest version is unopened 9 point on preview one, so I'm just updating the latest one. Uhm, then yeah, everything is fine, so I'm just building the applications and once I finish it. Then uhm, so once I build finished then I can start the debugging mode then. So the key is that, UM. I only have. I only have this one endpoint. Bought it as soon as I installed the OpenAPI extension it. Has this additional 4 at the point which is related to displaying the Swagger UI and OpenAPI document itself? So yeah, so I'm just copying this sweater UI. The yellow then whoops. Then place it. And that's why you're seeing. So this is this weather UI based on your as a functions application, and this is the automatically generated from the OpenAPI extension. So yeah, it has the everything we can. So this sweater UI actually works as a test harness so you can. You can test it. The API from the web UI, say Azure. Right, right? And he says. It's OK and the result is like that so. Yeah, and these are the what what I show you now is that a as a function applications the working perfectly in your local environment. OK, so you're using the local Azure Functions runtime and you're running it in process here in your local machine Azure Functions. Of course a cloud service, but you're simulating it by running the functions locally. You made one endpoint, then you got other endpoints for free for authorization, Openid documentation and a free test harness. Courtesy of of the Swashbuckle extension. Uhm, so this is a UI and here is the OpenAPI document here. And as you can see, as a default the system, the OpenAPI version 2, which is the which is known as Swagger. But if you want to change it for then three then simply change. OK, hold on three Jason file, then it shows the UM default on three of our the OpenAPI spec and it has a. It has the OpenAPI done that the new get package and which is currently support supporting the 3.0 point one, so that's why we are seeing the 3.0 point one. And if your application supports YAML file then simply change it to. Then you will be able to see the OpenAPI document in Yammer format. Very cool yeah. So which is really cool so as long as your application supports OpenAPI spec then you this extension VIDAZA function will be your best friend. Alright, sounds good. I like that so far. Now it's time to come. Published this application to the as well so I have already created an instance on Android already. So what I'm what I need to do now is just right click publish here. Then we can choose the Azure or something else, but for now we are going to use Azure here then. The Azure Functions. The instance can be Linux or the Windows or Linux or something else, but for now I'm using the Windows now. Then I can choose the old. All the instance here so function app as of Friday the VSTS 2 instance I'd created, then API management as well. So if you want to integrate as the API management without other functions because it's possible because I'm using the OpenAPI. So I use info app here and then click finish. Then it so now we have him deep day one. We have the application ready for publish, so I'm going just I'm clicking the publish button then it will be deployed into as well. And it takes time. It takes time and sometimes, depending on your data latency it it takes about a minute or two. Sometimes it takes about 10 to 15 minutes, OK. So I am the I created already created the app for you so. So this is Sunday the one. So I'm deploying here. I'm deploying the as a Friday application here, but it's now dipping diploid now, so I added I. I already added the diploid application and as a different resource group and different MD app service. So this is as a function. OK, manager function already in West US 2 Yep. So here I'm so click the URL and it says there are functions for the four runtime is already up and running, then if I. So click the URL, then it says. It's already. Floyd on console viewer website functions, web application and everything works fine. Then if. I go into the API management site and it's also already deployed into this as a functions OpenAPI and then if I click the run and just simply test here. I put the name on the any value and so Friday. End it will be showing me the results like that hello. You're using in this case apim as a cloud enabled test harness. Directly from the Azure portal, and now we're seeing that go from Apim into Azure Functions into your net service that you wrote in Visual Studio. That's correct. Cool, very cool. So then can I consume that? How do I talk to these functions and become a client of them? Oh yeah, uhm this question. So we now the innate we now have the OpenAPI. They enabled as a functions through the opening on the API management and and as a function. Application itself is an open API enabled capability. So if you want to have greater control in terms of the security wise or the permissions or policy wide, I think I'm the API. Management is a great place to use, but sometimes you just need this simple approach. Simple integration directly with them the functions application. Through an API. In that case I'm I think we can directly use. This the OpenAPI Swagger UI from the web functions application here. So this is some this well adjacent, so I just simply I'm changing to. From API version two and I'm going to use this URL for the later use, so I'm just copy this one and then I have the power apps here for example. So previously I showed you about. We can create a custom connector for power platform applications such as power apps or power platform. And even the logic gaps in as well. So we need to create a custom connector to consume this as a functions through OpenAPI in here. So I create the custom connector. I need to create custom connector here and there are the bunch of options here so we can choose the input OpenAPI formula. So simply I can create the opening period, yeah? Then paste it and say this is the greeting thing. So great things. And input it fully DC Sunday error happening so fast there happen because the. Oops, the incest Kucera. So CR so we have CRS error, so the functions application we need to add these the power automate site to get the input. This OpenAPI URL. So I just simply copy this one right into so that CORS error that cross origin resource sharing is indicating that this is protected and it is not been whitelisted or allow listed. Rather through as powerapps you're going to tell it about power apps and that will allow it. To call that method so we need to delete the Azure Functions. No, the power apps is going to reference the reference and their application calling here. So I'm back to application. And there's a function application and say there is some course. Yep, you passed it right there. There we go. And we have nothing on the registered yet, so I'm just copying the flow.microsoft.com, then the save it. So it's updated and now back to this one. Then start input again. Then see also yeah, it's done. So there the error has gone so I can start and click the continue button and then actually that's it. That's it for me. So everything is already done so I don't have to do anything. Just simply create click the, click the connect button here. Then it creates some custom connector for me and then for power apps or power automated to use then. So see how swing. So we have the IT the custom connector also has its own test harness. The interface here. So once it's created then I can show you how to create the custom connector test. I mean so here in the test part. We have a custom connector, but we are so we are ready to use to discuss some connector, but we don't have the actual the information where to how to the communicate with an OpenAPI extension OpenAPI the as a function so we need to create a new connection here then just simply create a connection. Then we have the greetings connection there. So back to the custom connector. So simply. Click the edit button back to test here. Then we now have the connection. Live connection so we are ready to use this connector then here they run the zoo Friday. OK so and test operation click then it should return the same thing. So message hello as of Friday. So now we've got the custom connector. They successfully generated. Now we are ready to use this custom connector within the power apps. Very cool, so now you've done another test harness. Except now we've graduated to power apps and our test connector in our test harness is far more interesting. 'cause now you can go and create an application with that with that connector. So to the, let's create some power apps here. So I'm going to use the greeting set. And here create a candle set here. Then it shows me this. Interface, then I'm just simply adding. Two controls, one is button. And the other one is labeled. And then so the scenario is I'm going if I click this button and this the label will show me the. The message they hello as of Friday, right? So in here but we haven't got the we haven't got the custom connector. Into the building the the power apps. So we now have the greetings I just created, so I'm just adding this custom connector here. Then he says, so this is some the the custom collector we just add so click the button then. And here I'm using. The custom connector and AK yeah. So I'm calling as you are. Functions OpenAPI extension and run and here I'm just passing the name I measure Friday. That's about it, but it's not enough for the powers. Powers is actually using the functions like an Excel functions, so we can just simply add be on other functions to get the value. The response value from the functions so clear. Let oops. And. So this is the the way up on the cooling. There's a functions through custom connector from the power apps, so we got the result and as you see the result collection has been generated, so now I'm changing this text value from to get down the result value so. We don't and. Message. So now I'm ready, so it's now it looks disappeared. So if I click this button then it runs the result and it will display something in here. So we'll see. So it takes time. And it should return the result. OK so oh OK, so something is interesting. So yeah, right now, you're pulling out first stop first result message. It should it be message or greeting is message the correct property. Uhm, so the when you yeah, good question, because the result collection the message is correct. It actually said hello Azure Friday. In your, if you go back to your power app. It says hello Azure Friday and then it adds additional information at the end there. Yeah Oh yeah yeah this some. This is some actually what DSO functions is setting as a function is the set like that when we see the applications here. Hello some name and this has HTTP trigger function executed successfully so this message is returned. So so that is correct. Yeah, very cool. So we are now correctly seeing the messages the direct, so we called it as a functions application and we call as a functions application through custom connector from power apps and weaken the apply this same approach for the power automate and logic apps as well. Very cool, so where can I learn more about this? Is there a GitHub repository or somewhere that I could visit? Oh yeah, sure, uhm. So we have. So if you a lot more about how we can integrate you as a functions application with OpenAPI extension and API management, there is a web page they own our detox.microsoft.com called create sublist APIs in feature studio using Azure functions and API management integration. So please visit this page and follow the instruction and you will be able to get your own functions application. Very cool. Well that's fantastic. We're going to put links to the show notes. But the code, the GitHub repository, as well as the documentation thank you so much Justin for your time today. Thank you, thanks for having me. I am learning all about how to deploy OpenAPI enabled Azure Functions with. Net in Visual Studio today on Azure Friday. Hey, thanks for watching this episode of Azure Friday. Now I need you to like it. Comment on it, tell your friends, retweet it. Watch more Azure Friday.
