Authenticate my own Blazor App with against my SSO-REST Backend

Hi @Clemens Mattner, per my understanding, REST-API should be able to provide endpoints for authentication, but itself doesn't have identity feature. Because API project should not have a UI for users to enter their account and password, so that I'm not very sure about what do you mean for created a REST-API with Identity and SSO. But we could obviously to see that you are working on a blazor web assembly frontend app and this app is required to connect to Web Api secured by Azure AD. Azure AD provide SSO features for frontend, but when the frontend app is going to call API, it still requires to add Access Token in request header to bypass the authorization. SSO doesn't help in this scenario. Please allow me to share you a simple sample here for better understanding.

Firstly, let's have a Web Api project integrating Azure AD for authorization. We can create a new project using VS template, and let's select Microsoft Identity Platform as the Authentication Type.

Then we need to modify the appsettings.json file to fill the configurations for Azure AD. It shall look like below. The Scopes field requires us to expose an api permission in Azure AD, you might follow the tutorial I shared above to create Azure AD application, add client secret and exposing API. The Azure AD application used for the API project can be used in the blazor Wasm application at the same time.

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "Domain": "tenant_id",
  "TenantId": "tenant_id",
  "ClientId": "azure_ad_app_client_id",
  "Scopes": "Tiny.Greet",
  "CallbackPath": "/signin-oidc"
},

Now we have an Api which demanding correct access token in request header to get the correct response. Let's continue to create a new blazor web assembly project by VS template, and choose the same authentication type.

You will see codes below in Program.cs which using MSAL library.

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

And you also need to modify the wwwroot->appsettings.json file to finish the configuration. Just like what I said above, please using the same Azure AD application.

"AzureAd": {
  "Authority": "https://login.microsoftonline.com/tenant_id",
  "ClientId": "azure_ad_app_client_id",
  "ValidateAuthority": true
}

We will be able to run the blazor app and sign in with Microsoft account now. The rest is to generate an access token which containing the correct scope(we exposed in Azure AD portal and set in the API project). We can refer to this document to use TokenProvider. After sign in the blazor app, using codes below could help us generate an access token.

@inject IAccessTokenProvider TokenProvider

protected override async Task OnInitializedAsync()
{
    var result = await TokenProvider.RequestAccessToken(new AccessTokenRequestOptions
        {
            Scopes = new[] { "api://client_id_exposing_api/Tiny.Read" }
        });
    if (result.TryGetToken(out var token))
    {
        Console.WriteLine($"Access Token: {token.Value}");
        var res = token.Value;
    }
}

Finally, we can send http request in blazor frontend client app to API endpoint to get the desired response.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Tiny