Webes API meghívása ASP.NET Core Blazor

Ez a cikk azt ismerteti, hogyan hívhat meg webes API-t egy Blazor alkalmazásból.

Csomag

A System.Net.Http.Json csomag bővítménymódszereket biztosít a System.Net.Http.HttpClient-nek és System.Net.Http.HttpContent-nek, amelyek automatikus szerializálást és deszerializálást végeznek a System.Text.Json használatával. A System.Net.Http.Json csomagot a .NET megosztott keretrendszere biztosítja, és nem igényel csomaghivatkozás hozzáadását az alkalmazáshoz.

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

builder.Services.AddHttpClient();

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

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();
}

Ügyféloldali forgatókönyvek külső webes API-k meghívásához

Az ügyfélalapú összetevők külső webes API-kat hívnak meg a HttpClient példányok használatával, amelyeket általában a HttpClient fájlban regisztrált, előre konfigurált Program segítségével hoznak létre.

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

Az alábbi Razor összetevő egy kérést küld egy webes API-hoz a GitHub-ágak lekéréséhez, hasonlóan az Alapszintű használat példához a HTTP-kérések készítése IHttpClientFactory használatával az ASP.NET Core cikkben.

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()
    {
        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");

        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; }
    }
}

Az előző C# 12 vagy újabb példában egy üres tömb ([]) jön létre a branches változóhoz. A .NET 8-nál korábbi SDK-val lefordított C# korábbi verzióihoz hozzon létre egy üres tömböt (Array.Empty<GitHubBranch>()).

A .NET/C# kód és adatok védelméhez használja a ASP.NET Core Data Protection funkcióit egy kiszolgálóoldali ASP.NET Core háttérrendszer webes API-val. Az ügyféloldali Blazor WebAssembly alkalmazás meghívja a kiszolgálóoldali webes API-t az alkalmazások biztonságos funkcióinak és adatfeldolgozásának érdekében.

Blazor WebAssembly alkalmazások gyakran nem tudnak közvetlen hívásokat kezdeményezni a források között a webes API-k felé a kereszt-eredetű erőforrásmegosztás (CORS) biztonsági intézkedések miatt. Egy tipikus kivétel a következőhöz hasonló:

Hozzáférés a(z) {URL} lekéréséhez a(z) 'https://localhost:{PORT}'' eredetből a CORS-irányelv miatt le lett tiltva: A kért erőforráson nincs 'Access-Control-Allow-Origin' fejléc. Ha egy átlátszatlan válasz megfelel az igényeinek, állítsa a kérés módját "no-cors" értékre, hogy lekérje az erőforrást, ha a CORS le van tiltva.

Még akkor is, ha a(z) SetBrowserRequestMode hívást BrowserRequestMode mező NoCors (1)-gyel próbálja megkerülni az előző kivételt, a kérés gyakran meghiúsul a webes API eredetére vonatkozó CORS-korlátozások miatt, mint amelyek csak bizonyos eredetről érkező hívásokat engedélyeznek, vagy megakadályozzák, hogy a JavaScript fetch kéréseket a böngészőből tegyenek. Az ilyen hívások kizárólag akkor lehetnek sikeresek, ha a webes API, amelyet meghívsz, lehetővé teszi a saját forrásod számára, hogy a helyes CORS-konfigurációval elérje az ő forrását. A legtöbb külső webes API nem teszi lehetővé a CORS-szabályzatok konfigurálását. A korlátozás kezeléséhez fogadja el az alábbi stratégiák egyikét:

• Saját kiszolgálóoldali ASP.NET Core háttérbeli webes API-t tart fenn. Az ügyféloldali Blazor WebAssembly alkalmazás meghívja a kiszolgálóoldali webes API-t, a webes API pedig a kiszolgálóalapú C#-kódból (nem böngészőből) a külső webes API-ba küldi a kérést a megfelelő CORS-fejlécekkel, és visszaadja az eredményt az ügyféloldali Blazor WebAssembly alkalmazásnak.

• Proxyszolgáltatással irányíthatja a kérést az ügyféloldali Blazor WebAssembly alkalmazásból a külső webes API felé. A proxyszolgáltatás egy kiszolgálóoldali alkalmazással küldi el a kérést az ügyfél nevében, és a hívás sikerességét követően visszaadja az eredményt. Az alábbi példában a CloudFlare CORS PROXYalapján a {REQUEST URI} helyőrző jelenti a kérelem URI-ját.

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

Kiszolgálóoldali forgatókönyvek külső webes API-k meghívásához

A kiszolgálóalapú összetevők külső webes API-kat hívnak meg HttpClient példányok használatával, amelyek általában IHttpClientFactoryhasználatával jönnek létre. A kiszolgálóoldali alkalmazásokra vonatkozó útmutatásért lásd: HTTP-kérések létrehozása az IHttpClientFactory használatával ASP.NET Core.

A kiszolgálóoldali alkalmazások nem tartalmaznak HttpClient szolgáltatást. Adjon meg egy HttpClient az alkalmazásnak a HttpClient gyári infrastruktúrahasználatával.

A Program fájlban:

builder.Services.AddHttpClient();

Az alábbi Razor összetevő egy kérést küld egy webes API-hoz a GitHub-ágak lekéréséhez, hasonlóan az Alapszintű használat példához a HTTP-kérések készítése IHttpClientFactory használatával az ASP.NET Core cikkben.

CallWebAPI.razor:

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject IHttpClientFactory ClientFactory

<h1>Call web API from a server-side 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()
    {
        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");

        var client = ClientFactory.CreateClient();

        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; }
    }
}

Az előző C# 12 vagy újabb példában egy üres tömb ([]) jön létre a branches változóhoz. A .NET 8-nál korábbi SDK-val lefordított C# korábbi verzióihoz hozzon létre egy üres tömböt (Array.Empty<GitHubBranch>()).

További működő példaként tekintse meg azt a kiszolgálóoldali fájlfeltöltési példát, amely fájlokat tölt fel egy webes API-vezérlőbe a ASP.NET Core Blazor fájlfeltöltési cikkben.

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

var response = await Http.SendAsync(request);

A HttpClient szolgáltatás hozzáadása

Az ebben a szakaszban található útmutatás az ügyféloldali forgatókönyvekre vonatkozik.

Az ügyféloldali összetevők webes API-kat hívnak meg egy előre konfigurált HttpClient szolgáltatás használatával, amelynek célja a kérések visszahívása a forráskiszolgálóra. A fejlesztői kódban további HttpClient szolgáltatáskonfigurációk hozhatók létre más webes API-khoz. A kérelmek Blazor JSON-segítők vagy HttpRequestMessagesegítségével állnak össze. A kérelmek tartalmazhatnak Fetch API beállításkonfigurációt.

Az ebben a szakaszban szereplő konfigurációs példák csak akkor hasznosak, ha egyetlen webes API-t hív meg egyetlen HttpClient-példányhoz az alkalmazásban. Ha az alkalmazásnak több webes API-t kell meghívnia, amelyek mindegyike saját alapcímmel és konfigurációval rendelkezik, a következő megközelítéseket alkalmazhatja, amelyekről a cikk későbbi részében olvashat:

• Nevezzük el HttpClient-nek a(z) IHttpClientFactory-at: Minden webes API egyedi nevet kap. Amikor egy alkalmazáskód vagy egy Razor összetevő meghív egy webes API-t, egy elnevezett HttpClient-példányt használ a hívás indításához.
• Tipizált HttpClient: Minden web-API típusosan van definiálva. Amikor egy alkalmazáskód vagy egy Razor összetevő webes API-t hív meg, egy beírt HttpClient-példányt használ a hívás indításához.

A Program fájlban adjon hozzá egy HttpClient szolgáltatást, ha még nem található meg az alkalmazás létrehozásához használt Blazor projektsablonból:

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

Az előző példa az alapcímet builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) értékre állítja. Ez meghatározza az alkalmazás alapcímét, amely jellemzően a gazdagépoldal <base> címke href értékéből származik.

Az ügyfél saját alapcímének használatára a leggyakoribb használati esetek a következők:

• Egy .Client (.NET 8 vagy újabb) ügyfélprojektje (Blazor Web App) webes API-hívásokat indít a WebAssembly-összetevőkről vagy a WebAssembly-ügyfélen futó kódról a kiszolgálóalkalmazás API-jaira.
• Egy üzemeltetett Client-alkalmazás ügyfélprojektje (Blazor WebAssembly) webes API-hívásokat indít a kiszolgálóprojekthez (Server). Vegye figyelembe, hogy a üzemeltetett Blazor WebAssembly projektsablon már nem érhető el a .NET 8-as vagy újabb verzióiban. A üzemeltetett Blazor WebAssembly-alkalmazások azonban továbbra is támogatottak maradnak a .NET 8-hoz.

Ha külső webes API-t hív meg (nem ugyanabban az URL-térben, mint az ügyfélalkalmazás), állítsa be az URI-t a webes API alapcímére. Az alábbi példa a webes API alapcímét https://localhost:5001értékre állítja, ahol egy külön web API-alkalmazás fut, és készen áll az ügyfélalkalmazás kéréseire való válaszadásra:

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

JSON-segítők

HttpClient előre konfigurált szolgáltatásként érhető el a kérések forráskiszolgálóra való visszahívásához.

HttpClient és JSON-segítők (System.Net.Http.Json.HttpClientJsonExtensions) külső webes API-végpontok meghívására is használhatók. HttpClient a böngésző Fetch API használatával van megvalósítva, és annak korlátozásai alá esik, beleértve az azonos eredet politikájának érvényesítését, amelyről a forrásközi erőforrás-megosztás (CORS) szakaszban, ebben a cikkben később részletesen lesz szó.

Az ügyfél alapcíme az eredeti kiszolgáló címére van állítva. Szúrjon be egy HttpClient-példányt egy összetevőbe a @inject irányelv használatával:

@using System.Net.Http
@inject HttpClient Http

Használja a System.Net.Http.Json névteret a HttpClientJsonExtensionseléréséhez, beleértve GetFromJsonAsync, PutAsJsonAsyncés PostAsJsonAsync:

@using System.Net.Http.Json

A következő szakaszok a JSON-segítőket ismertetik:

• GET
• POST
• PUT
• Patch

System.Net.Http további módszereket is tartalmaz a HTTP-kérések küldéséhez és a HTTP-válaszok fogadásához, például a DELETE kérések küldéséhez. További információkért lásd a DELETE és bővítménymódszerek szakaszt.

GET a JSON-ból (GetFromJsonAsync)

GetFromJsonAsync HTTP GET-kérést küld, és elemzi a JSON-válasz törzsét egy objektum létrehozásához.

A következő komponenskódban a todoItems-et az összetevő jeleníti meg. GetFromJsonAsync akkor hívjuk meg, ha az összetevő inicializálása befejeződött (OnInitializedAsync).

todoItems = await Http.GetFromJsonAsync<TodoItem[]>("todoitems");

POST JSON formátumban (PostAsJsonAsync)

PostAsJsonAsync post kérést küld a megadott URI-nak, amely tartalmazza a kérelem törzsében JSON-ként szerializált értéket.

A következő komponenskódban a newItemName egy kötött elem által van biztosítva. A AddItem metódus egy <button> elem kiválasztásával aktiválódik.

await Http.PostAsJsonAsync("todoitems", addItem);

PostAsJsonAsync visszaad egy HttpResponseMessage. A válaszüzenet JSON-tartalmának deszerializálásához használja a ReadFromJsonAsync bővítménymetódust. Az alábbi példa a JSON időjárási adatait tömbként olvassa be:

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

PUT as JSON (PutAsJsonAsync)

PutAsJsonAsync JSON-kódolt tartalommal http PUT-kérést küld.

A következő összetevőkódban editItemName és IsCompleted értékeit az összetevő kötött elemei adják meg. Az elem Id akkor van beállítva, ha az elem ki van jelölve a felhasználói felület egy másik részén (nem jelenik meg), és meghívja EditItem. A SaveItem metódus a <button> elem kiválasztásával aktiválódik. Az alábbi példa nem jeleníti meg a todoItems betöltését a tömörség kedvéért. Példát az elemek betöltésére a GET from JSON (GetFromJsonAsync) szakaszban talál.

await Http.PutAsJsonAsync($"todoitems/{editItem.Id}", editItem);

PutAsJsonAsync visszaad egy HttpResponseMessage. A válaszüzenet JSON-tartalmának deszerializálásához használja a ReadFromJsonAsync bővítménymetódust. Az alábbi példa a JSON időjárási adatait tömbként olvassa be:

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

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

@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);
}

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

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

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

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

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

using Microsoft.AspNetCore.JsonPatch;

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.NoContent();
});

DELETE (DeleteAsync) és további bővítőmódszerek

System.Net.Http további bővítménymetelyeket is tartalmaz a HTTP-kérések küldéséhez és a HTTP-válaszok fogadásához. HttpClient.DeleteAsync HTTP DELETE-kérés webes API-nak való elküldésére szolgál.

Az alábbi összetevőkódban a <button> elem meghívja a DeleteItem metódust. A kötött <input> elem adja meg a törlendő elem id értékét.

await Http.DeleteAsync($"todoitems/{id}");

Elnevezett HttpClientIHttpClientFactory

A IHttpClientFactory szolgáltatások és a megnevezett HttpClient konfiguráció támogatott.

Adja hozzá a Microsoft.Extensions.Http NuGet-csomagot az alkalmazáshoz.

Egy ügyfélprojekt Program fájljában:

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

Az előző kliensoldali példa az alapcímet builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) értékre állítja, amely meghatározza a kliensoldali alkalmazás alapcímét, és amely általában a hoszt oldal <base> címkéjének href értékéből származik.

Ha külső webes API-t hív meg (nem ugyanabban az URL-címen, mint az ügyfélalkalmazás), vagy egy kiszolgálóoldali alkalmazásban konfigurálja a szolgáltatásokat (például az ügyféloldali összetevők előrendelésével foglalkozik a kiszolgálón), állítsa be az URI-t a webes API alapcímére. Az alábbi példa a webes API alapcímét https://localhost:5001értékre állítja, ahol egy külön web API-alkalmazás fut, és készen áll az ügyfélalkalmazás kéréseire való válaszadásra:

builder.Services.AddHttpClient("WebAPI", client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

Az alábbi összetevőkódban:

• A IHttpClientFactory példánya létrehoz egy elnevezett HttpClient.
• A HttpClient nevű elemet használják arra, hogy GET kérést küldjön JSON formátumú időjárás-előrejelzés adatokért a web API-tól a /forecast webcímén.

@inject IHttpClientFactory ClientFactory

...

@code {
    private Forecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        var client = ClientFactory.CreateClient("WebAPI");

        forecasts = await client.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
    }
}

Gépelt HttpClient

A beírt HttpClient az alkalmazás egy vagy több alapértelmezett vagy elnevezett HttpClient példányát használja egy vagy több webes API-végpont adatainak visszaadásához.

Adja hozzá a Microsoft.Extensions.Http NuGet-csomagot az alkalmazáshoz.

Az alábbi példa GET kérést küld a webes API-hoz, hogy JSON formátumú időjárás-előrejelzési adatokat kapjon a /forecast-ból.

ForecastHttpClient.cs:

using System.Net.Http.Json;

namespace BlazorSample.Client;

public class ForecastHttpClient(HttpClient http)
{
    public async Task<Forecast[]> GetForecastAsync() => 
        await http.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
}

Egy ügyfélprojekt Program fájljában:

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));

Az előző példa beállítja az alapcímet builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) értékre, amely az ügyféloldali alkalmazás alapcímét lekéri, és általában a gazdahonlap <base> címkéjének href értékéből kerül levezetésre.

Ha külső webes API-t hív meg (nem ugyanabban az URL-címen, mint az ügyfélalkalmazás), vagy egy kiszolgálóoldali alkalmazásban konfigurálja a szolgáltatásokat (például az ügyféloldali összetevők előrendelésével foglalkozik a kiszolgálón), állítsa be az URI-t a webes API alapcímére. Az alábbi példa a webes API alapcímét https://localhost:5001értékre állítja, ahol egy külön web API-alkalmazás fut, és készen áll az ügyfélalkalmazás kéréseire való válaszadásra:

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

Az összetevők a típusos HttpClient-t injektálják a webes API meghívásához.

Az alábbi összetevőkódban:

• Az előző ForecastHttpClient egy példánya van beinjektálva, amely egy típusos HttpClient-et hoz létre.
• A beírt HttpClient a webes API-ból származó JSON időjárás-előrejelzési adatokra vonatkozó GET-kérés kiállítására szolgál.

@inject ForecastHttpClient Http

...

@code {
    private Forecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetForecastAsync();
    }
}

Cookie-alapú kérés hitelesítési adatok

Az ebben a szakaszban található útmutatás olyan ügyféloldali forgatókönyvekre vonatkozik, amelyek hitelesítési cookiealapulnak.

Az cookie-alapú hitelesítés esetében, amelyet biztonságosabbnak tartanak, mint a bearer token hitelesítést, a cookie hitelesítő adatok minden webes API-kéréshez elküldhetők a AddHttpMessageHandler hívásával egy előre konfigurált DelegatingHandler-en a HttpClient használatával. A kezelő a SetBrowserRequestCredentials-t konfigurálja a BrowserRequestCredentials.Include-el, amely azt javasolja a böngészőnek, hogy minden kéréshez küldjön hitelesítő adatokat, például cookie-kat vagy HTTP-hitelesítési fejléceket, beleértve a kereszt-domain kéréseket is.

CookieHandler.cs:

public class CookieHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        request.Headers.Add("X-Requested-With", [ "XMLHttpRequest" ]);

        return base.SendAsync(request, cancellationToken);
    }
}

A CookieHandler regisztrálva van a Program fájlban:

builder.Services.AddTransient<CookieHandler>();

Az üzenetkezelő hozzáadódik minden olyan előre konfigurált HttpClient-hoz, amely(ek) cookie hitelesítést igényel(nek).

builder.Services.AddHttpClient(...)
    .AddHttpMessageHandler<CookieHandler>();

Amikor egy HttpRequestMessage-t készít, közvetlenül állítsa be a böngésző kérésének hitelesítő adatait és fejlécét:

var requestMessage = new HttpRequestMessage() { ... };

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
requestMessage.Headers.Add("X-Requested-With", [ "XMLHttpRequest" ]);

HttpClient és HttpRequestMessage a Fetch API kéréshez tartozó opciókkal

Az ebben a szakaszban szereplő útmutatás a tulajdonosi jogkivonat-hitelesítésre támaszkodó ügyféloldali forgatókönyvekre vonatkozik.

HttpClient (API dokumentációja) és HttpRequestMessage használhatók a kérések testreszabásához. Megadhatja például a HTTP-metódust és a kérelemfejléceket. Az alábbi összetevő egy POST kérést küld egy webes API-végpontra, és megjeleníti a válasz törzsét.

TodoRequest.razor:

@page "/todo-request"
@using System.Net.Http.Headers
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject HttpClient Http
@inject IAccessTokenProvider TokenProvider

<h1>ToDo Request</h1>

<h1>ToDo Request Example</h1>

<button @onclick="PostRequest">Submit POST request</button>

<p>Response body returned by the server:</p>

<p>@responseBody</p>

@code {
    private string? responseBody;

    private async Task PostRequest()
    {
        var requestMessage = new HttpRequestMessage()
        {
            Method = new HttpMethod("POST"),
            RequestUri = new Uri("https://localhost:10000/todoitems"),
            Content =
                JsonContent.Create(new TodoItem
                {
                    Name = "My New Todo Item",
                    IsComplete = false
                })
        };

        var tokenResult = await TokenProvider.RequestAccessToken();

        if (tokenResult.TryGetToken(out var token))
        {
            requestMessage.Headers.Authorization =
                new AuthenticationHeaderValue("Bearer", token.Value);

            requestMessage.Content.Headers.TryAddWithoutValidation(
                "x-custom-header", "value");

            var response = await Http.SendAsync(requestMessage);
            var responseStatusCode = response.StatusCode;

            responseBody = await response.Content.ReadAsStringAsync();
        }
    }

    public class TodoItem
    {
        public long Id { get; set; }
        public string? Name { get; set; }
        public bool IsComplete { get; set; }
    }
}

Blazor HttpClient ügyféloldali implementációja a Fetch API használatára épül, és a bővítménymódszerekkel és a HttpRequestMessage segítségével konfigurálja a mögöttes WebAssemblyHttpRequestMessageExtensions. Adjon meg további beállításokat az általános SetBrowserRequestOption bővítménymetódus használatával. Blazor és az alapul szolgáló Fetch API nem ad hozzá vagy módosít közvetlenül kérésfejléceket. A felhasználói ügynökök, például a böngészők és a fejlécek használatáról a külső felhasználói ügynök dokumentációs készletei és egyéb webes erőforrások segítségével tájékozódhat.

A HTTP-válasz általában pufferelt, így lehetővé válik a szinkron olvasás támogatása a választartalomon. A válaszstreamelés támogatásának engedélyezéséhez használja a kérelem SetBrowserResponseStreamingEnabled bővítménymetódusát.

Ha hitelesítő adatokat szeretne szerepeltetni egy forrásközi kérelemben, használja a SetBrowserRequestCredentials bővítménymetódust:

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

További információ a Fetch API beállításairól: MDN webes dokumentáció: WindowOrWorkerGlobalScope.fetch(): Paraméterek.

Hibák kezelése

A webes API válaszhibáinak kezelése a fejlesztői kódban, amikor azok előfordulnak. Például a GetFromJsonAsync egy JSON-választ vár a Content-Typeapplication/json-től a webes API-n keresztül. Ha a válasz nem JSON formátumban van, a tartalomérvényesítés NotSupportedExceptioneredményez.

Az alábbi példában az időjárás-előrejelzési adatkérelem URI-végpontja hibás. Az URI-nak WeatherForecast kell lennie, de WeatherForcastnéven jelenik meg a hívásban, és hiányzik belőle a eForecast betűje.

A GetFromJsonAsync hívásnál JSON visszaadása várható, de egy nem kezelt kivétel esetén a webes API HTML-t ad vissza Content-Typetext/html értékkel. A kezeletlen kivétel azért fordul elő, mert a /WeatherForcast elérési útja nem található, és a köztes szoftver nem tudja kiszolgálni a kérés lapját vagy nézetét.

Az OnInitializedAsync ügyfélnél NotSupportedException akkor generálódik, amikor a válasz tartalmát érvénytelenként azonosítják, mivel nem JSON. A kivétel a catch blokkban jelenik meg, ahol az egyéni logika naplózhatja a hibát, vagy egy rövid hibaüzenetet jeleníthet meg a felhasználónak.

ReturnHTMLOnException.razor:

@page "/return-html-on-exception"
@using {PROJECT NAME}.Shared
@inject HttpClient Http

<h1>Fetch data but receive HTML on unhandled exception</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <h2>Temperatures by Date</h2>

    <ul>
        @foreach (var forecast in forecasts)
        {
            <li>
                @forecast.Date.ToShortDateString():
                @forecast.TemperatureC &#8451;
                @forecast.TemperatureF &#8457;
            </li>
        }
    </ul>
}

<p>
    @exceptionMessage
</p>

@code {
    private WeatherForecast[]? forecasts;
    private string? exceptionMessage;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // The URI endpoint "WeatherForecast" is misspelled on purpose on the 
            // next line. See the preceding text for more information.
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForcast");
        }
        catch (NotSupportedException exception)
        {
            exceptionMessage = exception.Message;
        }
    }
}

További információ: ASP.NET Core Blazor-alkalmazások hibáinak kezelése.

Forrásközi erőforrás-megosztás (CORS)

A böngésző biztonsága gyakran korlátozza, hogy egy weblap kéréseket küldjön a weblapot kézbesítőtől eltérő forrásra. Ezt a korlátozást azonos eredetű szabálynaknevezzük. Az azonos eredetű házirend korlátozza (de nem akadályozza meg) a rosszindulatú webhelyet abban, hogy bizalmas adatokat olvasson egy másik webhelyről. Ha a böngészőből egy másik forrású végpontra szeretne kéréseket küldeni, a végpontnak engedélyeznie kell forrásközi erőforrásmegosztást (CORS).

További információ a szerveroldali CORS-ról: lásd Kereszt-eredetű kérelmek engedélyezése (CORS) az ASP.NET Core-ban. A cikk példái nem közvetlenül Razor összetevő-forgatókönyvekre vonatkoznak, de a cikk hasznos az általános CORS-fogalmak megismeréséhez.

Az ügyféloldali CORS-kérelmekkel kapcsolatos információkért lásd ASP.NET Core Blazor WebAssembly további biztonsági forgatókönyveket.

@inject AntiforgeryStateProvider Antiforgery

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

Blazor keretrendszerösszetevő-példák a webes API-hozzáférés teszteléséhez

Különböző hálózati eszközök érhetők el nyilvánosan a webes API háttéralkalmazások közvetlen teszteléséhez, például Firefox Browser Developer. Blazor keretrendszer referenciaforrása HttpClient teszteléshez hasznos teszteszközöket tartalmaz:

HttpClientTest elemek a dotnet/aspnetcore GitHub-adattárban

További erőforrások

Általános

• Kereszt-eredetű Erőforrás-megosztás (CORS) a W3C-nél
• Határokon átnyúló kérelmek (CORS) engedélyezése a ASP.NET Core: Bár a tartalom ASP.NET Core-alkalmazásokra vonatkozik, nem Razor összetevőkre, a cikk az általános CORS-fogalmakat ismerteti.

A túladatküldési támadások enyhítése

A webes API-k sebezhetők lehetnek egy túlpostázó támadással szemben, más néven tömeges hozzárendelési támadással szemben. A túlpostolásos támadás akkor fordul elő, ha egy rosszindulatú felhasználó egy POST HTML-űrlapot ad ki a kiszolgálónak, amely olyan tulajdonságok adatait dolgozza fel, amelyek nem részei a renderelt űrlapnak, és hogy a fejlesztő nem kívánja engedélyezni a felhasználók számára a módosítást. A "túlposztolás" kifejezés szó szerint azt jelenti, hogy a rosszindulatú felhasználó túl-POSTolt az űrlappal.

A túlpostolásos támadások mérséklésével kapcsolatos útmutatásért tekintse meg az Oktatóanyag: Vezérlőalapú webes API létrehozása az ASP.NET Core-n.

Kiszolgálóoldali

• ASP.NET Alapvető kiszolgálóoldali és Blazor Web App további biztonsági forgatókönyvek: Kiterjed a HttpClient biztonságos webes API-kérések készítésére való használatára.
• HTTP-kérések létrehozása az IHttpClientFactory használatával a ASP.NET Core
• HTTPS érvényesítése az ASP.NET Core-ban
• Kestrel HTTPS-végpont konfiguráció

Ügyféloldali

• ASP.NET Alapvető Blazor WebAssembly további biztonsági forgatókönyvek: A HttpClient biztonságos webes API-kérések készítésére vonatkozó lefedettséget tartalmazza.
• Graph API használata ASP.NET Core Blazor WebAssembly
• API lekérése