azure - 从 Blazor Web assembly 独立连接到受 Active Directory B2C 保护的 Azure Function App

Question

我有一个独立的 Blazor Webassemble 项目，在 Visual Studio 中本地运行时，我尝试从该项目访问 Azure Function App，如下所示。

response = await Http.GetStringAsync("https://mytestsite897845.azurewebsites.net/api/Test");

我的 Azure Function App 配置了 Azure Active Directory 身份验证/授权，并且我已在 Azure Function App CORS 中设置“https://localhost:44351”并勾选“启用 Access-Control-Allow-Credentials”。

在“身份验证/授权”部分中，如果我将“请求未经身份验证时采取的操作”设置为“允许匿名请求(无操作)”，则上述调用可以正常工作，并且我会从我的“测试“Azure 功能”。

但是，一旦我将“请求未经身份验证时采取的操作”更改为“使用 Azure Active Directory 登录”，上述调用就会失败，即使我已使用 Active Directory B2C 登录也是如此。我在浏览器中收到以下错误。

Access to fetch at 'https://login.windows.net/<my client id>/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fmytestsite897845.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=48fd8563-3826-4d79-b29a-907a17598afe&scope=openid+profile+email&response_mode=form_post&nonce=e428bf7812ef4327a710b1162353ac3d_20200820091540&state=redir%3D%252Fapi%252FTest'
(redirected from 'https://mytestsite897845.azurewebsites.net/api/Test') from origin 'https://localhost:44351' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves
your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

GET https://login.windows.net/<my client id>/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%2F%2Fmytestsite897845.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=48fd8563-3826-4d79-b29a-907a17598afe&scope=openid+profile+email&response_mode=form_post&nonce=e428bf7812ef4327a710b1162353ac3d_20200820091540&state=redir%3D%252Fapi%252FTest
net::ERR_FAILED

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: TypeError: Failed to fetch
System.Net.Http.HttpRequestException: TypeError: Failed to fetch
   at System.Net.Http.BrowserHttpHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task`1 sendTask, HttpRequestMessage request, CancellationTokenSource cts, Boolean disposeCts, CancellationToken callerToken, Int64 timeoutTime)
   at System.Net.Http.HttpClient.GetStringAsyncCore(Task`1 getTask, CancellationToken cancellationToken)
   at BACClient.Pages.Counter.OnInitializedAsync() in .\Pages\Counter.razor:line 79
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

有人知道我错过了什么吗？

Answer 1

您能否分享一下配置 Azure Function 以针对 Azure B2C(策略和应用程序)进行身份验证所采取的步骤？您提到的步骤与 Azure AD B2C 无关，而是与 Azure AD 相关。

您可能会发现此链接很有用，它解释了所需的实际设置:https://codemilltech.com/adding-azure-ad-b2c-authentication-to-azure-functions/#:~:text=The%20Azure%20Function%20App%20can,And%20then%20the%20Xamarin .