Authenticate Blazor WebAssembly using multiple identity providers

Amauri Rodrigues 11 Reputation points
2021-04-26T15:51:22.88+00:00

I am learning Blazor WebAssembly and building a small project to be hosted as Static Web App in Azure.

The target framework is net5.0.

When the user clicks over 'login' hyperlink or button, a new page will display the names of some identity providers (Microsoft, Google, SackOverflow, etc.). Then the user will select one to log in.

I did it using just one identity provider (just Microsoft, just Google, etc.).

How can I use multiple identity providers in the same app ?

Someone can help me, please ?

Some detais:
Blazor WebAssembly App
TargetFramework: net5.0
Hosted as Static Web App in Azure

Program.cs

using Blazored.LocalStorage;

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;


using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace FileProcApp
{
    public class Program
    {
        public static async Task Main(string[] args) {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");


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


            builder.Services.AddOidcAuthentication(options => {
                options.ProviderOptions.DefaultScopes.Clear();
                options.ProviderOptions.DefaultScopes.Add("openid");
                options.ProviderOptions.DefaultScopes.Add("offline_access");
                builder.Configuration.Bind("AzureAd", options.ProviderOptions);
            });

            builder.Services.AddOidcAuthentication(options => {
                options.ProviderOptions.DefaultScopes.Clear();               
                builder.Configuration.Bind("Google", options.ProviderOptions);
            });



            builder.Services.AddBlazoredLocalStorage();


            builder.Services.AddSingleton<Services.Authentication>();


            await builder.Build().RunAsync();
        }
    }
}

appsettings.json

{
  "Google": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "1234567890123-45678901234567890123456789012345.apps.googleusercontent.com",
    "PostLogoutRedirectUri": "https://lorem-ipsun-dolor-sit-amet.azurestaticapps.net/authentication/logout-callback",
    "RedirectUri": "https://lorem-ipsun-dolor-sit-amet.azurestaticapps.net/authentication/login-callback",
    "ResponseType": "token id_token"
  },
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "12345678-9012-3456-7890-123456789012",
    "ValidateAuthority": true
  }
}
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,479 questions
{count} votes