How to add OpenIdConnect via IdentityServer4 to ASP.NET Core ServerSide Blazor web app?

by

Your code suffers from a couple of maladies… The main issue is that your code provides no authentication challenge request mechanism that enables redirection to an authenticating agent such as IdentityServer. This is only possible with HttpContext, which is not available in SignalR (Blazor Server App). To solve this issue we’ll add a couple of Razor pages where the HttpContext is available. More in the answer…

The following is a complete and working solution to the question:

  1. Create a Blazor Server App.
  2. Install-Package Microsoft.AspNetCore.Authentication.OpenIdConnect -Version 3.1.0

  3. Create a component named LoginDisplay (LoginDisplay.razor), and place it in the Shared folder. This component is used in the MainLayout component

    <AuthorizeView>
    <Authorized>
    <a href="https://stackoverflow.com/questions/59638965/logout">Hello, @context.User.Identity.Name !</a>
    <form method="get" action="https://stackoverflow.com/questions/59638965/logout">
    <button type="submit" class="nav-link btn btn-link">Log out</button>
    </form>
    </Authorized>
    <NotAuthorized>
    <a href="login?redirectUri=/">Log in</a>
    </NotAuthorized>
    </AuthorizeView>

    Add the LoginDisplay component to the MainLayout component, just above the About
    anchor element, like this

    <div class="top-row px-4">
    <LoginDisplay />
    <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

Note: In order to redirect requests for login and for logout to IdentityServer, we have to create two Razor pages as follows:
1. Create a Login Razor page Login.cshtml (Login.cshtml.cs) and place them in the Pages folder as follow:

Login.cshtml.cs

using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.OpenIdConnect;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.IdentityModel.Tokens;

public class LoginModel : PageModel
{
    public async Task OnGet(string redirectUri)
    {
        await HttpContext.ChallengeAsync("oidc", new 
            AuthenticationProperties { RedirectUri = redirectUri } );
    }  
}

This code starts the challenge for the Open Id Connect authentication scheme you defined in the Startup class.

  1. Create a Logout Razor page Logout.cshtml (Logout.cshtml.cs) and place them in the Pages folder as well:

    Logout.cshtml.cs

    using Microsoft.AspNetCore.Authentication;

    public class LogoutModel : PageModel
    {
    public async Task<IActionResult> OnGetAsync()
    {
    await HttpContext.SignOutAsync();
    return Redirect("https://stackoverflow.com/");
    }
    }

This code signs you out, redirecting you to the Home page of your Blazor app.

Replace the code in App.razor with the following code:

@inject NavigationManager NavigationManager

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                @{
                    var returnUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);

                    NavigationManager.NavigateTo($"login?redirectUri={returnUrl}", forceLoad: true);

                }

            </NotAuthorized>
            <Authorizing>
                Wait...
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>

        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>

    </NotFound>

</Router>
</CascadingAuthenticationState>

Replace the code in the Startup class with the following:

using Microsoft.AspNetCore.Authentication.OpenIdConnect; 
using Microsoft.AspNetCore.Authorization; 
using Microsoft.AspNetCore.Mvc.Authorization; 
using System.Net.Http;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.IdentityModel.Tokens;
using Microsoft.IdentityModel.Protocols.OpenIdConnect;
using Microsoft.IdentityModel.Logging;


public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddAuthorizationCore();
        services.AddSingleton<WeatherForecastService>();

        services.AddAuthentication(sharedOptions =>
        {
            sharedOptions.DefaultAuthenticateScheme = 
                 CookieAuthenticationDefaults.AuthenticationScheme;
            sharedOptions.DefaultSignInScheme = 
                CookieAuthenticationDefaults.AuthenticationScheme;
            sharedOptions.DefaultChallengeScheme = 
               OpenIdConnectDefaults.AuthenticationScheme;
        })
        .AddCookie()
        .AddOpenIdConnect("oidc", options =>
         {
             options.Authority = "https://demo.identityserver.io/";
             options.ClientId = "interactive.confidential.short"; 
             options.ClientSecret = "secret";
             options.ResponseType = "code";
             options.SaveTokens = true;
             options.GetClaimsFromUserInfoEndpoint = true;
             options.UseTokenLifetime = false;
             options.Scope.Add("openid");
             options.Scope.Add("profile");
             options.TokenValidationParameters = new 
                    TokenValidationParameters
                    {
                        NameClaimType = "name"
                    };

             options.Events = new OpenIdConnectEvents
             {
               OnAccessDenied = context =>
                        {
                          context.HandleResponse();
                          context.Response.Redirect("https://stackoverflow.com/");
                          return Task.CompletedTask;
                       }
       };
 });

}


  // This method gets called by the runtime. Use this method to configure 
     the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();
        app.UseAuthentication();
        app.UseAuthorization();


        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

IMPORTANT: in all the code sample above you’ll have to add using statements as necessary. Most of them are provided by default. The using provided here are those necessary to enable the authentication and authorization flow.

  • Run your app, click on the log in button to authenticate. You are being redirected to IdentityServer test server which allows you to perform an OIDC login. You may enter a user name: bob and password bob, and after click the OK button, you’ll be redirected to your home page. Note also that you can use the external login provider Google (try it). Note that after you’ve logged in with identity server, the LoginDisplay component displays the string “Hello, “.

Note: While you’re experimenting with your app, you should clear the browsing data, if you want to be redirected to the identity server’s login page, otherwise, your browser may use the cached data. Remember, this is a cookie-based authorization mechanism…

Note that creating a login mechanism as is done here does not make your app more secured than before. Any user can access your web resources without needing to log in at all. In order to secure parts of your web site, you have to implement authorization as well, conventionally, an authenticated user is authorized to access secured resource, unless other measures are implemented, such as roles, policies, etc. The following is a demonstration how you can secure your Fetchdata page from unauthorized users (again, authenticated user is considered authorized to access the Fetchdata page).

  1. At the top of the Fetchdata component page add the @attribute directive for the Authorize attribute, like this: @attribute [Authorize]
    When an unauthenticated user tries to access the Fetchdata page, the AuthorizeRouteView.NotAuthorized delegate property is executed, so we can add some code to redirect the user to the same identity server’s login page to authenticate.

  2. The code within the NotAuthorized element looks like this:


    <NotAuthorized>
    @{
    var returnUrl =
    NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
    NavigationManager.NavigateTo($"login?redirectUri=
    {returnUrl}", forceLoad: true);
    }
    </NotAuthorized>

This retrieves the url of the last page you were trying to access, the Fetchdata page, and then navigates to the Login Razor page from which a password challenge is performed, that is, the user is redirected to the identity server’s login page to authenticate.

After the user has authenticated he’s redirected to the Fetchdata page.

Good luck…

More Related Contents:

  1. How do I get the access token from a blazor (server-side) web app?
  2. Blazor component : refresh parent when model is updated from child component
  3. Return View as String in .NET Core
  4. ASP.NET Core: Exclude or include files on publish
  5. How do I get the kestrel web server to listen to non-localhost requests?
  6. Parse and modify a query string in .NET Core
  7. Asp.net core Identity successful login redirecting back to login page
  8. .NET Core Identity Server 4 Authentication VS Identity Authentication
  9. How to create roles in ASP.NET Core and assign them to users?
  10. Custom Authentication in ASP.Net-Core
  11. How can I use Dependency Injection in a .Net Core ActionFilterAttribute?
  12. How do I setup multiple auth schemes in ASP.NET Core 2.0?
  13. ASP.NET 5 add WCF service reference
  14. How to consume a Scoped service from a Singleton?
  15. How can I trigger/refresh my main .RAZOR page from all of its sub-components within that main .RAZOR page when an API call is complete?
  16. Cannot debug Blazor wasm
  17. NavigationManager – Get current URL in a Blazor component
  18. Identity in ASP.Net Core 2.1< - Customize AccountController
  19. Error handling (Sending ex.Message to the client)
  20. Bind Dictionary with list in viewmodel to checkboxes
  21. Is there any hot reload for blazor server-side?
  22. Blazor – How to create Components dynamically
  23. Error 500.19 with 0x8007000d when running ASP.NET Core app in IIS despite AspNetCoreModule being installed
  24. Dealing with large file uploads on ASP.NET Core 1.0
  25. How can I ensure that appsettings.dev.json gets copied to the output folder?
  26. Can System.Web be used with ASP.Net Core with Full Framework
  27. How to map fallback in ASP .NET Core Web API so that Blazor WASM app only intercepts requests that are not to the API
  28. An error occurred attempting to determine the process id of dotnet.exe which is hosting your application. One or more error occured
  29. Why are Blazor lifecycle methods getting executed twice?
  30. Blazor Textfield Oninput User Typing Delay

Leave a Comment