How to get an azure ad registered app token in a Blazor webassembly

Question

How to get an azure ad registered app token in a Blazor webassembly

Pierre Gourven 41

Hi everybody,

I try to get a token from an azure AD registered app using MSAL in a blazor webassembly.
I have the tenant_id, the client_id and the scope from my registered app and want to get a token.
I try to use Microsoft.AspNetCore.Components.WebAssembly.Authentication and follow the tutorial https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-blazor-webassembly
but I want to get the token from my reg app instead of graph.
I have a look on the web but did not find a solution.

Any idea?

Thanks for your help!

Pete

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2023-09-15T11:50:26.79+00:00

Hi @Pierre Gourven ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

2 answers

Your answer

Shweta Mathur 30,296 Reputation points Microsoft Employee Moderator

2023-09-15T11:50:26.79+00:00

Hi @Pierre Gourven ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.

Answer 1

To get a token from an Azure AD registered app using MSAL in a Blazor WebAssembly app, you can follow the instructions in the tutorial Tutorial: Sign in users and call a protected API from a Blazor WebAssembly app and modify the code to get a token for your registered app instead of Graph. Specifically, you will need to modify the OnInitializedAsync method in the Index.razor file to use the AcquireTokenAsync method of the IPublicClientApplication interface to get a token for your registered app. You will also need to modify the apiAuthorizationMessageHandler in the Program.cs file to use the AddAccessToken method of the AccessTokenProvider class to add the token to the HTTP request headers.

References:

Tutorial: Sign in users and call a protected API from a Blazor WebAssembly app

Answer 2

Bruce (SqlWork.com) 78,006 Volunteer Moderator

msal is used to get an access token. the requested scopes define what the access token can be used for. your ad registered app can have its own custom scope defined under api access. just add the scope to the get access token call.

to use the token, you call the msal library for a access token, which will perform a login if required to get the token. if login is required your blazor app will be unloaded, then reloaded with the token. your code then adds the access token to httpclient request via the authorization header.

in your sample, it uses the new httpclient authorization library used with injected httpclient.

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.webassembly.authentication.authorizationmessagehandler?view=aspnetcore-7.0

this library (injected service) handles calling msal to get the token, and adds the bearer token header to the injected httpclient. it also handles login if required (again this will unload and reload the blazor app).

you can define you own AuthorizationMessageHandler class to use with your own api.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-7.0

otherwise you can use the msal services directly to get the token.

Pierre Gourven 41

Hi Bruce!
Thanks for your help!
I'm still confronted to my issue.
Until this point:
I have created my own Azure AD and a registered app with SPA. To get the token I give my app tenant_id, its client_id and its scope.

I succeed in getting a token for a console application (with a Mobile and desktop applications RedirectURI in this case ) using Microsoft.Identity.Client and PublicClientApplication

With the following code:

var app = PublicClientApplicationBuilder.Create(clientId)                 .WithAuthority(authority, tenantId)                 .WithRedirectUri(http://localhost:3030)                 .Build();  var result = await app.AcquireTokenInteractive(scopes).ExecuteAsync();

I also succeed in getting a result in React.js using library msal-browser and PublicClientApplication With the following code:

In file index.js 
appli_config = {clientId:zzzzz,authority:yyyy,redirectUri:http://localhost:3030}  
export const msalInstance = new PublicClientApplication(appli_config) ReactDOM.render( <React.StrictMode> 

<MsalProvider instance={msalInstance}> <App/> </MsalProvider> 

</React.StrictMode>,document.getElementById('root')                                                                            ); Then : import {msalInstance} from "../index.js" ... const acquireTokenSilent = async (msalInstance,request) => { const activeAccount = msalInstance.getActiveAccount();  setActiveAccount API     

const requestForToken={...request,account: activeAccount || accounts[0]}     const authResult = await msalInstance.acquireTokenSilent(requestForToken);     return authResult.accessToken };

I would like to do the same thing in Blazor, but I'm an absolute beginner on it.

Do I use the Microsoft.Client.Identity library? I don't know where and how declare the PublicClientApplication.
Is it in the Program.cs file?
I tried with something like this in Program.cs:

IPublicClientApplication app = PublicClientApplicationBuilder.Create("clientID")
.WithAuthority(AzureCloudInstance.AzurePublic, "TenantId")
.WithRedirectUri(https://localhost:44314/authentication/login-callback)                        
.Build();

But I don't know how I can refer to the app in a razor page?Where do I get the token and how? In the razor page also?Thanks for your help!

Bruce (SqlWork.com) 78,006 Reputation points Volunteer Moderator

2023-09-14T16:16:43.02+00:00

blazor uses the Microsoft.AspNetCore.Components.WebAssembly.Authentication nuget package to perform oauth authentication. this packages uses jsinterop to call the odic-client.js package similar to react.

the sample you started with uses the HttpClient extension that adds the bearer token for you. Your sample needed a graphapi token (common case). here is a sample for an application token:

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-7.0

if you want to handle the token yourself, then try:

https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-web-app-call-api-app-configuration?tabs=aspnetcore

Pierre Gourven 41

Hi Bruce,

I succeed in getting my token with the following code:

In Program.cs:

using Blazorade.Msal.Configuration; 
using BlazorApp_Test; 
using Microsoft.AspNetCore.Components.Web; 
using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 
using Blazorade.Msal.Configuration;  
var builder = WebAssemblyHostBuilder.CreateDefault(args); 

builder.RootComponents.Add<App>("#app"); 
builder.RootComponents.Add<HeadOutlet>("head::after");  
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });  builder.Services.AddMsalAuthentication(options => {     builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);     options.ProviderOptions.DefaultAccessTokenScopes.Add("api://xxxxxxxx/access_scope");     options.ProviderOptions.LoginMode = "redirect"; });
 
builder.Services.AddBlazoradeMsal((sp, options) => {     
var appSettings = sp.GetService<IConfiguration>().GetSection("myapp");     options.ClientId = appSettings.GetValue<string>("clientId");     
options.TenantId = appSettings.GetValue<string>("tenantId");      
options.DefaultScopes = new string[] { "openid", "profile" };     options.InteractiveLoginMode = InteractiveLoginMode.Popup;     
options.RedirectUrl = "/authentication/login-callback";     
options.TokenCacheScope = TokenCacheScope.Persistent; });   

await builder.Build().RunAsync();

In My Razor Page:

@inject BlazoradeMsalService MsalService  
@code{     
private AuthenticationResult authResult;      
private async Task AcquireTokenAsync(params string[] scopes)     
{         
authResult = await this.MsalService.AcquireTokenAsync(
new TokenAcquisitionRequest{Scopes = scopes,             
                            FallbackToDefaultLoginHint = true         });         this.StateHasChanged();     } }  
<h2>Blazorade MSAL Test</h2> 
<div class="btn-group">     
<button type="button" class="btn btn-outline-primary"   @onclick='async () => { await this.AcquireTokenAsync(); }'>Default Scopes</button> 
</div>  @if (null != this.authResult) {     
<h2>Result</h2>     
<ul>         
<li>Username: @this.authResult.Account?.UserName</li>         
<li>Expires: @this.authResult.ExpiresOn</li>         
<li>Scopes: @string.Join(", ", this.authResult.Scopes)</li>         
<li>
<a href=https://jwt.ms/#access_token=@this.authResult.AccessToken target="_blank">Access Token</a>: @this.authResult.AccessToken</li>         
<li>
<a href=https://jwt.ms/#id_token=@this.authResult.IdToken target="_blank">Id Token</a>: @this.authResult.IdToken</li>     
</ul> }

It works well, when I run it as a webassembly in Edge.
When I run it for the first time I'm prompted for my credentials.
Then I push my Default scopes button and my token is displayed.

Then I tried to use this in a Blazor Excel add-in, but the prompt for credentials is not displayed. I got a popup_window_error: Error opening popup window. This can happen if you are using IE or if popups are blocked in the browser.

Bruce (SqlWork.com) 78,006 Reputation points Volunteer Moderator

2023-09-19T15:18:35.6933333+00:00

See this topic

https://learn.microsoft.com/en-us/office/dev/add-ins/develop/auth-with-office-dialog-api
Pierre Gourven 41 Reputation points

2023-09-25T10:10:48.76+00:00

Hi Bruce,

Once again thanks for your help!

I had a look at the link you provided.

But, for me it is not clear at all and I did not find a clear example sample.

I keep on looking for a solution to this problem.
When I will achieve this, I think it will be a good subject for an article ;)

Best Regards

Pierre

Share via

How to get an azure ad registered app token in a Blazor webassembly

2 answers

Your answer