Blazor WASM with Azure AD SSO

Question

I have a Blazor WASM client and a Web API with working Azure AD authentication and authorization but the users always have to push the button to log in. I want to use SSO for make them easy this process. I tried to find on Internet how I can put this feature in the application but no success. Can someone to show the right direction, please? I do not insert source code because those who are experienced in this will know what it is about. Thx

Answer 1

• Yes, you can configure SSO in Blazor WASM app very easily by following the below said procedure as shown. Also, you need to determine the authentication method for the Blazor WASM app, i.e., SAML, OAuth 2.0, OpenID as such. Therefore, I am considering SAML as the authentication mechanism in here.

To facilitate the SAML SSO authentication through Azure AD, you will have to install packages related to it in your .NET Core product from its official website. Here, we are using ‘ComponentSpace.SAML.2.0’ package using the NuGet Manager. Once the installation is complete, we need to inject the service of ‘ComponentSpace’ in our project by adding service and cookies in the ‘Program.cs’ file whose code looks like this: -

   builder.Services.Configure<CookiePolicyOptions>(options =>
  {
   // SameSiteMode.None is required to support SAML SSO.
   options.MinimumSameSitePolicy = SameSiteMode.None;
   });

  builder.Services.ConfigureApplicationCookie(options =>
 {
 // Use a unique identity cookie name rather than sharing the cookie across applications in the domain.
 options.Cookie.Name = “StudentPortal.Identity”;

 // SameSiteMode.None is required to support SAML logout.
 options.Cookie.SameSite = SameSiteMode.None;
 });

// Add SAML SSO services.
builder.Services.AddSaml(builder.Configuration.GetSection(“SAML”));

Once done, we can modify the ‘appsettings.json’ file to add to the ‘ComponentSpace’ settings. There are many parts which we can add in the ‘appsettings.json’ file,i.e., ‘schema’, ‘LocalServiceProviderConfiguration’, ‘PartnerIdentityProviderConfigurations’, ‘SingleSignOnServiceUrl’, ‘SingleLogoutServiceUrl’ and ‘ArtifactResolutionServiceUrl’ refers to the IDP server side’s service URL wherein it should be your Azure Cloud’s URL and these URLs are where our applications send sign-on and logout requests which also includes the ‘PartnerName’, i.e., IDP’s name and URL.

To do so, you will have to include the below in your ‘appsettings.json’ file placed under ‘wwwroot’ folder: -

{
  "oidc": {
   "Authority": "< insert the SSO provider URL here >",
    "ClientId": "< unique client id as specified in the SSO provider >",
    "ResponseType": "code",
     "DefaultScopes": [
      "openid",
       "profile"
   ],
    "PostLogoutRedirectUri": "authentication/logout-callback",
     "RedirectUri": "authentication/login-callback"
    }
   }

Thus, once done, we will add a new file to the same folder by the name of ‘LoginDisplay.razor’ which is displayed as follows: -

 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
 @inject NavigationManager Navigation
 @inject SignOutSessionStateManager SignOutManager
 <AuthorizeView>
   <Authorized>
    <button class="nav-link btn btn-link" @onclick="BeginSignOut">Log out</button>
  </Authorized>
  <NotAuthorized>
    <a href="authentication/register">Register</a>
    <a href="authentication/login">Log in</a>
   </NotAuthorized>
   </AuthorizeView>
   @code{
   private async Task BeginSignOut(MouseEventArgs args)
   {
    await SignOutManager.SetSignOutState();
    Navigation.NavigateTo("authentication/logout");
    }
    }

Thus, as all the configurations required are done as given above, the program will call ‘SAML/InitiateSingleSignOn’ function and send an SSO sign-in request to IDP, and now our program automatically run into the ‘SAML/AssertionConsumerService’ function and start to wait for IDP's reply, after receiving the response from the IDP. Please find the below snapshots for your reference while following the above steps: -

Certificate import: -

Adding ‘SAML Service Provider’ as a SAMLController as said: -

Adding ‘ComponentSpace.SAML.2.0’ package as below: -

For more detailed information, kindly refer to the below links: -

https://kevinzheng1989.medium.com/build-the-azure-sso-login-page-in-blazor-server-application-with-saml-b0959a50c0a6

https://scientificprogrammer.net/2022/08/12/single-sign-on-user-authentication-on-blazor-webassembly-signalr-client/