Вызов веб-API из ASP.NET Core Blazor

Абстракции служб для вызовов веб-API

Этот раздел применяется к Blazor Web Apps, которые обеспечивают поддержку веб-API в серверном проекте или преобразуют запросы веб-API к внешнему API.

При использовании интерактивных режимов webAssembly и автоматического отрисовки компоненты по умолчанию создаются предварительно. Автокомпоненты также изначально интерактивно отображаются на сервере перед загрузкой Blazor пакета клиенту и активацией клиентской среды выполнения. Это означает, что компоненты, использующие эти режимы отрисовки, должны быть разработаны таким образом, чтобы они успешно выполнялись как от клиента, так и от сервера. Если компонент должен выполнить вызов API, основанный на серверном проекте, или перенаправить запрос к внешнему веб-API (находящемуся за пределами области клиента Blazor Web App), рекомендуется абстрагировать этот вызов API с использованием интерфейса службы и реализовать как клиентскую, так и серверную версии этой службы.

• Версия клиента вызывает веб-API с предварительно настроенной HttpClientконфигурацией.
• Версия сервера обычно может напрямую получить доступ к ресурсам на стороне сервера. Внедрение HttpClient на сервере, который выполняет обратные вызовы к серверу, не рекомендуется, так как сетевой запрос обычно является ненужным. Кроме того, API может быть внешним для проекта сервера, но абстракция службы для сервера требуется для преобразования запроса каким-то образом, например для добавления маркера доступа к прокси-запросу.

При использовании режима WebAssembly вы также можете отключить предварительную отрисовку, чтобы компоненты рендерились только на клиенте. Дополнительные сведения см. в разделе Prerender ASP.NET Core Razor компоненты.

Примеры (примеры приложений):

• Веб-API для списка фильмов в приложении-примере BlazorWebAppCallWebApi.
• Веб-API для стримингового рендеринга погодных данных в примере приложения BlazorWebAppCallWebApi_Weather.
• Данные о погоде возвращаются клиенту в примерах приложений, которые используют либо BlazorWebAppOidc (ненаборный шаблон), либо BlazorWebAppOidcBff (BFF-шаблон). Эти приложения демонстрируют безопасные (веб-) вызовы API. Дополнительные сведения см. в разделе Secure ASP.NET Core Blazor Web App с помощью OpenID Connect (OIDC).

Blazor Web App внешние веб-API

Этот раздел относится к Blazor Web Appам, которые вызывают веб-API, поддерживаемый отдельным (внешним) проектом, возможно размещённым на другом сервере.

Blazor Web Appобычно предварительно отрисованные клиентские компоненты WebAssembly, и компоненты Auto рендерятся на сервере во время статической или интерактивной отрисовки на стороне сервера (SSR). HttpClient Службы по умолчанию не регистрируются в Blazor Web App основном проекте. Если приложение выполняется только с HttpClient услугами, зарегистрированными в .Client проекте, как описано в разделе Добавление службы HttpClient, выполнение приложения приводит к ошибке во время выполнения:

InvalidOperationException: не удается указать значение свойства "Http" в типе "... {COMPONENT}'. Зарегистрированная служба типа System.Net.Http.HttpClient отсутствует.

Используйте любой из следующих подходов:

• Добавьте службы в проект сервера, чтобы сделать их доступными во время SSR. Используйте следующую регистрацию службы в файле Program проекта сервера:

  builder.Services.AddHttpClient();
  

  HttpClient службы предоставляются общей платформой, поэтому ссылка на пакет в файле проекта приложения не требуется.

  Пример. Веб-API списка todo в BlazorWebAppCallWebApiпримере приложения

• Если предварительный рендеринг не требуется для компонента WebAssembly, вызывающего веб-API, отключите предварительный рендеринг, следуя инструкциям в Prerender ASP.NET Core Razor компоненты. Если вы используете этот подход, вам не нужно добавлять HttpClient службы в основной проект Blazor Web App , так как компонент не предопределен на сервере.

Дополнительные сведения см. в разделе "Не удается разрешить клиентские службы на время пререндеринга" статьи о пререндеринге.

Сценарии на стороне клиента для вызова внешних веб-API

Клиентские компоненты вызывают внешние веб-API, используя экземпляры HttpClient, которые обычно создаются с использованием заранее настроенного HttpClient, зарегистрированного в файле Program.

builder.Services.AddScoped(sp => 
    new HttpClient
    { 
        BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
    });

Следующий компонент Razor выполняет запрос к веб-API о ветвях GitHub, аналогичный примеру Basic Usage из статьи HTTP-запросы с IHttpClientFactory - ASP.NET Core.

CallWebAPI.razor:

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject HttpClient Client

<h1>Call web API from a Blazor WebAssembly Razor component</h1>

@if (getBranchesError || branches is null)
{
    <p>Unable to get branches from GitHub. Please try again later.</p>
}
else
{
    <ul>
        @foreach (var branch in branches)
        {
            <li>@branch.Name</li>
        }
    </ul>
}

@code {
    private IEnumerable<GitHubBranch>? branches = [];
    private bool getBranchesError;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    protected override async Task OnInitializedAsync()
    {
        using var request = new HttpRequestMessage(HttpMethod.Get,
            "https://api.github.com/repos/dotnet/AspNetCore.Docs/branches");
        request.Headers.Add("Accept", "application/vnd.github.v3+json");
        request.Headers.Add("User-Agent", "HttpClientFactory-Sample");

        using var response = await Client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            branches = await JsonSerializer.DeserializeAsync
                <IEnumerable<GitHubBranch>>(responseStream);
        }
        else
        {
            getBranchesError = true;
        }

        shouldRender = true;
    }

    public class GitHubBranch
    {
        [JsonPropertyName("name")]
        public string? Name { get; set; }
    }
}

В предыдущем примере для C# 12 или более поздней версии для переменной создается пустой [] массив (branches). Для более ранних версий C#, скомпилированных с помощью пакета SDK до .NET 8, создайте пустой массив (Array.Empty<GitHubBranch>()).

Чтобы защитить код и данные .NET/C#, используйте функции ASP.NET Core Data Protection с серверным веб-API на базе ASP.NET Core. Клиентское Blazor WebAssembly приложение вызывает серверный веб-API для безопасных функций приложений и обработки данных.

Blazor WebAssembly приложения часто не могут осуществлять прямые вызовы между различными источниками веб-API из-за механизма безопасности CORS (совместного использования междоменных запросов). Обычное исключение выглядит следующим образом:

Доступ к запросу по адресу "{URL}" из источника "https://localhost:{PORT}'" был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Если непрозрачный ответ служит вашим потребностям, задайте для режима запроса значение no-cors, чтобы получить ресурс с отключенным CORS.

Даже если вы вызываете SetBrowserRequestMode с полем BrowserRequestModeNoCors (1), которое пытается обойти предыдущее исключение, запрос часто завершается ошибкой из-за ограничений CORS в источнике веб-API, например ограничение, которое разрешает вызовы только из определенных источников или ограничение, которое предотвращает запросы JavaScript fetch из браузера. Единственный способ, чтобы такие вызовы были успешными, заключается в том, что веб-API, которое вы вызываете, должно разрешить вашему источнику вызывать его источник с правильной конфигурацией CORS. Большинство внешних веб-API не позволяют настраивать политики CORS. Чтобы справиться с этим ограничением, выполните любую из следующих стратегий:

• Поддерживайте собственное серверное веб-API ASP.NET Core на стороне сервера. Клиентское Blazor WebAssembly приложение вызывает ваше веб-API на стороне сервера, и ваше веб-API отправляет запрос из серверного кода на C# (а не из браузера) к внешнему веб-API с правильными заголовками CORS, возвращая результат в клиентское Blazor WebAssembly приложение.

• Используйте службу прокси-сервера для прокси-запроса из клиентского приложения Blazor WebAssembly в внешний веб-API. Прокси-служба использует серверное приложение для выполнения запроса от имени клиента и возвращает результат после успешного вызова. В следующем примере, базирующемся на CORS PROXY от CloudFlare, заполнитель {REQUEST URI} является URI запроса:

  @using System.Net
  @inject IHttpClientFactory ClientFactory
  
  ...
  
  @code {
      public async Task CallApi()
      {
          var client = ClientFactory.CreateClient();
  
          var urlEncodedRequestUri = WebUtility.UrlEncode("{REQUEST URI}");
  
          using var request = new HttpRequestMessage(HttpMethod.Get, 
              $"https://corsproxy.io/?{urlEncodedRequestUri}");
  
          using var response = await client.SendAsync(request);
  
          ...
      }
  }
  

Добавьте службу HttpClient

Рекомендации в этом разделе относятся к сценариям на стороне клиента.

Клиентские компоненты вызывают веб-API с помощью предварительно настроенной HttpClient службы, которая сосредоточена на выполнении запросов обратно на сервер источника. Дополнительные конфигурации службы HttpClient для других веб-API можно создать в коде разработчика. Запросы формируются с использованием вспомогательных средств JSON Blazor или HttpRequestMessage. Запросы могут включать в себя конфигурацию параметра Fetch API.

Примеры конфигурации в этом разделе полезны только при вызове одного веб-API для одного HttpClient экземпляра в приложении. Когда приложение должно вызывать несколько веб-API, каждый из которых имеет собственный базовый адрес и конфигурацию, можно применить следующие подходы, описанные в следующих двух разделах этой статьи:

• Названо HttpClient с IHttpClientFactory: каждому веб-API присваивается уникальное имя. Если код приложения или Razor компонент вызывает веб-API, он использует именованный HttpClient экземпляр для вызова.
• Типизированный HttpClient: каждый веб-API типизирован. Если код приложения или Razor компонент вызывает веб-API, он использует типизированный HttpClient экземпляр для вызова.

В файле Program добавьте службу HttpClient, если она еще не добавлена из шаблона проекта Blazor, использованного для создания приложения.

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

В предыдущем примере устанавливается базовый адрес с помощью builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), который получает базовый адрес приложения и обычно задается исходя из значения тега <base>href на хост-странице.

Наиболее распространенными случаями использования собственного базового адреса клиента являются:

• Клиентский проект (.Client) клиента Blazor Web App (.NET 8 или более поздней версии) выполняет вызовы веб-API из компонентов WebAssembly или кода, который выполняется на клиенте в WebAssembly, к API в серверном приложении.
• Клиентский проект (Client) приложения, размещённого на сервере Blazor WebAssembly, выполняет веб-API запросы к серверному проекту (Server). Обратите внимание, что шаблон проекта hosted Blazor WebAssembly больше недоступен в .NET 8 или более поздней версии. Однако размещенные приложения Blazor WebAssembly остаются поддерживаемыми для .NET 8.

Если вы вызываете внешний веб-API (не в том же пространстве URL-адресов, что и клиентское приложение), установите URI на базовый адрес веб-API. Следующий пример задает базовый адрес веб-API, в котором выполняется отдельное веб-приложение API https://localhost:5001и готово к ответу на запросы из клиентского приложения:

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri("https://localhost:5001") });

Названный HttpClient с IHttpClientFactory

Поддерживаются службы IHttpClientFactory и конфигурация именованного объекта HttpClient.

Добавьте пакет NuGet Microsoft.Extensions.Http в приложение.

В файле Program клиентского проекта:

builder.Services.AddHttpClient("WebAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));

Если именованный клиент будет использоваться предварительно отрисованными клиентскими компонентами объекта Blazor Web App, предыдущая регистрация службы должна отображаться как в серверном проекте, так и в проекте .Client. На сервере builder.HostEnvironment.BaseAddress заменяется базовым адресом веб-API, описанным ниже.

Наиболее распространенными случаями использования собственного базового адреса клиента являются:

• Клиентский проект (.Client) типа Blazor Web App, который совершает вызовы API через компоненты или код WebAssembly/Auto, выполняющийся на клиенте в среде WebAssembly, к API в серверном приложении по тому же адресу хоста.
• Клиентский проект (Client) размещенного Blazor WebAssembly приложения, которое осуществляет вызовы веб-API к серверному проекту (Server).

Наиболее распространенный случай использования собственного базового адреса клиента — это клиентский проект (Client) приложения Blazor WebAssembly, размещенного на сервере, который выполняет вызовы веб-API к серверному проекту (Server).

Пример BlazorWebAppCallWebApiприложения демонстрирует вызов веб-API с именем HttpClient в его CallTodoWebApiCsrNamedClient компоненте. Дополнительные рабочие демонстрации в клиентском приложении на основе вызова Microsoft Graph с именем HttpClient см. в разделе Use API Graph with ASP.NET Core Blazor WebAssembly.

Для демонстрации работы в клиентском приложении, основанной на вызове Microsoft Graph с именем HttpClient, см. раздел Использование API Graph с ASP.NET Core Blazor WebAssembly (Use API Graph with ASP.NET Core).

Если типизированный клиент должен использоваться предварительно отрисованными клиентскими компонентами объекта Blazor Web App, то предыдущая регистрация службы должна присутствовать как в серверном проекте, так и в проекте .Client. На сервере builder.HostEnvironment.BaseAddress заменяется базовым адресом веб-API, описанным ниже.

Наиболее распространенными случаями использования собственного базового адреса клиента являются:

• Клиентский проект (.Client) типа Blazor Web App, который совершает вызовы API через компоненты или код WebAssembly/Auto, выполняющийся на клиенте в среде WebAssembly, к API в серверном приложении по тому же адресу хоста.
• Клиентский проект (Client) размещенного Blazor WebAssembly приложения, которое осуществляет вызовы веб-API к серверному проекту (Server).

Наиболее распространенный случай использования собственного базового адреса клиента — это клиентский проект (Client) приложения Blazor WebAssembly, размещенного на сервере, который выполняет вызовы веб-API к серверному проекту (Server).

Примерное BlazorWebAppCallWebApiприложение демонстрирует вызов веб-API с типизированным HttpClient в его CallTodoWebApiCsrTypedClient компоненте. Обратите внимание, что компонент принимает отрисовку на стороне клиента (CSR) (InteractiveWebAssembly режим отрисовки) с предварительным рендерингом, поэтому типизированная регистрация клиентской службы появляется в файле как серверного проекта, так и проекта Program.

Доступ к службам за пределами HttpClientобласти

IHttpClientFactory создает DelegatingHandler экземпляры в отдельной области внедрения зависимостей (DI) из приложения. Если вы внедряете службу с областью действия в производный DelegatingHandler тип, обработчик не имеет доступа к службе из Blazor канала.

Пример того, как получить доступ к службе в промежуточном слое исходящего запроса с помощью обработчика области приложения или обработчика активности цепи, см. в разделе Blazor Web App.

Дополнительные сведения о экземплярах DelegatingHandler см. в разделе HTTP-запросы с IHttpClientFactory — ASP.NET Core.

PATCH в формате JSON (PatchAsJsonAsync)

PatchAsJsonAsync отправляет HTTP-запрос PATCH с содержимым в кодировке JSON.

В следующем примере PatchAsJsonAsync получает документ JSON PATCH в виде строки обычного текста с экранируемыми кавычками:

await Http.PatchAsJsonAsync(
    $"todoitems/{id}", 
    "[{\"operationType\":2,\"path\":\"/IsComplete\",\"op\":\"replace\",\"value\":true}]");

Начиная с C# 11 (.NET 7), можно создавать строку JSON как сырой строковый литерал. Укажите синтаксис JSON с помощью поля StringSyntaxAttribute.Json для атрибута и[StringSyntax] для средств анализа кода.

@using System.Diagnostics.CodeAnalysis

...

@code {
    [StringSyntax(StringSyntaxAttribute.Json)]
    private const string patchOperation =
        """[{"operationType":2,"path":"/IsComplete","op":"replace","value":true}]""";

    ...

    await Http.PatchAsJsonAsync($"todoitems/{id}", patchOperation);
}

PatchAsJsonAsync возвращает HttpResponseMessage. Чтобы десериализовать содержимое JSON из ответного сообщения, используйте метод расширения ReadFromJsonAsync. В следующем примере данные элемента JSON задачи считываются в виде массива. Пустой массив создается, если данные элемента не возвращаются методом, поэтому content не имеет значения NULL после выполнения инструкции:

using var response = await Http.PatchAsJsonAsync(...);
var content = await response.Content.ReadFromJsonAsync<TodoItem[]>() ??
    Array.Empty<TodoItem>();

Представленный с отступами, интервалами и незащищенными кавычками, не кодированный PATCH документ отображается как следующий JSON:

[
  {
    "operationType": 2,
    "path": "/IsComplete",
    "op": "replace",
    "value": true
  }
]

Чтобы упростить создание документов PATCH в приложении, выдавающем запросы PATCH, приложение может использовать поддержку .NET JSON PATCH, как показано в следующем руководстве.

Установите пакет NuGet Microsoft.AspNetCore.JsonPatch.SystemTextJson и используйте функции API пакета для создания JsonPatchDocument для запроса PATCH.

Добавьте директивы @using для пространств имен System.Text.Json, System.Text.Json.Serialization и Microsoft.AspNetCore.JsonPatch.SystemTextJson в начало компонента Razor:

@using System.Text.Json
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.JsonPatch.SystemTextJson

Создайте JsonPatchDocument для TodoItem с IsComplete, установленного для true, с помощью метода JsonPatchDocument.Replace.

var patchDocument = new JsonPatchDocument<TodoItem>()
    .Replace(p => p.IsComplete, true);

Установите пакет NuGet Microsoft.AspNetCore.JsonPatch и используйте функции API пакета для создания JsonPatchDocument для запроса PATCH.

Добавьте директивы @using для пространств имен System.Text.Json, System.Text.Json.Serialization и Microsoft.AspNetCore.JsonPatch в начало компонента Razor:

@using System.Text.Json
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.JsonPatch

Создайте JsonPatchDocument для TodoItem с IsComplete, установленного для true, с помощью метода Replace.

var patchDocument = new JsonPatchDocument<TodoItem>()
    .Replace(p => p.IsComplete, true);

Передайте операции документа (patchDocument.Operations) вызову PatchAsJsonAsync :

private async Task UpdateItem(long id)
{
    await Http.PatchAsJsonAsync(
        $"todoitems/{id}", 
        patchDocument.Operations, 
        new JsonSerializerOptions()
        {
            DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
        });
}

JsonSerializerOptions.DefaultIgnoreCondition устанавливается в JsonIgnoreCondition.WhenWritingDefault, чтобы игнорировать свойство, только если оно равно значению по умолчанию для его типа.

Добавьте JsonSerializerOptions.WriteIndented к true, если хотите представить полезные данные JSON в удобочитаемом формате для отображения. Использование отступов в JSON не влияет на обработку запросов PATCH и обычно не выполняется в производственных приложениях для запросов веб-API.

Следуйте инструкциям в статье JsonPatch в веб-API ASP.NET Core, чтобы добавить действие контроллера PATCH в веб-API. Кроме того, обработка запросов PATCH может быть реализована как минимальный API с помощью следующих шагов.

Добавьте ссылку на пакет NuGet Microsoft.AspNetCore.JsonPatch.SystemTextJson в веб-приложение API.

В файле Program добавьте директиву @using для пространства имен Microsoft.AspNetCore.JsonPatch.SystemTextJson:

using Microsoft.AspNetCore.JsonPatch.SystemTextJson;

Добавьте ссылку на пакет NuGet Microsoft.AspNetCore.Mvc.NewtonsoftJson в веб-приложение API.

В файле Program добавьте директиву @using для пространства имен Microsoft.AspNetCore.JsonPatch:

using Microsoft.AspNetCore.JsonPatch;

Предоставьте конечную точку конвейеру обработки запросов веб-API:

app.MapPatch("/todoitems/{id}", async (long id, TodoContext db) =>
{
    if (await db.TodoItems.FindAsync(id) is TodoItem todo)
    {
        var patchDocument = 
            new JsonPatchDocument<TodoItem>().Replace(p => p.IsComplete, true);
        patchDocument.ApplyTo(todo);
        await db.SaveChangesAsync();

        return TypedResults.Ok(todo);
    }

    return TypedResults.NotFound();
});

Полный рабочий интерфейс PATCH см. в BlazorWebAppCallWebApiпримере приложения.

Потоковая передача запросов на стороне клиента

Для браузеров на основе Chromium (например, Google Chrome и Microsoft Edge), использующих протокол HTTP/2 и HTTPS, на стороне клиента компонент использует Streams API для реализации потоковой передачи запросов .

Чтобы включить потоковую передачу запросов, задайте для SetBrowserRequestStreamingEnabled значение true на HttpRequestMessage.

В следующем примере отправки файла:

• content — это HttpContentфайла.
• /Filesave — это конечная точка веб-API.
• Http — это HttpClient.

using var request = new HttpRequestMessage(HttpMethod.Post, "/Filesave");
request.SetBrowserRequestStreamingEnabled(true);
request.Content = content;

using var response = await Http.SendAsync(request);

Потоковые запросы:

• Требовать использования протокола HTTPS и не поддерживать работу с HTTP/1.x.
• Включите текст, но не заголовок Content-Length. CORS с предварительным запросом требуется для междоменных потоковых запросов.

Дополнительные сведения о загрузке файлов с компонентом InputFile см. в разделе ASP.NET Core Blazor загрузка файлов и пример в разделе Загрузка файлов на сервер с клиентской визуализацией (CSR).

Демонстрация см. в разделе Secure ASP.NET Core Blazor WebAssembly с ASP.NET Core Identity.

Потоковая передача ответов включена по умолчанию.

Вызов HttpContent.ReadAsStreamAsync для HttpResponseMessage.Content (response.Content.ReadAsStreamAsync()) возвращает BrowserHttpReadStream (эталонный источник), а не MemoryStream. BrowserHttpReadStream не поддерживает синхронные операции, например Stream.Read(Span<Byte>). Если код использует синхронные операции, вы можете отказаться от потоковой передачи ответов или скопировать Stream в MemoryStream самостоятельно.

Чтобы отказаться от потоковой передачи ответов глобально, используйте любой из следующих подходов:

• Добавьте свойство <WasmEnableStreamingResponse> в файл проекта со значением false:

  <WasmEnableStreamingResponse>false</WasmEnableStreamingResponse>
  

• Установите для переменной среды DOTNET_WASM_ENABLE_STREAMING_RESPONSE значение false или 0.

Чтобы отказаться от потоковой передачи ответов для отдельного запроса, задайте для SetBrowserResponseStreamingEnabled значение false на HttpRequestMessage (request в следующем примере):

request.SetBrowserResponseStreamingEnabled(false);

HTTP-ответ обычно помещается в буфер для выполнения операций синхронизации содержимого ответа. Чтобы включить поддержку потоковой передачи ответов, установите параметр SetBrowserResponseStreamingEnabled в true в поле HttpRequestMessage.

request.SetBrowserResponseStreamingEnabled(true);

По умолчанию устанавливается HttpCompletionOption.ResponseContentRead, что приводит к завершению HttpClient после прочтения всего ответа, включая содержимое. Чтобы использовать параметр SetBrowserResponseStreamingEnabled в больших файлах, задайте HttpCompletionOption.ResponseHeadersRead, чтобы избежать кэширования содержимого файла в памяти:

- using var response = await Http.SendAsync(request);
+ using var response = await Http.SendAsync(request, 
+     HttpCompletionOption.ResponseHeadersRead);

Поддержка защиты от подделок

Чтобы добавить поддержку антифоргерии в HTTP-запрос, внедрите AntiforgeryStateProvider и добавьте RequestToken в коллекцию заголовков в качестве RequestVerificationToken.

@inject AntiforgeryStateProvider Antiforgery

private async Task OnSubmit()
{
    var antiforgery = Antiforgery.GetAntiforgeryToken();
    using var request = new HttpRequestMessage(HttpMethod.Post, "action");
    request.Headers.Add("RequestVerificationToken", antiforgery.RequestToken);
    using var response = await client.SendAsync(request);
    ...
}

Дополнительные сведения см. в разделе ASP.NET Core Blazor аутентификации и авторизации.

Примеры приложений

Примеры можно найти в приложениях из примеров в репозитории GitHub () () (инструкция по скачиванию).

BlazorWebAppCallWebApi

Вызов внешнего веб-API списка дел, который не находится в Blazor Web App, из Blazor Web App:

• Backend: веб API-приложение для ведения списка дел на основе минимальных API. Веб-приложение API — это отдельное приложение от Blazor Web App, которое, возможно, размещено на другом сервере.
• BlazorApp / BlazorApp.Client: вызывает Blazor Web App веб-приложение API с HttpClient операциями списка todo, такими как создание, чтение, обновление и удаление элементов (CRUD) из списка тодо.

Для отрисовки на стороне клиента (CSR), которая включает в себя интерактивные компоненты WebAssembly и автокомпоненты, использующие CSR, вызовы выполняются с предварительно настроенным HttpClient зарегистрированным в Program файле клиентского проекта (BlazorApp.Client):

builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri(builder.Configuration["FrontendUrl"] ?? 
            "https://localhost:5002")
    });

Для рендеринга на стороне сервера (SSR), который включает предварительно созданные и интерактивные серверные компоненты, предварительно созданные компоненты WebAssembly и автоматические компоненты, которые предварительно создаются или используют SSR, вызовы выполняются с HttpClient, зарегистрированным в Program файле серверного проекта (BlazorApp):

builder.Services.AddHttpClient();

Вызовите внутренний API списка фильмов (внутри Blazor Web App), который находится в серверном проекте Blazor Web App.

• BlazorApp: Blazor Web App, который ведет список фильмов.
  • При выполнении операций в списке фильмов в приложении на сервере используются обычные вызовы API.
  • Когда вызовы API выполняются веб-клиентом, веб-API используется для операций списка фильмов на основе минимальных API.
• BlazorApp.Client: клиентский проект Blazor Web App, содержащий интерактивные компоненты WebAssembly и Auto для управления списком фильмов пользователем.

Для CSR, включающего компоненты Interactive WebAssembly и авто-компоненты, принявшие CSR, вызовы API выполняются через клиентскую службу (ClientMovieService), которая использует предварительно настроенный HttpClient в файле Program клиентского проекта (BlazorApp.Client). Так как эти вызовы выполняются через общедоступный или частный веб-сайт, API списка фильмов — это веб-API.

В следующем примере показано, как получить список фильмов из конечной /movies точки:

public class ClientMovieService(HttpClient http) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        await http.GetFromJsonAsync<Movie[]>("movies") ?? [];
}

Для SSR, включающего предварительно созданные и интерактивные компоненты сервера, предварительно созданные компоненты WebAssembly и автоматические компоненты, предварительно созданные или принятые SSR, вызовы выполняются непосредственно через серверную службу (ServerMovieService). API не зависит от сети, и поэтому представляет собой стандартный интерфейс для операций CRUD со списком фильмов.

В следующем примере показано, как получить список фильмов:

public class ServerMovieService(MovieContext db) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        watchedMovies ? 
        await db.Movies.Where(t => t.IsWatched).ToArrayAsync() : 
        await db.Movies.ToArrayAsync();
}

Дополнительные сведения о том, как защитить данные фильма в этом сценарии, см. в примере данных о погоде, описанном в разделе "Безопасность данных в Blazor Web App" с использованием интерактивной автоматической отрисовки.

BlazorWebAppCallWebApi_Weather

Пример приложения для работы с погодными данными, использующего потоковую обработку данных.

BlazorWebAssemblyCallWebApi

Вызывает веб-API для списка задач из приложения Blazor WebAssembly.

• Backend: веб API-приложение для ведения списка дел на основе минимальных API.
• BlazorTodo: Приложение Blazor WebAssembly, которое вызывает веб-API с предварительно настроенной системой HttpClient для операций CRUD со списком дел.

BlazorWebAssemblyStandaloneWithIdentity

Автономное приложение Blazor WebAssembly, защищенное с помощью ASP.NET Core Identity:

• Backend: серверное веб-приложение API, которое поддерживает хранилище удостоверений пользователя для ASP.NET Core Identity.
• BlazorWasmAuth: автономное Blazor WebAssembly интерфейсное приложение с проверкой подлинности пользователя.

Решение демонстрирует вызов безопасного веб-API для следующих действий:

• Получение ролей пользователя, прошедших проверку подлинности.
• Обработка данных для всех пользователей, прошедших проверку подлинности.
• Обработка данных для авторизованных пользователей (пользователь должен находиться в роли Manager) с помощью политики авторизации .

BlazorWebAppOidcBffAuto

Blazor Web App с глобальным интерактивным автоматическим рендерингом, который использует проверку подлинности OIDC с Microsoft Entra без использования пакетов, специфичных для Entra. В примере показано, как использовать обработчик токенов для выполнения вызовов внешнего защищенного веб-API.

BlazorWebAppOidcBffServer

Blazor Web App с глобальным рендерингом интерактивного сервера, использующего аутентификацию OIDC с Microsoft Entra без использования пакетов, специфичных для Entra. В примере показано, как передать маркер доступа для вызова внешнего защищенного веб-API.

BlazorWebAppOidcBffYarpAspire

A Blazor Web App с глобальной интерактивной автоматической отрисовкой, которая использует:

• Аутентификация OIDC (Microsoft Entra без использования пакетов, специфичных для Entra)
• YARP
• Aspire

Решение включает демонстрацию безопасного получения данных о погоде через внешний веб-API на клиенте при рендеринге компонента с использованием интерактивного автоотрисовки.

BlazorWebAppEntraBff

Blazor Web App с глобальным автоматическим взаимодействием, использующим платформа удостоверений Майкрософт с Microsoft Identity веб-пакеты для Microsoft Entra ID. Решение включает демонстрацию безопасного получения данных о погоде через внешний веб-API на клиенте при рендеринге компонента с использованием интерактивного автоотрисовки.

BlazorWebAppEntraBffYarpAspire

Blazor Web App с глобальным автоматическим взаимодействием, использующим:

• платформа удостоверений Майкрософт с веб-пакетами Identity Microsoft для Microsoft Entra ID.
• YARP.
• Aspire.

Решение включает демонстрацию безопасного получения данных о погоде через внешний веб-API на клиенте при рендеринге компонента с использованием интерактивного автоотрисовки.

• Статья, посвященная общему доступу к ресурсам независимо от источника (CORS), на веб-сайте консорциума W3C
• Enable Cross-Origin Requests (CORS) в ASP.NET Core. Хотя содержимое относится к приложениям ASP.NET Core, а не к компонентам Razor, в статье рассматриваются общие понятия CORS.
• Защита данных в Blazor Web Appс помощью интерактивного автоматического рендеринга

• Статья, посвященная общему доступу к ресурсам независимо от источника (CORS), на веб-сайте консорциума W3C
• Enable Cross-Origin Requests (CORS) в ASP.NET Core. Хотя содержимое относится к приложениям ASP.NET Core, а не к компонентам Razor, в статье рассматриваются общие понятия CORS.