Skip to content

Commit 682fc99

Browse files
guardrexguardrex
authored
[Preview 5] Blazor Preview 5 updates (#17971)
1 parent f820e49 commit 682fc99

15 files changed

Lines changed: 186 additions & 29 deletions

‎aspnetcore/blazor/call-web-api.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to call a web API from a Blazor WebAssembly app using JSO
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 04/19/2020
8+
ms.date: 04/23/2020
99
no-loc: [Blazor, SignalR]
1010
uid: blazor/call-web-api
1111
---
@@ -216,6 +216,19 @@ When running on WebAssembly in a Blazor WebAssembly app, use [HttpClient](xref:f
216216
}
217217
```
218218

219+
HTTP fetch request options can be configured with `HttpRequestMessage` extension methods shown in the following table.
220+
221+
| `HttpRequestMessage` extension method | Fetch request property |
222+
| ------------------------------------- | ---------------------- |
223+
| `SetBrowserRequestCredentials` | [credentials](https://developer.mozilla.org/docs/Web/API/Request/credentials) |
224+
| `SetBrowserRequestCache` | [cache](https://developer.mozilla.org/docs/Web/API/Request/cache) |
225+
| `SetBrowserRequestMode` | [mode](https://developer.mozilla.org/docs/Web/API/Request/mode) |
226+
| `SetBrowserRequestIntegrity` | [integrity](https://developer.mozilla.org/docs/Web/API/Request/integrity) |
227+
228+
You can set additional options using the more generic `SetBrowserRequestOption` extension method.
229+
230+
The HTTP response is typically buffered in a Blazor WebAssembly app to enable support for sync reads on the response content. To enable support for response streaming, use the `SetBrowserResponseStreamingEnabled` extension method on the request.
231+
219232
For more information on Fetch API options, see [MDN web docs: WindowOrWorkerGlobalScope.fetch():Parameters](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters).
220233

221234
When sending credentials (authorization cookies/headers) on CORS requests, the `Authorization` header must be allowed by the CORS policy.
@@ -239,6 +252,8 @@ For more information, see <xref:security/cors> and the sample app's HTTP Request
239252

240253
## Additional resources
241254

255+
* [Request additional access tokens](xref:security/blazor/webassembly/additional-scenarios#request-additional-access-tokens)
256+
* [Attach tokens to outgoing requests](xref:security/blazor/webassembly/additional-scenarios#attach-tokens-to-outgoing-requests)
242257
* <xref:fundamentals/http-requests>
243258
* <xref:security/enforcing-ssl>
244259
* [Kestrel HTTPS endpoint configuration](xref:fundamentals/servers/kestrel#endpoint-configuration)

‎aspnetcore/blazor/get-started.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ To get started with Blazor, follow the guidance for your choice of tooling:
2828
1. Install the [Blazor WebAssembly](xref:blazor/hosting-models#blazor-webassembly) preview template by running the following command:
2929

3030
```dotnetcli
31-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview4.20210.8
31+
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8
3232
```
3333

3434
1. Create a new project.
@@ -48,7 +48,7 @@ To get started with Blazor, follow the guidance for your choice of tooling:
4848
1. Optionally install the [Blazor WebAssembly](xref:blazor/hosting-models#blazor-webassembly) preview template by running the following command:
4949

5050
```dotnetcli
51-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview4.20210.8
51+
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8
5252
```
5353

5454
> [!NOTE]
@@ -111,7 +111,7 @@ If a prompt appears to trust the development certificate, trust the certificate
111111
1. Optionally install the [Blazor WebAssembly](xref:blazor/hosting-models#blazor-webassembly) preview template by running the following command:
112112

113113
```dotnetcli
114-
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview4.20210.8
114+
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8
115115
```
116116

117117
> [!NOTE]

‎aspnetcore/host-and-deploy/blazor/webassembly.md‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to host and deploy a Blazor app using ASP.NET Core, Conte
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 04/22/2020
8+
ms.date: 04/23/2020
99
no-loc: [Blazor, SignalR]
1010
uid: host-and-deploy/blazor/webassembly
1111
---
@@ -94,19 +94,7 @@ When a Blazor project is published, a *web.config* file is created with the foll
9494

9595
#### Use a custom web.config
9696

97-
To use a custom *web.config* file:
98-
99-
1. Place the custom *web.config* file at the root of the project folder.
100-
1. Add the following target to the project file (*.csproj*):
101-
102-
```xml
103-
<Target Name="CopyWebConfigOnPublish" AfterTargets="Publish">
104-
<Copy SourceFiles="web.config" DestinationFolder="$(PublishDir)" />
105-
</Target>
106-
```
107-
108-
> [!NOTE]
109-
> Use of the MSBuild property `<IsWebConfigTransformDisabled>` set to `true` isn't supported in Blazor WebAssembly apps [as it is for ASP.NET Core apps deployed to IIS](xref:host-and-deploy/iis/index#webconfig-file). For more information, see [Copy target required to provide custom Blazor WASM web.config (dotnet/aspnetcore #20569)](https://github.com/dotnet/aspnetcore/issues/20569).
97+
To use a custom *web.config* file, place the custom *web.config* file at the root of the project folder and publish the project.
11098

11199
#### Install the URL Rewrite Module
112100

‎aspnetcore/includes/blazorwasm-3.2-template-article-notice.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
> [!NOTE]
2-
> The guidance in this article applies to the ASP.NET Core Blazor WebAssembly template version 3.2 or later. To obtain the latest Blazor WebAssembly template (version `3.2.0-preview4.20210.8`) when not using Visual Studio version 16.6 Preview 2 or later, see <xref:blazor/get-started>.
2+
> The guidance in this article applies to the ASP.NET Core Blazor WebAssembly template version 3.2 or later. To obtain the latest Blazor WebAssembly template (version `3.2.0-preview5.20216.8`) when not using Visual Studio version 16.6 Preview 2 or later, see <xref:blazor/get-started>.

‎aspnetcore/includes/blazorwasm-3.2-template-section-notice.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
> [!NOTE]
2-
> The guidance in this section applies to the ASP.NET Core Blazor WebAssembly template version 3.2 or later. To obtain the latest Blazor WebAssembly template (version `3.2.0-preview4.20210.8`) when not using Visual Studio version 16.6 Preview 2 or later, see <xref:blazor/get-started>.
2+
> The guidance in this section applies to the ASP.NET Core Blazor WebAssembly template version 3.2 or later. To obtain the latest Blazor WebAssembly template (version `3.2.0-preview5.20216.8`) when not using Visual Studio version 16.6 Preview 2 or later, see <xref:blazor/get-started>.

‎aspnetcore/security/blazor/webassembly/additional-scenarios.md‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description:
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 04/22/2020
8+
ms.date: 04/23/2020
99
no-loc: [Blazor, SignalR]
1010
uid: security/blazor/webassembly/additional-scenarios
1111
---
@@ -17,6 +17,9 @@ By [Javier Calvarro Nelson](https://github.com/javiercn)
1717

1818
[!INCLUDE[](~/includes/blazorwasm-3.2-template-article-notice.md)]
1919

20+
> [!NOTE]
21+
> The guidance in this article applies to ASP.NET Core 3.2 Preview 4. This topic will be updated to cover Preview 5 on Friday, April 24.
22+
2023
## Request additional access tokens
2124

2225
Most apps only require an access token to interact with the protected resources that they use. In some scenarios, an app might require more than one token in order to interact with two or more resources.
@@ -56,6 +59,108 @@ if (tokenResult.TryGetToken(out var token))
5659
* `true` with the `token` for use.
5760
* `false` if the token isn't retrieved.
5861

62+
## Attach tokens to outgoing requests
63+
64+
The `AuthorizationMessageHandler` service can be used with `HttpClient` to attach access tokens to outgoing requests. Tokens are acquired using the existing `IAccessTokenProvider` service. If a token can't be acquired, an `AccessTokenNotAvailableException` is thrown. `AccessTokenNotAvailableException` has a `Redirect` method that can be used to navigate the user to the identity provider to acquire a new token. The `AuthorizationMessageHandler` can be configured with the authorized URLs, scopes, and return URL using the `ConfigureHandler` method.
65+
66+
In the following example, `AuthorizationMessageHandler` configures an `HttpClient` in `Program.Main` (*Program.cs*):
67+
68+
```csharp
69+
builder.Services.AddSingleton(sp =>
70+
{
71+
return new HttpClient(sp.GetRequiredService<AuthorizationMessageHandler>()
72+
.ConfigureHandler(
73+
new [] { "https://www.example.com/base" },
74+
scopes: new[] { "example.read", "example.write" }))
75+
{
76+
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
77+
};
78+
});
79+
```
80+
81+
For convenience, a `BaseAddressAuthorizationMessageHandler` is included that's preconfigured with the app base address as an authorized URL. The authentication-enabled Blazor WebAssembly templates now use [IHttpClientFactory](https://docs.microsoft.com/aspnet/core/fundamentals/http-requests) to set up an `HttpClient` with the `BaseAddressAuthorizationMessageHandler`:
82+
83+
```csharp
84+
builder.Services.AddHttpClient("BlazorWithIdentityApp1.ServerAPI",
85+
client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
86+
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
87+
88+
builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWithIdentityApp1.ServerAPI"));
89+
```
90+
91+
Where the client is created with `CreateClient` in the preceding example, the `HttpClient` is supplied instances that include access tokens when making requests to the server project.
92+
93+
The configured `HttpClient` is then used to make authorized requests using a simple `try-catch` pattern. The following `FetchData` component requests weather forecast data:
94+
95+
```csharp
96+
protected override async Task OnInitializedAsync()
97+
{
98+
try
99+
{
100+
forecasts =
101+
await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
102+
}
103+
catch (AccessTokenNotAvailableException exception)
104+
{
105+
exception.Redirect();
106+
}
107+
}
108+
```
109+
110+
Alternatively, you can define a typed client that handles all of the HTTP and token acquisition concerns within a single class:
111+
112+
*WeatherClient.cs*:
113+
114+
```csharp
115+
public class WeatherClient
116+
{
117+
private readonly HttpClient httpClient;
118+
119+
public WeatherClient(HttpClient httpClient)
120+
{
121+
this.httpClient = httpClient;
122+
}
123+
124+
public async Task<IEnumerable<WeatherForecast>> GetWeatherForeacasts()
125+
{
126+
IEnumerable<WeatherForecast> forecasts = new WeatherForecast[0];
127+
128+
try
129+
{
130+
forecasts = await httpClient.GetFromJsonAsync<WeatherForecast[]>(
131+
"WeatherForecast");
132+
}
133+
catch (AccessTokenNotAvailableException exception)
134+
{
135+
exception.Redirect();
136+
}
137+
138+
return forecasts;
139+
}
140+
}
141+
```
142+
143+
*Program.cs*:
144+
145+
```csharp
146+
builder.Services.AddHttpClient<WeatherClient>(
147+
client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
148+
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
149+
```
150+
151+
*FetchData.razor*:
152+
153+
```razor
154+
@inject WeatherClient WeatherClient
155+
156+
...
157+
158+
protected override async Task OnInitializedAsync()
159+
{
160+
forecasts = await WeatherClient.GetWeatherForeacasts();
161+
}
162+
```
163+
59164
## Handle token request errors
60165

61166
When a Single Page Application (SPA) authenticates a user using Open ID Connect (OIDC), the authentication state is maintained locally within the SPA and in the Identity Provider (IP) in the form of a session cookie that's set as a result of the user providing their credentials.

‎aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory-b2c.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description:
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 04/22/2020
8+
ms.date: 04/23/2020
99
no-loc: [Blazor, SignalR]
1010
uid: security/blazor/webassembly/hosted-with-azure-active-directory-b2c
1111
---
@@ -17,6 +17,9 @@ By [Javier Calvarro Nelson](https://github.com/javiercn) and [Luke Latham](https
1717

1818
[!INCLUDE[](~/includes/blazorwasm-3.2-template-article-notice.md)]
1919

20+
> [!NOTE]
21+
> The guidance in this article applies to ASP.NET Core 3.2 Preview 4. This topic will be updated to cover Preview 5 on Friday, April 24.
22+
2023
This article describes how to create a Blazor WebAssembly standalone app that uses [Azure Active Directory (AAD) B2C](/azure/active-directory-b2c/overview) for authentication.
2124

2225
## Register apps in AAD B2C and create solution
@@ -262,6 +265,10 @@ builder.Services.AddMsalAuthentication(options =>
262265
263266
For more information, see <xref:security/blazor/webassembly/additional-scenarios#request-additional-access-tokens>.
264267
268+
<!--
269+
For more information, see <xref:security/blazor/webassembly/additional-scenarios#attach-tokens-to-outgoing-requests>.
270+
-->
271+
265272
### Imports file
266273
267274
[!INCLUDE[](~/includes/blazor-security/imports-file-hosted.md)]

‎aspnetcore/security/blazor/webassembly/hosted-with-azure-active-directory.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description:
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: riande
77
ms.custom: mvc
8-
ms.date: 04/22/2020
8+
ms.date: 04/23/2020
99
no-loc: [Blazor, SignalR]
1010
uid: security/blazor/webassembly/hosted-with-azure-active-directory
1111
---
@@ -17,6 +17,9 @@ By [Javier Calvarro Nelson](https://github.com/javiercn) and [Luke Latham](https
1717

1818
[!INCLUDE[](~/includes/blazorwasm-3.2-template-article-notice.md)]
1919

20+
> [!NOTE]
21+
> The guidance in this article applies to ASP.NET Core 3.2 Preview 4. This topic will be updated to cover Preview 5 on Friday, April 24.
22+
2023
This article describes how to create a [Blazor WebAssembly hosted app](xref:blazor/hosting-models#blazor-webassembly) that uses [Azure Active Directory (AAD)](https://azure.microsoft.com/services/active-directory/) for authentication.
2124

2225
## Register apps in AAD B2C and create solution
@@ -250,6 +253,10 @@ builder.Services.AddMsalAuthentication(options =>
250253
251254
For more information, see <xref:security/blazor/webassembly/additional-scenarios#request-additional-access-tokens>.
252255
256+
<!--
257+
For more information, see <xref:security/blazor/webassembly/additional-scenarios#attach-tokens-to-outgoing-requests>.
258+
-->
259+
253260
### Imports file
254261
255262
[!INCLUDE[](~/includes/blazor-security/imports-file-hosted.md)]

‎aspnetcore/security/blazor/webassembly/hosted-with-identity-server.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ By [Javier Calvarro Nelson](https://github.com/javiercn) and [Luke Latham](https
1717

1818
[!INCLUDE[](~/includes/blazorwasm-3.2-template-article-notice.md)]
1919

20+
> [!NOTE]
21+
> The guidance in this article applies to ASP.NET Core 3.2 Preview 4. This topic will be updated to cover Preview 5 on Friday, April 24.
22+
2023
To create a new Blazor hosted app in Visual Studio that uses [IdentityServer](https://identityserver.io/) to authenticate users and API calls:
2124

2225
1. Use Visual Studio to create a new **Blazor WebAssembly** app. For more information, see <xref:blazor/get-started>.

‎aspnetcore/security/blazor/webassembly/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ By [Javier Calvarro Nelson](https://github.com/javiercn)
1717

1818
[!INCLUDE[](~/includes/blazorwasm-3.2-template-article-notice.md)]
1919

20+
> [!NOTE]
21+
> The guidance in this article applies to ASP.NET Core 3.2 Preview 4. This topic will be updated to cover Preview 5 on Friday, April 24.
22+
2023
Blazor WebAssembly apps are secured in the same manner as Single Page Applications (SPAs). There are several approaches for authenticating users to SPAs, but the most common and comprehensive approach is to use an implementation based on the [OAuth 2.0 protocol](https://oauth.net/), such as [Open ID Connect (OIDC)](https://openid.net/connect/).
2124

2225
## Authentication library

0 commit comments

Comments
 (0)