如何解决Blazor WASM 调用 Azure AAD 安全函数 API 更多信息程序.csappsetting.jsonGraphAPIAuthorizationMessageHandler.cs
我有一个使用 Azure Active Directory 身份验证的 Azure Functions API。我可以在本地测试并使用浏览器进行部署,并在以下过程中调用 curl :
- 获取代码
- 使用代码获取令牌
- 传递token进行身份验证并获取函数结果。
我现在想从我的 Blazor WASM 应用程序调用这个 API,但我确信必须有一个很好的 MSAL 调用来完成所有的身份验证,但我找不到任何关于这可能是什么的文档。
有没有人有代码片段来说明需要发生什么?
更多信息
我的 Azure Functions 应用程序和 Blazor WASM 客户端不是同一个项目的一部分,而是托管在 Azure hypotheticalapi.azurewebsites.net
和 hypotheticalweb.azurewebsites.net
的不同子域上。
Web 客户端应用程序注册具有 API 的 API 权限,并且 API 具有应用程序注册,该应用程序注册在客户端应用程序具有权限的范围内公开自身。
同样,API 和 Web 应用程序单独运行。我似乎无法让他们说话。
我一直在关注“ASP.NET Core Blazor WebAssembly additional security scenarios”文档,但经过多次尝试后,我一直回到错误:
Microsoft.JSInterop.JSException: invalid_grant: AADSTS65001: The user or administrator has not consented to use the application with ID 'e40aabb0-8ed5-4833-b50d-ec7ca4e07996' named 'BallerinaBlazor5Wasm'. Send an interactive authorization request for this user and resource.
即使我撤销/删除了客户对 API 的权限,它也从未重复征求同意。有没有办法让我清除我之前给予的同意?不知道我该怎么做。
这个 GitHub Issue 似乎是相关的。
解决方法
过去两周我在相同的设置中遇到相同的错误代码:Blazor WASM 与 AAD 安全的 Azure Functions 应用程序对话。
就我而言,问题似乎是我在联系 AAD 标识提供程序端点时在 http 请求中列出的范围。我遇到的几乎所有示例都使用 Microsoft Graph API。在那里,User.Read
是作为示例给出的范围。我的第一个想法是,即使我在联系我自己的 API 时,我也必须在请求中包含 User.Read
范围,因为我认为这个范围对于识别用户是必要的。但是,情况并非如此,您在调用授权和令牌端点时必须列出的唯一范围是您在 AAD 应用注册中的“公开 API 刀片”下公开的范围。
我在示例中使用的是 OAuth2 授权代码,而不是隐式授权。确保在您的 API 注册清单中设置了 "accessTokenAcceptedVersion": 2
而不是 "accessTokenAcceptedVersion": null
。据我所知,后者意味着使用隐式流。
我在 API 中公开的范围是 Api.Read
。如果需要,您可以公开更多范围,但重点是您只要求公开的范围。
我还取消了以下两个选项(即没有隐式流程)。但是,我尝试选择“ID 令牌”,但它仍然有效。请注意,如果让 Azure 门户从函数应用身份验证边栏选项卡创建 AAD 应用注册,则默认选择“ID 令牌”选项。
Blazor 代码
程序.cs
必须添加此代码。
builder.Services.AddScoped<GraphAPIAuthorizationMessageHandler>();
builder.Services.AddHttpClient("{NAME}",client => client.BaseAddress = new Uri("https://your-azure-functions-url.net"))
.AddHttpMessageHandler<GraphAPIAuthorizationMessageHandler>();
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
.CreateClient("{NAME}"));
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd",options.ProviderOptions.Authentication);
// NOTE: no "api://" when providing the scope
options.ProviderOptions.DefaultAccessTokenScopes.Add("{you API application id}/{api exposed scope}");
});
appsetting.json
"AzureAd": {
"Authority": "https://login.microsoftonline.com/{aad tenant id}","ClientId": "{application id of your blazor wasm app}","ValidateAuthority": true
}
GraphAPIAuthorizationMessageHandler.cs
注意这个类可以有不同的名字。然后,您还将在 Program.cs 中引用不同的名称。
public class GraphAPIAuthorizationMessageHandler : AuthorizationMessageHandler
{
public GraphAPIAuthorizationMessageHandler(IAccessTokenProvider provider,NavigationManager navigationManager)
: base(provider,navigationManager)
{
ConfigureHandler(
authorizedUrls: new[] { "https://your-azure-functions-url.net" },// NOTE: here with "api://"
scopes: new[] { "api://{you API application id}/{api exposed scope}" });
}
}
我希望这有效。如果没有,请告诉我。
,至少需要获取访问令牌,然后使用令牌调用函数api。在这种情况下,如果您只想一步获取令牌,则可以使用client credential flow,MSAL 示例here,按照左侧的每个部分完成先决条件。
以下是大概的步骤(更多细节,你仍然需要按照上面的示例):
1.Create a new App registration 和 add a client secret.
2.Instantiate the confidential client application with a client secret
app = ConfidentialClientApplicationBuilder.Create(config.ClientId)
.WithClientSecret(config.ClientSecret)
.WithAuthority(new Uri(config.Authority))
.Build();
string[] scopes = new string[] { "<AppId URI of your function related AD App>/.default" };
result = await app.AcquireTokenForClient(scopes)
.ExecuteAsync();
httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer",result.AccessToken);
// Call the web API.
HttpResponseMessage response = await _httpClient.GetAsync(apiUri);
...
}