Protéger une application Blazor

Présentation de Blazor

Blazor est un framework de développement Web, parallèle à ASP.NET, qui permet d’écrire des applications web riches selon deux modes distincts.

Blazor Server apporte un fonctionnement « assez proche » de ASP.NET dans le sens où le code est exécuté sur le serveur et celui-ci retourne le résultat à afficher sous forme de page web. Contrairement à ASP.Net qui retourne des pages HTML et dont l’interactivité doit être gérée en JavaScript, une application Blazor Server ouvre une connexion WebSocket au travers de SignalR afin d’avoir une communication bidirectionnelle qui permettra au client de transmettre au serveur les évènements déclenchés par le client et de recevoir en retour la mise à jour de la page calculée par le serveur.

Blazor WebAssembly, a contrario, s’exécute dans le navigateur comme le ferait une application React ou Angular, la communication avec le serveur se faisant via des API pour les échanges de données. Contrairement à React ou Angular, Blazor ne repose pas sur JavaScript mais sur du code C# qui est compilé en WebAssembly (c’est un petit raccourci).

WebAssembly est le deuxième « langage » supporté par les navigateurs pour exécuter du code dans nos pages web....

Blazor Server

Nous allons commencer par Blazor Server, car celui-ci est plus proche dans son fonctionnement de ASP.Net MVC que nous avons déjà étudié. En effet, le code est exécuté sur le serveur.

Créez une nouvelle application Blazor Server :

que vous appellerez BlazorServerClientApplication.

Une fois l’application créée, vous pouvez la lancer, et vous accéderez au template classique d’application ASP.Net.

Pour le moment, aucune des routes de cette application n’est protégée. Nous allons donc protéger la route. Pour cela, ouvrez le fichier fetchdata.razor qui se trouve dans le répertoire Pages.

Ajoutez en haut de page la déclaration :

@attribute [Authorize] 

Relancez l’application sur la page fetchdata :

Nous ne sommes plus autorisés à accéder au contenu de la page.

Toutefois, cette manière de faire peut correspondre pour limiter l’accès à une page donnée, accessible uniquement aux administrateurs par exemple. Mais pour protéger l’accès à une application, il est plus fréquent de bloquer l’accès à la totalité de l’application.

Nous allons donc supprimer notre attribut [Authorize] pour le positionner à un endroit où il couvrira la totalité de l’application.

Tout comme les applications ASP.Net MVC, les applications Blazor disposent d’un fichier _imports.razor qui contient tous les using pour les vues, les composants, les pages, etc. Le contenu de ce fichier est intégré à chaque page au moment de la compilation, c’est donc l’endroit idéal pour ajouter un comportement global.

C’est donc ici que nous allons insérer notre attribut :

@using System.Net.Http  
@using Microsoft.AspNetCore.Authorization  
@using Microsoft.AspNetCore.Components.Authorization  
@using Microsoft.AspNetCore.Components.Forms  
@using Microsoft.AspNetCore.Components.Routing  
@using Microsoft.AspNetCore.Components.Web  
@using Microsoft.AspNetCore.Components.Web.Virtualization  
@using Microsoft.JSInterop  
@using BlazorServerClientApplicationWithAuth  
@using BlazorServerClientApplicationWithAuth.Shared  
  
@attribute [Authorize] 

Relancez l’application...

Blazor WebAssembly

Blazor WebAssembly a un mode de fonctionnement assez différent de Blazor Server. Ici, pas de connexion WebSocket pour que le serveur calcule et retourne l’interactivité au navigateur. L’exécutable de l’application est téléchargé et exécuté dans le navigateur comme pour une application JavaScript type React ou Angular. La différence étant qu’ici on ne se base pas sur JavaScript mais sur WebAssembly qui est un genre d’assembleur dédié aux navigateurs.

Le mode de fonctionnement de l’application étant très différent, l’authentification est également très différente, et plus simple à mettre en œuvre. Elle repose exclusivement sur l’utilisation de tokens qui seront fournis par le SSO et stockés localement dans le navigateur.

Ajoutez à la solution un projet Blazor WebAssembly App nommé BlazorWasmClientApplication. 

Vous pouvez déjà constater que le fichier Program.cs est bien plus court :

using BlazorWasmClientApplication;  
using Microsoft.AspNetCore.Components.Web;  
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;  
  
var builder = WebAssemblyHostBuilder.CreateDefault(args);  
builder.RootComponents.Add<App>("#app");  
builder.RootComponents.Add<HeadOutlet>("head::after");  
   
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = 
new Uri(builder.HostEnvironment.BaseAddress) });  
  
await builder.Build().RunAsync(); 

Nous ne sommes pas dans une application ASP.Net classique mais bien dans une application qui sera exclusivement exécutée dans votre navigateur. En cela, elle se rapproche plus d’une application Desktop que d’une application ASP.NET MVC ou Razor Pages.

Comme pour l’application Blazor Server, nous allons ajouter l’authentification à notre application.

Commencez par installer le package NuGet :

Microsoft.AspNetCore.Components.WebAssembly.Authentication 

Ensuite, rendez-vous dans le fichier App.razor de l’application.

Comme pour l’application Blazor Server, nous allons avoir besoin...