![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/2021-02-09-Image1.jpg\")
<\/p>\nIn today\u2019s Microsoft Graph Mailbag post we will demonstrate how to surface and interact with your Microsoft 365 data and services using the Microsoft Graph by using Microsoft Azure Functions as the middle tier business logic layer and ASP.Net Core Blazor Web Assembly as the front end UI layer.<\/p>\n
<\/p>\n
Please be sure to follow this blog series using\u202fhttps:\/\/aka.ms\/MSGraphMailbag<\/a>\u202for with RSS using\u202fhttps:\/\/developer.microsoft.com\/en-us\/graph\/blogs\/feed\/?tag=MSGraphMailbag<\/a>.<\/p>\n Good day folks, I hope you are doing well and keeping safe.\u00a0 My objective in this blog post is to show you the art of the possible for working with Microsoft 365 data and services using the Microsoft Graph with two technologies that I find really fascinating.\u00a0 For years now I have been a huge advocate for using Azure Functions for accessing and manipulating data.\u00a0 I like it as a middle tier because of the versatility and scale that it offers. I also like Blazor because I [if I am being honest with myself and you] am not the best at creating appealing User Interfaces for applications.\u00a0 My specialty for years has always been in data and the middle layer to backend.\u00a0 So if you are like me and are interested in how to build an end to end application in lightning speed\u2026 lets Blaze [pun intended] ahead with some Blazor and Azure Functions with the Microsoft Graph.<\/p>\n First things first, the code for everything we will cover may be found on my GitHub repo here<\/a>.\u00a0 My plan is to keep this repo \/ scenario going as time goes by to build out and to add more forms for various use cases.\u00a0 I am also planning to employ additional Azure Functions in different languages and platform SDKs. I\u2019ve also built this demo using publicly available and up-to-date guidance that I will be calling out along the way.\u00a0 Let\u2019s create a list and chronology of tasks in this solution:<\/p>\n I want to keep this simple, something that you can do in 15 minutes, so with the above links and the aid of the code in the repo, I will call out the integral steps that I took to get my solution built.<\/p>\n Our solution will perform 2 unique functions:<\/p>\n To do this we will be targeting the \u201cList Users<\/a>\u201d endpoint under the User resource type. We will be only reading for now so our permissions need only be User.Read.All. \u00a0\u00a0We are not going to be prompting the user for credentials, so use Application permissions as opposed to Delegated.<\/p>\n Following the instructions in the 1st<\/sup> bullet point above, ensure that your Permission Scope is set to User.Read.All as shown in the following screenshot:<\/p>\n This will come up later when we get into the Authentication Provider but I will be using the Confidential Cient Application<\/a> because my intent is to have the application run without user interaction. If you look at the code in the previous link you will see it is a direct copy into my code with 2 additional lines for the GraphServiceClient [more to come on that].\u00a0 Suffice to say, the genesis of that process begins by selecting the proper Authentication scheme.<\/p>\n My favorite bit, I am admittedly biased when it comes to my Web API\u2019s, I love Azure Functions for this.\u00a0 Working with Microsoft Graph and Azure Functions its relatively straight forward. \u00a0The main steps are:<\/p>\n The list above combined with the code in my repo details the steps, but I will call out a few items where I refined it a bit.\u00a0 In this blog post I planned on creating 2 Functions calls in Azure Function for the 2 pages I have planned in Blazor:<\/p>\n I created a static method that I can call both Functions but also any future functions as well. I could have gone further and abstracted the Graph Client away from the Authentication Provider if I foresaw the need to have different Client Flows, but that was not needed here. Suffice to say, this method will return to us an authenticated Graph Client to be used in our method.<\/p>\n The following snippet shows GetAllUsers Azure Function as an example:<\/p>\n You will publish the Azure Functions to your Function App in Azure (see documentation here<\/a> for Visual Studio or here<\/a> for Visual Studio Code). If you do not have an Azure subscription, you can get one for free here<\/a>. Now you may be asking yourself \u201cwhy use an Azure Function?\u201d From a demo perspective I don\u2019t have to worry about how to serve up a Web API from my local machine [ex. ngrok<\/a>].\u00a0 This also matches how you might build it from a a real-world production scenario also.\u00a0 Once published you can test your Azure Function calls using your browser or even PostMan<\/a>.\u00a0 Below you can see us testing the GetAllUsers function.<\/p>\n At this point in time all you have left is the UI.<\/p>\n The final step is put this all together and display our work. My approach here is to build upon the default template you get when you create a Visual Studio project for an ASP.NET Core Web Application using the Blazor WebAssembly App template.<\/p>\n Once your project is created, do the following:<\/p>\nIntroduction<\/h2>\n
\n
Application Registration<\/h2>\n
\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/permissions.jpg\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/apipermissions-1024x461.jpg\")
<\/p>\nCreate an Azure Function<\/h2>\n
\n
\n
private static GraphServiceClient GetAuthenticatedGrahClient()\n{\n \/\/The below comment block is how you should go about securing your configurable keys etc. as it will allow you to \n \/\/ send them to Azure API settings upon publish as well as set them up for KeyValult.\n var clientId = Environment.GetEnvironmentVariable(\"AzureADAppClientId\", EnvironmentVariableTarget.Process);\n var tenantID = Environment.GetEnvironmentVariable(\"AzureADAppTenantId\", EnvironmentVariableTarget.Process);\n var clientSecret = Environment.GetEnvironmentVariable(\"AzureADAppClientSecret\", EnvironmentVariableTarget.Process);\n\n \/\/ Build a client application.\n IConfidentialClientApplication confidentialClientApplication = ConfidentialClientApplicationBuilder\n .Create(clientId)\n .WithTenantId(tenantID)\n .WithClientSecret(clientSecret)\n .Build();\n ClientCredentialProvider authenticationProvider = new ClientCredentialProvider(confidentialClientApplication);\n GraphServiceClient graphClient = new GraphServiceClient(authenticationProvider);\n\n return graphClient;\n}<\/pre>\n[FunctionName(\"GetAllUsers\")]\npublic static async Task<IActionResult> GetAllUsersFromGraph(\n [HttpTrigger(AuthorizationLevel.Function, \"get\", Route = null)] HttpRequest req,\n ILogger log)\n{\n List<FabsterUser> ful = new List<FabsterUser>();\n\n GraphServiceClient graphClient = GetAuthenticatedGrahClient();\n List<QueryOption> options = new List<QueryOption>\n {\n new QueryOption(\"$select\", \"displayName,givenName,mail\")\n };\n\n var graphResult = graphClient.Users.Request(options).GetAsync().Result;\n\n List<User> usersList = graphResult.CurrentPage.ToList();\n\n foreach (User u in usersList)\n {\n log.LogInformation(\"Showing: \" + u.GivenName + \" - \" + u.Mail);\n }\n\n log.LogInformation(\"Graph SDK Result for All Users\");\n\n string responseMessage = string.IsNullOrEmpty(graphResult.ToString())\n ? \"Call to Microsoft Graph on Fabster Tenanat App executed successfully.\"\n : $\"{graphResult}\";\n\n return new OkObjectResult(usersList);\n}<\/pre>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/postmanpayload-1024x620.jpg\")
<\/p>\nCreate a Blazor Web Application<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/createnewblazorapp.jpg\")
<\/p>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/vssolnexplorercallout.jpg\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/blazorappui_showAll-1024x511.jpg\")
<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/blazorappui_showTopOne-1024x368.jpg\")
<\/p>\n