CODEWITHSUNDEEP
jwtblazorazure-ad-b2copenid-connectblazor-server-side
Jonny
Jonny

Reputation: 854

How to obtain a JWT token in Blazor code using OpenID Connect

Create a default Blazor server (not webassembly) application using windows identity platform as authorisation (I've used VS2022 / .net 6).

Is it possible to get hold of a JWT token in a code section of a blazor component (e.g. the LoginDisplay)?

For instance - I can get hold of the claims from the authentication state as follows (for my example in LoginDisplay.razor)

@code
{
    [CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await authenticationStateTask;
        var user = authState.User;
        var identity = user.Identity as ClaimsIdentity;
        if (identity != null)
        {
            IEnumerable<Claim> claims = identity.Claims;
            
            // Can I get the a JWT Token signed by Azure B2C here?

        }
    }
}

Can I also get a JWT Token from the Azure service (I don't want to regenerate my own - I want an original one signed by microsoft).

As clarification - when using the MSAL javascript libraries on a different project (for a Single Page Application) I could do calls such as MSAL.acquireTokenSilent to get a token from the Azure B2C service for this purpose.

UPDATE - If HttpContext.GetTokenAsync returns null

In addition enets answer below. If you find that you can't access the JWT token using HttpContext.GetTokenAsync then see this question

Upvotes: 1

Views: 3405

Answers (2)

enet
enet

Reputation: 45754

You can access the access token and the refresh tokenas describe below, provided that you've set your app to use Jwt Token authentication (OpenID Connect). See this answer how to do that. Note: There is also a second answer related to that question by the same user. Search for it. This answer can also be useful. See this answer, which contains links to useful answers. Note: You can Google search string such as this: "enet stackoverflow blazor jwt token", and such like to find answers by me. If you want to see answers about the AuthenticationStateProvider, just search "enet stackoverflow blazor AuthenticationStateProvider"

Getting the access token

in _Host.cshtml you can code something like this:

@using Microsoft.AspNetCore.Authentication

@{
    var tokens = new InitialApplicationState
    {
        AccessToken = await HttpContext.GetTokenAsync("access_token"),
        RefreshToken = await HttpContext.GetTokenAsync("refresh_token")
    };
}

And then pass the tokens object to your Blazor app like this:

<component type="typeof(App)" render-mode="ServerPrerendered" param- 
                                           InitialState="tokens"/>

Note that the tokens object is passed as a parameter to the App component, something like this:

@code{

    [Parameter]
    public InitialApplicationState InitialState { get; set; }

    protected override Task OnInitializedAsync()
    {
        TokenProvider.AccessToken = InitialState.AccessToken;
        TokenProvider.RefreshToken = InitialState.RefreshToken;

        return base.OnInitializedAsync();
    }
}

Note: TokenProvider is a singleton service instance that hold the JWT tokens, and make it available to other parts of your app. You can save the JWT tokens in the local storage or better the the session storage and read them when needed, etc.

Note: If you don't use Web Api, then you don't need Jwt token (authentication). Use Microsoft Identity authentication

Upvotes: 1

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30375

To quote MS:

The built-in AuthenticationStateProvider service for Blazor Server apps obtains authentication state data from ASP.NET Core's HttpContext.User. This is how authentication state integrates with existing ASP.NET Core authentication mechanisms.

The Jwt token is in there as bearer.

To get the header there's a Question/Answer here by @enet that shows you how to access the HttpRequest from a Blazor Server App. - How to use the HttpContext object in server-side Blazor to retrieve information about the user, user agent.

I don't have a handy project which has JWT tokens to russle up some code for you. Someone else may be able to add another answer with code or add some to this.

Upvotes: 2

Related Questions