I just figured this out today. You have to add a DocumentTransformer
-> SecuritySchema
using the AddOpenApi
options:
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
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
.
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