07-25-2019, 09:21 PM
Configuring a Server-side Blazor app with Azure App Configuration
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.jpg" width="58" height="58" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.jpg" width="58" height="58" alt="Avatar" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 photo avatar-default"></div>
</div>
</div>
<div class="entry-meta">
<p>July 1st, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>With <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/">.NET Core 3.0 Preview 6</a>, we added authentication & authorization support to server-side Blazor apps. It only takes a matter of seconds to wire up an app to Azure Active Directory with support for single or multiple organizations. Once the project is created, it contains all the configuration elements in its <code>appsettings.json</code> to function. This is great, but in a team environment – or in a distributed topology – configuration files lead to all sorts of problems. In this post, we’ll take a look at how we can extract those configuration values out of JSON files and into an Azure App Configuration instance, where they can be used by other teammates or apps.</p>
<h2>Setting up Multi-org Authentication</h2>
<p>In the <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/">.NET Core 3.0 Preview 6 blog post</a> we explored how to use the <strong>Individual User Accounts</strong> option in the authentication dialog to set up a Blazor app with ASP.NET Identity, so we won’t go into too much detail. Essentially, you click the <strong>Change</strong> link during project creation.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.png" alt="Click Change Auth during project creation"></p>
<p>In this example I’ll be using an Azure Active Directory application to allow <em>anyone</em> with a Microsoft account to log into the app, so I’ll select <strong>Work or School Accounts</strong> and then select <strong>Cloud – Multiple Organizations</strong> in the Change Authentication dialog.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-1.png" alt="The Visual Studio add authentication dialog."></p>
<p>Once the project is created, my <code>AzureAD</code> configuration node contains the 3 key pieces of information my app’s code will need to authenticate against Azure Active Directory; my tenant URL, the client ID for the AAD app Visual Studio created for me during the project’s creation, and the callback URI so users can get back to my app once they’ve authenticated.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-2.png" alt="The appsettings.json inclusive of the settings."></p>
<p>Whilst this is conveniently placed here in my <code>appsettings.json</code> file, it’d be more convenient if I didn’t need any local configuration files. Having a centralized configuration-management solution would be easier to manage, as well as give me the ability to keep my config out of source control, should there come a point when things like connection strings need to be shared amongst developers.</p>
<h2>Azure App Configuration</h2>
<p><a href="https://docs.microsoft.com/en-us/azure/azure-app-configuration/overview">Azure App Configuration</a> is a cloud-based solution for managing all of your configuration values. Once I have an Azure App Configuration instance set up in my subscription, adding the configuration settings is simple. By default, they’re hidden from view, but I can click <strong>Show Values</strong> or select an individual setting for editing or viewing.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-3.png" alt="The config values in Azure App Configuration"></p>
<h3>Convenient .NET Core IConfiguration Integration</h3>
<p>The Azure App Configuration team has shipped a NuGet package containing extensions to ASP.NET and .NET Core that enable developers the ability of using the service, but without needing to change all your code that already makes use of <code>IConfiguration</code>. To start with, install the <code>Microsoft.Extensions.Configuration.AzureAppConfiguration</code> <a href="https://www.nuget.org/packages/Microsoft.Extensions.Configuration.AzureAppConfiguration/1.0.0-preview-008920001-990">NuGet package</a>.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-4.png" alt="Adding the NuGet Package for Azure App Configuration"></p>
<p>You’ll need to copy the connection string from the Azure Portal to enable connectivity between your app and Azure App Configuration.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-5.png" alt="Copying the Azure App Configuration connection string"></p>
<p>Once that value has been copied, you can use it with either <code>dotnet user-secrets</code> to configure your app, or using a debug-time environment variable. Though it seems like we’ve created yet one more configuration value to track, think about it this way: this is the <strong>only</strong> value you’ll have to set using an environment variable; all your other configuration can be set via Azure App Configuration in the portal.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-6.png" alt="Setting up the Azure App Configuration connection string in an environment variable"></p>
<h3>Using the Azure App Configuration Provider for .NET Core</h3>
<p>Once the NuGet package is installed, the code to instruct my .NET Core code to use Azure App Configuration whenever it reads any configuration values from <code>IConfiguration</code> is simple. In <code>Program.cs</code> I’ll call the <code>ConfigureAppConfiguration</code> middleware method, then use the <code>AddAzureAppConfiguration</code> extension method to get the connection string from my <code>ASPNETCORE_AzureAppConfigConnectionString</code> environment variable. If the environment variable isn’t set, the call will noop and the other configuration providers will do the work.</p>
<p>This is <strong>great</strong>, because I won’t even need to change existing – or in this case, template-generated code – I just tell my app to use Azure App Configuration and I’m off to the races. The full update to <code>Program.cs</code> is shown below.</p>
<pre><code class="csharp">// using Microsoft.Extensions.Configuration.AzureAppConfiguration; public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureAppConfiguration((hostingContext, config) => { config.AddAzureAppConfiguration(options => { var azureAppConfigConnectionString = hostingContext.Configuration["AzureAppConfigConnectionString"]; options.Connect(azureAppConfigConnectionString); }); }) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
</code></pre>
<p>When I run the app, it first reaches out to Azure App Configuration to get all the settings it needs to run and then works as if it were configured locally using <code>appsettings.json</code>. As long as my teammates or other services needing these values have the connection string to the Azure App Configuration instance holding the settings for the app, they’re good.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-7.png" alt="Running the authenticated app"></p>
<p>Now, I can remove the configuration values entirely from the <code>appsettings.json</code> file. If I want to control the logging behavior using Azure App Configuration, I could move these left-over settings out, too. Even though I’ll be using Azure App Configuration as, the other providers are still there.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-8.png" alt="The appsettings.json with the settings removed."></p>
<h2>Dynamic Re-loading</h2>
<p>Log levels are a good example of how the Azure App Configuration service can enable dynamic reloading of configuration settings you might need to tweak frequently. By moving my logging configuration into Azure App Configuration, I can change the log level right in the portal. In <code>Program.cs</code>, I can use the <code>Watch</code> method to specify which configuration settings I’ll want to reload when they change.</p>
<pre><code class="csharp">public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureAppConfiguration((hostingContext, config) => { config.AddAzureAppConfiguration(options => { var azureAppConfigConnectionString = hostingContext.Configuration["AzureAppConfigConnectionString"]; options.Connect(azureAppConfigConnectionString) .Watch("Logging:LogLevel:Default") .Watch("Logging:LogLevel:Microsoft") .Watch("Logging:LogLevel:Microsoft.Hosting.Lifetime"); }); }) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
</code></pre>
<p>The default load-time is 30 seconds, but now, should I need to turn up the volume on my logs to get a better view of what’s happening in my site, I don’t need to re-deploy or even stop my site. Simply changing the values in the portal will be enough – 30 seconds later the values will be re-loaded from Azure App Configuration and my logging will be more verbose.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-9.png" alt="Changing configuration values in the portal"></p>
<h3>Configuration Source Ordering</h3>
<p>The <code>JsonConfigurationSource</code> configuration sources – those which load settings from <code>appsettings.json</code> and <code>appsettings.{Environment}.json</code> – are loaded during the call to <code>CreateDefaultBuilder</code>. So, by the time I call <code>AddAzureAppConfiguration</code> to load in the <code>AzureAppConfigurationSource</code>, the JSON file providers are already in the configuration sources list.</p>
<p>The importance of ordering is evident here; should I want to override the configuration values coming from Azure App Configuration with my local <code>appsettings.json</code> or <code>appsettings.Development.json</code> files, I’d need to re-order the providers in the call to <code>ConfigureAppConfiguration</code>. Otherwise, the JSON file values will be loaded first, then the last source (the one that will “win”) will be the Azure App Configuration source.</p>
<h2>Try it Out</h2>
<p>Any multi-node or microservice-based application topology benefits from centralized configuration, and teams benefit from it by not having to keep track of so many configuration settings, environment variables, and so on. Take a look over the Azure App Configuration documentation. You’ll see that there are a multitude of other features, like Feature Flags and dark deployment support. Then, create an instance and try wiring your existing ASP.NET Code up to read configuration values from the cloud.</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-1.jpg" width="96" height="96" alt="Avatar" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 photo avatar-default"></div>
<div>
<h5><a class="no-underline" aria-label=" Brady Gaster" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/bradygmicrosoft-com/" rel="noopener noreferrer"> Brady Gaster</a></h5>
<p>Senior Program Manager, ASP.NET Core</p>
<p><strong>Follow </strong> <a class="no-underline stayinformed" aria-label=" Brady Gaster Twitter profile" target="_blank" href="https://twitter.com/bradygaster" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label=" Brady Gaster GitHub profile" target="_blank" href="https://github.com/bradygaster" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label=" Brady Gaster RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/bradygmicrosoft-com/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.jpg" width="58" height="58" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.jpg" width="58" height="58" alt="Avatar" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 photo avatar-default"></div>
</div>
</div>
<div class="entry-meta">
<p>July 1st, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>With <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/">.NET Core 3.0 Preview 6</a>, we added authentication & authorization support to server-side Blazor apps. It only takes a matter of seconds to wire up an app to Azure Active Directory with support for single or multiple organizations. Once the project is created, it contains all the configuration elements in its <code>appsettings.json</code> to function. This is great, but in a team environment – or in a distributed topology – configuration files lead to all sorts of problems. In this post, we’ll take a look at how we can extract those configuration values out of JSON files and into an Azure App Configuration instance, where they can be used by other teammates or apps.</p>
<h2>Setting up Multi-org Authentication</h2>
<p>In the <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/">.NET Core 3.0 Preview 6 blog post</a> we explored how to use the <strong>Individual User Accounts</strong> option in the authentication dialog to set up a Blazor app with ASP.NET Identity, so we won’t go into too much detail. Essentially, you click the <strong>Change</strong> link during project creation.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration.png" alt="Click Change Auth during project creation"></p>
<p>In this example I’ll be using an Azure Active Directory application to allow <em>anyone</em> with a Microsoft account to log into the app, so I’ll select <strong>Work or School Accounts</strong> and then select <strong>Cloud – Multiple Organizations</strong> in the Change Authentication dialog.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-1.png" alt="The Visual Studio add authentication dialog."></p>
<p>Once the project is created, my <code>AzureAD</code> configuration node contains the 3 key pieces of information my app’s code will need to authenticate against Azure Active Directory; my tenant URL, the client ID for the AAD app Visual Studio created for me during the project’s creation, and the callback URI so users can get back to my app once they’ve authenticated.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-2.png" alt="The appsettings.json inclusive of the settings."></p>
<p>Whilst this is conveniently placed here in my <code>appsettings.json</code> file, it’d be more convenient if I didn’t need any local configuration files. Having a centralized configuration-management solution would be easier to manage, as well as give me the ability to keep my config out of source control, should there come a point when things like connection strings need to be shared amongst developers.</p>
<h2>Azure App Configuration</h2>
<p><a href="https://docs.microsoft.com/en-us/azure/azure-app-configuration/overview">Azure App Configuration</a> is a cloud-based solution for managing all of your configuration values. Once I have an Azure App Configuration instance set up in my subscription, adding the configuration settings is simple. By default, they’re hidden from view, but I can click <strong>Show Values</strong> or select an individual setting for editing or viewing.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-3.png" alt="The config values in Azure App Configuration"></p>
<h3>Convenient .NET Core IConfiguration Integration</h3>
<p>The Azure App Configuration team has shipped a NuGet package containing extensions to ASP.NET and .NET Core that enable developers the ability of using the service, but without needing to change all your code that already makes use of <code>IConfiguration</code>. To start with, install the <code>Microsoft.Extensions.Configuration.AzureAppConfiguration</code> <a href="https://www.nuget.org/packages/Microsoft.Extensions.Configuration.AzureAppConfiguration/1.0.0-preview-008920001-990">NuGet package</a>.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-4.png" alt="Adding the NuGet Package for Azure App Configuration"></p>
<p>You’ll need to copy the connection string from the Azure Portal to enable connectivity between your app and Azure App Configuration.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-5.png" alt="Copying the Azure App Configuration connection string"></p>
<p>Once that value has been copied, you can use it with either <code>dotnet user-secrets</code> to configure your app, or using a debug-time environment variable. Though it seems like we’ve created yet one more configuration value to track, think about it this way: this is the <strong>only</strong> value you’ll have to set using an environment variable; all your other configuration can be set via Azure App Configuration in the portal.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-6.png" alt="Setting up the Azure App Configuration connection string in an environment variable"></p>
<h3>Using the Azure App Configuration Provider for .NET Core</h3>
<p>Once the NuGet package is installed, the code to instruct my .NET Core code to use Azure App Configuration whenever it reads any configuration values from <code>IConfiguration</code> is simple. In <code>Program.cs</code> I’ll call the <code>ConfigureAppConfiguration</code> middleware method, then use the <code>AddAzureAppConfiguration</code> extension method to get the connection string from my <code>ASPNETCORE_AzureAppConfigConnectionString</code> environment variable. If the environment variable isn’t set, the call will noop and the other configuration providers will do the work.</p>
<p>This is <strong>great</strong>, because I won’t even need to change existing – or in this case, template-generated code – I just tell my app to use Azure App Configuration and I’m off to the races. The full update to <code>Program.cs</code> is shown below.</p>
<pre><code class="csharp">// using Microsoft.Extensions.Configuration.AzureAppConfiguration; public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureAppConfiguration((hostingContext, config) => { config.AddAzureAppConfiguration(options => { var azureAppConfigConnectionString = hostingContext.Configuration["AzureAppConfigConnectionString"]; options.Connect(azureAppConfigConnectionString); }); }) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
</code></pre>
<p>When I run the app, it first reaches out to Azure App Configuration to get all the settings it needs to run and then works as if it were configured locally using <code>appsettings.json</code>. As long as my teammates or other services needing these values have the connection string to the Azure App Configuration instance holding the settings for the app, they’re good.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-7.png" alt="Running the authenticated app"></p>
<p>Now, I can remove the configuration values entirely from the <code>appsettings.json</code> file. If I want to control the logging behavior using Azure App Configuration, I could move these left-over settings out, too. Even though I’ll be using Azure App Configuration as, the other providers are still there.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-8.png" alt="The appsettings.json with the settings removed."></p>
<h2>Dynamic Re-loading</h2>
<p>Log levels are a good example of how the Azure App Configuration service can enable dynamic reloading of configuration settings you might need to tweak frequently. By moving my logging configuration into Azure App Configuration, I can change the log level right in the portal. In <code>Program.cs</code>, I can use the <code>Watch</code> method to specify which configuration settings I’ll want to reload when they change.</p>
<pre><code class="csharp">public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureAppConfiguration((hostingContext, config) => { config.AddAzureAppConfiguration(options => { var azureAppConfigConnectionString = hostingContext.Configuration["AzureAppConfigConnectionString"]; options.Connect(azureAppConfigConnectionString) .Watch("Logging:LogLevel:Default") .Watch("Logging:LogLevel:Microsoft") .Watch("Logging:LogLevel:Microsoft.Hosting.Lifetime"); }); }) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
</code></pre>
<p>The default load-time is 30 seconds, but now, should I need to turn up the volume on my logs to get a better view of what’s happening in my site, I don’t need to re-deploy or even stop my site. Simply changing the values in the portal will be enough – 30 seconds later the values will be re-loaded from Azure App Configuration and my logging will be more verbose.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-9.png" alt="Changing configuration values in the portal"></p>
<h3>Configuration Source Ordering</h3>
<p>The <code>JsonConfigurationSource</code> configuration sources – those which load settings from <code>appsettings.json</code> and <code>appsettings.{Environment}.json</code> – are loaded during the call to <code>CreateDefaultBuilder</code>. So, by the time I call <code>AddAzureAppConfiguration</code> to load in the <code>AzureAppConfigurationSource</code>, the JSON file providers are already in the configuration sources list.</p>
<p>The importance of ordering is evident here; should I want to override the configuration values coming from Azure App Configuration with my local <code>appsettings.json</code> or <code>appsettings.Development.json</code> files, I’d need to re-order the providers in the call to <code>ConfigureAppConfiguration</code>. Otherwise, the JSON file values will be loaded first, then the last source (the one that will “win”) will be the Azure App Configuration source.</p>
<h2>Try it Out</h2>
<p>Any multi-node or microservice-based application topology benefits from centralized configuration, and teams benefit from it by not having to keep track of so many configuration settings, environment variables, and so on. Take a look over the Azure App Configuration documentation. You’ll see that there are a multitude of other features, like Feature Flags and dark deployment support. Then, create an instance and try wiring your existing ASP.NET Code up to read configuration values from the cloud.</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/07/configuring-a-server-side-blazor-app-with-azure-app-configuration-1.jpg" width="96" height="96" alt="Avatar" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 photo avatar-default"></div>
<div>
<h5><a class="no-underline" aria-label=" Brady Gaster" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/bradygmicrosoft-com/" rel="noopener noreferrer"> Brady Gaster</a></h5>
<p>Senior Program Manager, ASP.NET Core</p>
<p><strong>Follow </strong> <a class="no-underline stayinformed" aria-label=" Brady Gaster Twitter profile" target="_blank" href="https://twitter.com/bradygaster" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label=" Brady Gaster GitHub profile" target="_blank" href="https://github.com/bradygaster" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label=" Brady Gaster RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/bradygmicrosoft-com/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>