Blazor WebAssembly 3.2.0 Preview 5 release now available

Blazor WebAssembly 3.2.0 Preview 5 release now available

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>April 23rd, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>A new preview update of Blazor WebAssembly is now available! Here’s what’s new in this release:</p>
<ul>
<li>Read configuration during startup</li>
<li>Configure HTTP fetch request options</li>
<li>Honor existing web.config when publishing</li>
<li>Attach tokens to outgoing requests</li>
<li>Support for time zones</li>
</ul>
<h2>Get started</h2>
<p>To get started with Blazor WebAssembly 3.2.0 Preview 5 install the latest <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">.NET Core 3.1 SDK</a>.</p>
<blockquote>
<p>NOTE: Version 3.1.201 or later of the .NET Core SDK is <strong>required</strong> to use this Blazor WebAssembly release! Make sure you have the correct .NET Core SDK version by running <code>dotnet --version</code> from a command prompt.</p>
</blockquote>
<p>Once you have the appropriate .NET Core SDK installed, run the following command to install the updated Blazor WebAssembly template:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8
</code></pre>
<p>If you’re on Windows using Visual Studio, we recommend <a href="https://visualstudio.com/preview">installing the latest preview of Visual Studio 2019 16.6</a>. For this preview, you should still install the template from the command-line as described above to ensure that the Blazor WebAssembly template shows up correctly in Visual Studio and on the command-line.</p>
<p>That’s it! You can find additional docs and samples on <a href="https://blazor.net">https://blazor.net</a>.</p>
<h2>Upgrade an existing project</h2>
<p>To upgrade an existing Blazor WebAssembly app from 3.2.0 Preview 4 to 3.2.0 Preview 5:</p>
<ul>
<li>Update all Microsoft.AspNetCore.Components.WebAssembly.* package references to version 3.2.0-preview5.20216.8.</li>
<li>Update any Microsoft.AspNetCore.Components.WebAssembly.Runtime package references to version 3.2.0-preview5.20216.1.</li>
<li>Remove any calls to set <code>WebAssemblyHttpMessageHandlerOptions.DefaultCredentials</code> and instead call <code>SetBrowserRequestCredentials</code> on individual requests (see “Configure HTTP fetch request options” section below).</li>
<li>Remove the <code>redirect</code> parameter from calls to <code>TryGetToken</code> on <code>AccessTokenResult</code>.</li>
</ul>
<p>You’re all set!</p>
<h2>Read configuration during startup</h2>
<p>Configuration data is now available during app startup in <code>Program.Main</code> using the <code>Configuration</code> property on <code>WebAssemblyHostBuilder</code>. This property can now be used both to add configuration sources <em>and</em> to access the current configuration data.</p>
<p>You can see this feature in action in the project templates when you enable authentication with Azure AD, Azure AD B2C, or an OpenID Connect provider of your choice. The authentication settings are stored in <em>appsettings.json</em> and then read from configuration when the app starts up:</p>
<p><em>Program.cs</em></p>
<pre><code class="csharp">public class Program
{ public static async Task Main(string[] args) { var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add&lt;App&gt;("app"); builder.Services.AddTransient(sp =&gt; new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); builder.Services.AddOidcAuthentication(options =&gt; { // Configure your authentication provider options here. // For more information, see https://aka.ms/blazor-standalone-auth builder.Configuration.Bind("Local", options.ProviderOptions); }); await builder.Build().RunAsync(); }
}
</code></pre>
<p><em>appsettings.json</em></p>
<pre><code class="json">{ "Local": { "Authority": "https:login.microsoftonline.com/", "ClientId": "33333333-3333-3333-33333333333333333" }
}
</code></pre>
<h2>Configure HTTP fetch request options</h2>
<p>HTTP requests issued from a Blazor WebAssembly app using <code>HttpClient</code> are handled using the browser <code>fetch</code> API. In this release, we’ve added a set of extension methods for <code>HttpRequestMessage</code> that configure various <code>fetch</code> related options. These extension methods live in the <code>Microsoft.AspNetCore.Components.WebAssembly.Http</code> namespace:</p>
<table>
<thead>
<tr>
<th><code>HttpRequestMessage</code> extension method</th>
<th>Fetch request property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>SetBrowserRequestCredentials</code></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials">credentials</a></td>
</tr>
<tr>
<td><code>SetBrowserRequestCache</code></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/cache">cache</a></td>
</tr>
<tr>
<td><code>SetBrowserRequestMode</code></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/mode">mode</a></td>
</tr>
<tr>
<td><code>SetBrowserRequestIntegrity</code></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/integrity">integrity</a></td>
</tr>
</tbody>
</table>
<p>You can set additional options using the more generic <code>SetBrowserRequestOption</code> extension method.</p>
<p>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 <code>SetBrowserResponseStreamingEnabled</code> extension method on the request.</p>
<h2>Honor existing web.config when publishing</h2>
<p>When publishing a standalone Blazor WebAssembly app, a <em>web.config</em> is automatically generated for the app that handles configuring IIS appropriately. You can now specify your own <em>web.config</em> in the project, which will get used instead of the generated one.</p>
<h2>Attach tokens to outgoing requests</h2>
<p>Configuring authentication now adds an <code>AuthorizationMessageHandler</code> as a service that can be used with <code>HttpClient</code> to attach access tokens to outgoing requests. Tokens are acquired using the existing <code>IAccessTokenProvider</code> service. If a token cannot be acquired, an <code>AccessTokenNotAvailableException</code> is thrown. This exception has a <code>Redirect</code> method that can be used to navigate the user to the identity provider to acquire a new token. The <code>AuthorizationMessageHandler</code> can be configured with the authorized URLs, scopes, and return URL using the <code>ConfigureHandler</code> method.</p>
<p>For example, you can configure an <code>HttpClient</code> to use the <code>AuthorizationMessageHandler</code> like this:</p>
<pre><code class="csharp">builder.Services.AddSingleton(sp =&gt;
{ return new HttpClient(sp.GetRequiredService&lt;AuthorizationMessageHandler&gt;() .ConfigureHandler( new [] { "https://www.example.com/base" }, scopes: new[] {"example.read", "example.write"})) { BaseAddress = new Uri("https://www.example.com/base") };
});
</code></pre>
<p>For convenience, a <code>BaseAddressAuthorizationMessageHandler</code> is also included that is preconfigured with the app base address as an authorized URL. The authentication enabled Blazor WebAssembly templates now use <a href="https://docs.microsoft.com/aspnet/core/fundamentals/http-requests">IHttpClientFactory</a> to set up an <code>HttpClient</code> with the <code>BaseAddressAuthorizationMessageHandler</code>:</p>
<pre><code class="csharp">builder.Services.AddHttpClient("BlazorWithIdentityApp1.ServerAPI", client =&gt; client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)) .AddHttpMessageHandler&lt;BaseAddressAuthorizationMessageHandler&gt;(); // Supply HttpClient instances that include access tokens when making requests to the server project
builder.Services.AddTransient(sp =&gt; sp.GetRequiredService&lt;IHttpClientFactory&gt;().CreateClient("BlazorWithIdentityApp1.ServerAPI"));
</code></pre>
<p>You can use the configured <code>HttpClient</code> to make authorized requests using a simple try-catch pattern. For example, here’s the updated code in the <code>FetchData</code> component for requesting the weather forecast data:</p>
<pre><code class="csharp">protected override async Task OnInitializedAsync()
{ try { forecasts = await Http.GetFromJsonAsync&lt;WeatherForecast[]&gt;("WeatherForecast"); } catch (AccessTokenNotAvailableException exception) { exception.Redirect(); }
}
</code></pre>
<p>Alternatively, you can simplify things even further by defining a strongly-typed client that handles all of the HTTP and token acquisition concerns within a single class:</p>
<p><em>WeatherClient.cs</em></p>
<pre><code class="csharp">public class WeatherClient
{ private readonly HttpClient httpClient; public WeatherClient(HttpClient httpClient) { this.httpClient = httpClient; } public async Task&lt;IEnumerable&lt;WeatherForecast&gt;&gt; GetWeatherForeacasts() { IEnumerable&lt;WeatherForecast&gt; forecasts = new WeatherForecast[0]; try { forecasts = await httpClient.GetFromJsonAsync&lt;WeatherForecast[]&gt;("WeatherForecast"); } catch (AccessTokenNotAvailableException exception) { exception.Redirect(); } return forecasts; }
}
</code></pre>
<p><em>Program.cs</em></p>
<pre><code class="csharp">builder.Services.AddHttpClient&lt;WeatherClient&gt;(client =&gt; client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)) .AddHttpMessageHandler&lt;BaseAddressAuthorizationMessageHandler&gt;();
</code></pre>
<p><em>FetchData.razor</em></p>
<pre><code class="csharp">protected override async Task OnInitializedAsync()
{ forecasts = await WeatherClient.GetWeatherForeacasts();
}
</code></pre>
<h2>Support for time zones</h2>
<p>Blazor now infers the user’s time zone and uses it in date and time calculations. In addition, APIs on <code>System.TimeZoneInfo</code> that previously returned incomplete results now report correct results.</p>
<h2>Help improve the Blazor docs!</h2>
<p>Thank you everyone who has taken the time to give feedback on how we can best improve the Blazor docs!</p>
<p>If you haven’t already, please join in with helping us improve the docs by doing the following:</p>
<ul>
<li>
<p>As you read the Blazor docs, let us know where we should focus our efforts by telling us if you find a topic helpful or not using the helpfulness widget at the top of each doc page:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available.png" alt="Doc helpfulness"></a></p>
</li>
<li>
<p>Use the Feedback section at the bottom of each doc page to let us know when a particular topic is unclear, inaccurate, or incomplete.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available-1.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/04/blazor-webassembly-3-2-0-preview-5-release-now-available-1.png" alt="Doc feedback"></a></p>
</li>
<li>
<p>Comment on our <a href="https://github.com/dotnet/aspnetcore/issues/20890">Improve the Blazor docs</a> GitHub issue with your suggestions for new content and ways to improve the existing content.</p>
</li>
</ul>
<h2>Feedback</h2>
<p>We hope you enjoy the new features in this preview release of Blazor WebAssembly! Please let us know what you think by filing issues on <a href="https://github.com/dotnet/aspnetcore/issues">GitHub</a>.</p>
<p>Thanks for trying out Blazor!</p>
</div>


https://www.sickgaming.net/blog/2020/04/...available/