Introducere în Autentificare în Blazor WebAssembly
Autentificarea este esențială în aplicații moderne. În Blazor WebAssembly, putem simula un sistem de login/logout folosind AuthenticationStateProvider personalizat.
🔧 1. Implementarea unui CustomAuthenticationStateProvider
public class CustomAuthStateProvider : AuthenticationStateProvider
{
private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());
private ClaimsPrincipal _user;
public override Task<AuthenticationState> GetAuthenticationStateAsync()
{
if (_user == null)
return Task.FromResult(new AuthenticationState(_anonymous));
return Task.FromResult(new AuthenticationState(_user));
}
public void Login(string username)
{
var identity = new ClaimsIdentity(new[]
{
new Claim(ClaimTypes.Name, username),
}, "MockAuthentication");
_user = new ClaimsPrincipal(identity);
NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
}
public void Logout()
{
_user = null;
NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
}
}
🔧 2. Înregistrare în Program.cs
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
🧑💼 3. Pagina de Login (Pages/Login.razor)
@inject CustomAuthStateProvider AuthProvider
@inject NavigationManager Nav
<h3>Login</h3>
<input @bind="username" placeholder="Username" />
<button @onclick="PerformLogin">Login</button>
@code {
private string username;
private void PerformLogin()
{
AuthProvider.Login(username);
Nav.NavigateTo("/");
}
}
🔓 4. Logout (de exemplu, într-un meniu)
@inject CustomAuthStateProvider AuthProvider
<button @onclick="() => AuthProvider.Logout()">Logout</button>
🔐 5. Pagină protejată (Pages/Secure.razor)
@attribute [Authorize]
<h3>Informații protejate</h3>
<p>Doar utilizatorii logați pot vedea această pagină.</p>
🔁 6. Adăugăm App.razor cu CascadingAuthenticationState
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Pagina nu a fost găsită.</p>
</NotFound>
</Router>
</CascadingAuthenticationState>
✅ 7. Redirect la login dacă utilizatorul nu e autentificat
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Nav
@attribute [Authorize]
<AuthorizeView>
<Authorized>
@ChildContent
</Authorized>
<NotAuthorized>
@code {
protected override void OnInitialized()
{
Nav.NavigateTo("/login");
}
}
</NotAuthorized>
</AuthorizeView>
📝 Rezumat
În acest articol ai învățat cum să:
-
Creezi un AuthenticationStateProvider customizat
-
Simulezi login/logout în Blazor WebAssembly
-
Protejezi paginile cu [Authorize]
-
Redirecționezi utilizatorii neautentificați