MS Graph, Blazor WebAssembly and Azure Static Web Apps - DEV Community

Question

Accepted Answer

In this post, I&#x27;m going to discuss how to access user profile through MS Graph, from Blazor WebAssembly running on Azure Static Web Apps. Tagged with azure, staticwebapps, blazorwasm, msgraph.&#xA;      We&#x27;re a place where coders share, stay up-to-date and grow their careers.&#xA;  Azure Static Web Apps (ASWA) offers a straightforward authentication feature. With this feature, you don&#x27;t need to write a complicating authentication logic by your hand and can sign in to ASWA. By the way, the authentication details from there only show whether you&#x27;ve logged in or not. If you need more information, you should do something more on your end. Throughout this post, I&#x27;m going to discuss how to access your user profile data stored in Azure Active Directory (AAD) through Microsoft Graph from the Blazor WebAssembly (WASM) app running on an ASWA instance.You can find the sample code used in this post on this GitHub repository (docs in Korean).Fusion Dev Korea ?? ???? ??????? ?????.After publishing your Blazor WASM app to ASWA, the page before log-in might look like this:If you want to use AAD as your primary identity provider, add the link to the Login HTML element.After the sign-in, you can retrieve your authentication details by calling the API endpoint like below. For brevity, I omitted unnecessary codes.Here are the authentication details from the response:As mentioned above, there&#x27;s only limited information available from the response. Therefore, if you need more user details, you should do some additional work on your end.You only know your email address used for log-in. Here are the facts about your logged-in details:In other words, there are chances that all three tenants details &#x2013; the tenant where you logged in, the tenant hosting the ASWA instance, and the tenant where you want to access &#x2013; might be different from each other. All you know of my details are:Then, how can you know your user details from the tenant that you want to access?First of all, you need to get permission to get the details to the tenant. Although you signed in to ASWA, it doesn&#x27;t mean you have enough permission to access the resources. Because ASWA offers Azure Functions as its facade API, let&#x27;s use this feature.When calling the facade API from the Blazor WASM app side, it always includes the auth details through the request header of x-ms-client-principal. The information is the Base64 encoded string, which looks like this:Therefore, decode the string and deserialise it to get the email address for log-in. Here&#x27;s a POCO class for deserialisation.With this POCO class, deserialise the header value and get the email address you&#x27;re going to utilise.All the plumbing to get the user details is done. Let&#x27;s move on.The next step is to register an app on AAD through Azure Portal. I&#x27;m not going to go further for this step but will give you this document to get it done. Once you complete app registration, you should give it appropriate roles and permissions, which is the application permission instead of the delegate permission.  For example, User.Read.All permission should be enough for this exercise.Once you complete this step, you&#x27;ll have TenantID, ClientID and ClientSecret information.You first need to get an access token to retrieve your details stored on AAD. There are many ways to get the token, but let&#x27;s use the client credential approach for this time. First, as we&#x27;re using Blazor WASM, we need a NuGet package to install.After installing the package, add several environment variables to local.settings.json. Here are the details for authentication.To get the access token, write the code below. Without having to worry about the user interaction, simply use both ClientID and ClientSecret values, and you&#x27;ll get the access token. For example, if you use the ConfidentialClientApplicationBuilder class, you&#x27;ll easily get the one (line #16-20).Once you have the access token in hand, you can use Microsoft Graph API.To use Microsoft Graph API, install another NuGet package:And here&#x27;s the code to get the Graph API. Call the method written above, GetAccessTokenAsync() (line #4-8).Finally, call the GetGraphClientAsync() method to create the Graph API client (line #1) and get the user details using the email address taken from the ClientPrincipal instance (line #4). If no user data is queried, you can safely assume that the email address used for the ASWA log-in is not registered as either a Guest User or an External User. Therefore, the code will return the 404 Not Found response (line #7).The amount of your information would be huge if you could filter out your details from AAD.You don&#x27;t want to expose all the details to the public. Therefore, you can create another POCO class only for the necessary information.And return the POCO instance to the Blazor WASM app side.Now, you&#x27;ve got the API to get the user details. Let&#x27;s keep moving.Here&#x27;s the code that the Blazor WASM app calls the API to get the user details. I use the try { ... } catch { ... } block here because I want to silently proceed with the response regardless it indicates success or failure. Of course, You should handle it more carefully, but I leave it for now.In your Blazor component, the method GetLoggedInUserDetailsAsync() is called like below (line #6, 18).If your email address belongs to the tenant you want to query, you&#x27;ll see the result screen like this:If your email address doesn&#x27;t belong to the tenant you want to query, you&#x27;ll see the result screen like this:Now, we can access your user details from the Blazor WASM app running on ASWA through Microsoft Graph API.So far, I&#x27;ve walked through the entire process to get the user details:As you know, Microsoft Graph can access all Microsoft 365 resources like SharePoint Online, Teams and so forth. So if you follow this approach, your chances to use Microsoft 365 resources will get more broadened.Templates let you quickly answer FAQs or store snippets for re-use.Great post, thanks!Could you explain why application permissions was choosen over delegated permission?As I understand it, application permission is giving the logged in user access to all users data in the directory as opposed to just their own (through delegated permission).&#xA;              javinpaul - Jul 25&#xA;            &#xA;              Dave Brock - Jul 26&#xA;            &#xA;              swatiBabber - Jun 21&#xA;            &#xA;              Jayendran Arumugam - Jul 25&#xA;            Any language. Any platform.DEV Community &#x2013; A constructive and inclusive social network for software developers. With you every step of your journey.Built on Forem &#x2014; the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community &#xA9; 2016 - 2021.&#xA;        We&#x27;re a place where coders share, stay up-to-date and grow their careers.&#xA;    &#xA;      We strive for transparency and don&#x27;t collect excess data.&#xA;

MS Graph, Blazor WebAssembly and Azure Static Web Apps - DEV Community

gt said:

ERNEST said:

John said:

Jak said:

How to Remove Duende IdentityServer from Blazor We

How to Remove Duende IdentityServer from Blazor Web Assembly Application in Visual Studio 2022

How to choose a Framework when making Web app

How to choose a Framework when making Web app

Neural Networks in C#

Neural Networks in C#

Graphs Data Structure

Graphs Data Structure

"WaitForWarmupCompletion" task was not given a val

"WaitForWarmupCompletion" task was not given a value for the required parameter of "Configuration"

Hiring for .NET Developers - Cleveland, OH - Fortu

Hiring for .NET Developers - Cleveland, OH - Fortune 200

recurring neural network in c#

recurring neural network in c#

Azure SSH: Permission denied (publickey): How to a

Azure SSH: Permission denied (publickey): How to add Public Key to Azure Virtual Machine (VM) to login with SSH Key

What is New in DotNet 7 (Conf 2022 Best Videos)

What is New in DotNet 7 (Conf 2022 Best Videos)

[Web Developer] How to Change Web Content and Pers

[Web Developer] How to Change Web Content and Persist the Change

Best and Fastest Way to Update Visual Studio 2019

Best and Fastest Way to Update Visual Studio 2019 on a Slow Internet Speed or Computer

Why Progressive Web Apps PWA Are The Future of Web

Why Progressive Web Apps PWA Are The Future of Web

Asp.Net Core Blazor Web Assembly Developing Notes

Asp.Net Core Blazor Web Assembly Developing Notes

serializing object vs Not to

serializing object vs Not to

Dot Net Core 3.1 Link Tag Helpers not Clickable

Dot Net Core 3.1 Link Tag Helpers not Clickable