如何保护使用Azure广告B2C的Blazor Wasm应用程序访问的Azure功能？

Question

场景：我有一个使用B2C身份验证的Blazor wasm应用程序，需要调用HTTP触发的Azure函数。保护Azure函数的最佳方法是什么，这样只有Blazor应用程序和/或经过身份验证的用户才能调用该函数？

到目前为止，我知道如何用B2C保护Blazor应用程序（显然很傻！）我还能够为Azure函数添加B2C身份验证，并通过验证jwt令牌来保护调用。但我不清楚这两部分该如何组合在一起。

Answer 1

如果您想调用Azure AD B2C投影的Azure函数，请参考以下步骤

>

为Azure功能配置Azure AD B2C

>

创建Azure B2C应用程序。

获取您的B2C用户流/策略的元数据URL。记下这个URL。

可以从运行用户流页面获得。

其格式类似于https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/v2.0/。well-known/openid-configuration？p={policy}。

转到您的函数=>身份验证/授权。

设置以下内容

• 应用程序服务身份验证：在
• 未经身份验证时要采取的操作：使用Azure AD登录
• 身份验证提供程序:Azure AAD
• 管理模式：高级
• 客户端Id：{步骤4中的应用程序Id}
• 颁发者URL：{来自步骤6的URL}
• 允许的访问群体：{步骤3中的应用程序Id URL}

1. Create

    dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --client-id "{CLIENT ID}" --domain "{TENANT DOMAIN}" -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"
   

   null

   
       using Microsoft.AspNetCore.Components;
       using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
       
       public class CustomAuthorizationMessageHandler : AuthorizationMessageHandler
       {
           public CustomAuthorizationMessageHandler(IAccessTokenProvider provider, 
               NavigationManager navigationManager)
               : base(provider, navigationManager)
           {
               ConfigureHandler(
                   authorizedUrls: new[] { "<your function app url>" },
                   scopes: new[] { "<the function app  API scope your define>" });
           }
       }
   

   null

   public static async Task Main(string[] args)
           {
               var builder = WebAssemblyHostBuilder.CreateDefault(args);
               builder.RootComponents.Add<App>("app");
                // register CustomAuthorizationMessageHandler 
               builder.Services.AddScoped<CustomAuthorizationMessageHandler>();
               // configure httpclient
               // call the following code please add packageMicrosoft.Extensions.Http 3.1.0
               builder.Services.AddHttpClient("ServerAPI", client =>
                 client.BaseAddress = new Uri("<your function app url>"))
                       .AddHttpMessageHandler<CustomAuthorizationMessageHandler>();
               // register the httpclient
               builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
                .CreateClient("ServerAPI"));
               // configure Azure AD auth
               builder.Services.AddMsalAuthentication(options =>
               {
                   builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                   options.ProviderOptions.DefaultAccessTokenScopes.Add("<the function app  API scope your define>");
   
   
               });
   
               await builder.Build().RunAsync();
           }
   

   • 调用API

    @page "/fetchdata"
           @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
           @inject HttpClient Http
   
           <h1>Call Azure Function</h1>
   
            <p>This component demonstrates fetching data from the server.</p>
   
            <p>Result: @forecasts</p>
   
             <button class="btn btn-primary" @onclick="CallFun">Call Function</button>
   
             @code {
                 private string forecasts;
   
                 protected async Task CallFun()
                 {
                   forecasts = await Http.GetStringAsync("api/http");
                 }
   
   
              }