79455926

Date: 2025-02-20 22:03:07
Score: 1.5
Natty:
Report link

I just figured this out today. You have to add a DocumentTransformer -> SecuritySchema using the AddOpenApi options:

Configure Open API

builder.Services.AddOpenApi(o =>
{
    o.AddDocumentTransformer((document, _, _) =>
    {
        document.Components ??= new OpenApiComponents();
        
        document.Components.SecuritySchemes.Add("oauth", new OpenApiSecurityScheme
        {
            Type = SecuritySchemeType.OAuth2,
            Flows = new OpenApiOAuthFlows
            {
                AuthorizationCode = new OpenApiOAuthFlow
                {
                    AuthorizationUrl = new Uri("<your-app-auth-endpoint>"),
                    TokenUrl = new Uri("<your-app-token-endpoing>"),
                    Scopes = new Dictionary<string, string>
                    {
                        {"api://<client-id>/data.read", "Read Data"}
                    }
                    
                }
            }
        });
        
        return Task.CompletedTask;
    });
});

You can find the authorize/token endpoints by going to your Entra Admin Center -> Applications -> App Registrations -> (Selecting Your App) -> Endpoints (top banner at the time of writing) and then I used the OAuth 2.0 auth/token endpoints that should look something like:

https://login.microsoftonline.com/<directory-id>/oauth2/v2.0/authorize https://login.microsoftonline.com/<directory-id>/oauth2/v2.0/token

Wire-up Scalar with Defaults:

app.MapScalarApiReference(c =>
{
    c.WithOAuth2Authentication(o =>
    {
        o.ClientId = "<client-id>";
        o.Scopes = ["api://<client-id>/data.read"];
    });
});

We had to add a scope for our API app registration as using just User.Read did not work. You can do this by going to your app registration -> Expose an API and then adding a scope that will usually look something like: api://<client-id>/<scope-name>

Once this is all configured, you can spin up the Scalar UI. There should be an Authentication box at the top with an Auth Type dropdown. You can select oauth and then ensure PKCE/Scopes are selected and click Authorize.

Shows a snippet of the Scalar authentication section on a black background

Shows a snippet of the Scalar authentication section with the oauth authorization type selected with prefilled data on a black background

Additional Context

We currently have two App Registrations in Entra. One is for our Frontend Angular SPA and the other is for our .NET Web API. The client-id we used was from the API App Registration

Reasons:
  • Blacklisted phrase (1): did not work
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Aaron FC