I'm trying to intergrate PingId / Okta Authentication to my current Hosted Blazor Webassembly (Blazor Wasm with both Client & Server App) while still keep using the Asp.Net Core Identity Authentication System.

Follow Microsoft Paper Options for hosted apps and third-party login providers

The choosen option is the most secure and recommended by Microsoft as below :

1). Configure Identity from Blazor Server using Microsoft.AspNetCore.Authentication.OpenIdConnect (the framework will take care all of this for you). Below is all the code need to add to Program.cs of Blazor Server:

builder.Services.AddAuthentication()
    .AddIdentityServerJwt()
    .AddOpenIdConnect("PingOne", options =>
    {
        options.ClaimsIssuer = "PingOne";
        options.Authority = "https://auth.pingone.asia/{EnvironmentId}/as";
        options.ClientId = {ClientId};
        options.ClientSecret = {Secret};
        options.CallbackPath = "https://localhost:{Port}/pingid/login-callback;
        options.SaveTokens = true;
        options.ResponseType = "code";
        options.Scope.Clear();

        foreach (var scope in configuration.Scopes)
        {
            options.Scope.Add(scope);
        }

        options.Events = new Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectEvents
        {
            OnRedirectToIdentityProviderForSignOut = context =>
            {
                context.ProtocolMessage.PostLogoutRedirectUri = configuration.PostSignOffRedirectUrl;
                return Task.FromResult(0);
            },
        };
    });

2). User will login through server side authentication similar like setting Facebook, Google, and external provider authentication in ASP.NET Core

Note that Microsoft have their own nuget package (Microsoft.AspNetCor.Authentication.xxxx) for External Provider such as Facebook, Google, Twitter, Microsoft and a General OIDC nuget.

For other Provider such as GitHub, nuget from community aspnet-contrib is available at (AspNet.Security.OAuth.Providers)

aspnet-contrib also have AspNet.Security.OpenId.Provider which is mostly use for OpenID 2.0 which is older version of OpenID Connect. For more information on OAuth and OpenID 1.0, 2.0, Connect please watch this Video

In our case, we need to build our own Provider Authentication using General Microsoft OIDC nuget

After adding the above code you can rebuild and run and enjoy the PingId External Authentication together with Asp.Net Identity

If you get the Error "Unable to unprotect the message.State", that is because when using multiple OIDC providers you need different AuthenticationSchemes AND CallbackPath

In our case we already have Duende Identity Server registered automatically at :

   https://localhost:{Port}/authentication/login-callback

through Authentication.razor in Blazor Client:

<RemoteAuthenticatorView Action="@Action" />

So we need to make sure our OpenIdConnect to PingOne (PingIdentity Server) have different name

    .AddOpenIdConnect("PingOne", options =>

and the Callback Path set to different value as well

        options.CallbackPath = "https://localhost:{Port}/pingid/login-callback;

Make sure when setting up PingOne App (Follow this Video) with below configuration: Config PingIdentity with Code & Authorization Code Config Call back value :

https://localhost:{Port}/pingid/logic-callback

with {Port} is your Blazor Server Port (you can find out or modify them in Project > Properties > launchSettings.json)

3). Make api call to server > server retrieve access token > this is not mentioned in this tutorial

4). Customize Access Token and Claim received from Third-Party Authentication Provider: this can be done by using Scaffolding and read more at Microsoft Paper Persist additional claims and tokens from external providers in ASP.NET Core

CONCLUSION: I'm currently use BlazorHero to build the Hosted Blazor Webassembly Application and find out BlazorHero is a better Starting App Template for beginner than Microsoft Blazor Template, it use enterprise architecture and MudBlazor for UI which is, in my oppinion, the best Blazor Component in the market, as well as it is FREE. Unfortunately, Blazor Hero re-implent the whole Client-Server Authentication Process and so currently doesn't have External Authentication Provider yet. My next post will be concentrate on implement Third-Party Authentication Provider for Blazor Hero.