.NET MAUI Blazor Hybrid e Web App con ASP.NET Core Identity

2025-06-21

Questa app di esempio illustra come creare un'app .NET MAUIBlazor Hybrid con un Blazor Web App che utilizza ASP.NET Core Identity. Viene illustrato come condividere l'interfaccia utente comune ed eseguire l'autenticazione con gli account locali ASP.NET Core Identity . Anche se viene utilizzato ASP.NET Core Identity , è possibile utilizzare questo modello per qualsiasi provider di autenticazione da un client MAUI Blazor Hybrid .

Il campione:

Configura l'interfaccia utente per mostrare o nascondere le pagine in base all'autenticazione dell'utente.
Configura gli endpoint ASP.NET Core Identity per i client remoti.
Effettua l'accesso, la disconnessione e l'aggiornamento dei token dal client MAUI.
Salva e recupera i token nell'archiviazione sicura del dispositivo.
Chiama un endpoint sicuro (/api/weather) dal client per i dati meteorologici.

Prerequisiti e passaggi preliminari

Per i prerequisiti e i passaggi preliminari, vedere Creare un'app.NET MAUIBlazor Hybrid. È consigliabile usare l'esercitazione MAUI Blazor Hybrid per configurare il sistema locale per lo sviluppo MAUI prima di usare le indicazioni in questo articolo e l'app di esempio.

Esempio di app

Ottenere l'app di esempio nella MauiBlazorWebIdentity cartella del repository GitHub diBlazor esempi (dotnet/blazor-samples) (.NET 9 o versione successiva).

L'app di esempio è una soluzione iniziale che contiene un'app MAUI Blazor Hybrid nativa e multipiattaforma, una Blazor Web Applibreria di classi (RCL) che Razor contiene l'interfaccia utente condivisa (Razor componenti) usata dalle app native e Web.

Clona questo repository o scarica un archivio ZIP del repository. Per ulteriori informazioni, vedere Come scaricare un esempio.
Assicurarsi di avere installato .NET 9 e il carico di lavoro MAUI (.NET MAUI documentazione).
Aprire la soluzione in Visual Studio (2022 o versione successiva) o VS Code con l'estensione .NET MAUI installata.
Impostare il MauiBlazorWeb progetto MAUI come progetto di avvio. In Visual Studio fare clic con il pulsante destro del mouse sul progetto e scegliere Imposta come progetto di avvio.
Avviare il progetto senza eseguire il MauiBlazorWeb.Web debug. In Visual Studio fare clic con il pulsante destro del mouse sul progetto e scegliere Avvia debug>senza debug.
Esaminare gli Identity endpoint passando a https://localhost:7157/swagger in un browser.
Passare a https://localhost:7157/account/register per registrare un utente in Blazor Web App. Subito dopo la registrazione dell'utente, utilizzare il collegamento Fai clic qui per confermare l'account nell'interfaccia utente per confermare l'indirizzo e-mail dell'utente perché un mittente di posta elettronica reale non è registrato per la conferma dell'account.
Avvia (F5) il MauiBlazorWeb progetto MAUI. È possibile impostare la destinazione di debug su Windows o su un emulatore Android.
Si noti che è possibile visualizzare solo le Home pagine e Login .
Accedi con l'utente che hai registrato.
Si noti che ora è possibile visualizzare le pagine condivise e quelle condivise CounterWeather .
Esci e nota che puoi vedere di nuovo solo le Home pagine e Login .
Passa a https://localhost:7157/ in un browser e l'app Web si comporta allo stesso modo.

Interfaccia utente condivisa

L'interfaccia utente condivisa si trova nel MauiBlazorWeb.Shared progetto. Questo progetto contiene i Razor componenti condivisi tra MAUI e Blazor Web App i progetti (Home, Contatore e Pagine meteo). Il Counter componente e Weather il componente sono protetti da [Authorize] attributi, quindi gli utenti non possono accedervi a meno che non abbiano effettuato l'accesso all'app.

Razor Nelle direttive all'inizio dei Counter file component (MauiBlazorWeb.Shared/Pages/Counter.razor) e Weather component (MauiBlazorWeb.Shared/Pages/Weather.razor):

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

App MAUI e Blazor Web App routing

Il Routes componente utilizza un AuthorizeRouteView per instradare gli utenti in base al loro stato di autenticazione. Se un utente non è autenticato, viene reindirizzato alla Login pagina. Per ulteriori informazioni, vedere ASP.NET Core Blazor autenticazione e autorizzazione.

In MauiBlazorWeb.Web/Components/Routes.razor:

<AuthorizeRouteView ...>
    <Authorizing>
        Authorizing...
    </Authorizing>
    <NotAuthorized>
        <Login />
    </NotAuthorized>
</AuthorizeRouteView>

Il NavMenu componente contiene il menu di navigazione che utilizza un AuthorizeView componente per mostrare o nascondere i collegamenti in base allo stato di autenticazione dell'utente.

In MauiBlazorWeb.Web/Components/Layout/NavMenu.razor:

<AuthorizeView>
    <NotAuthorized>
       ...
    </NotAuthorized>
    <Authorized>
        ...
    </Authorized>
</AuthorizeView>

Progetto server

Il Blazor Web App progetto (MauiBlazorWeb.Web) dell'app di esempio contiene le pagine ASP.NET Core Identity e usa la SignInManager<TUser> classe framework per gestire gli accessi e gli utenti nel server. Affinché il client MAUI (o qualsiasi client esterno) possa eseguire l'autenticazione, gli Identity endpoint devono essere registrati ed esposti. Nel file, Program gli Identity endpoint vengono configurati con le chiamate a:

AddIdentityApiEndpoints
MapIdentityApi
MapAdditionalIdentityEndpoints (MauiBlazorWeb.Web/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs).

In MauiBlazorWeb.Web/Program.cs:

builder.Services.AddIdentityApiEndpoints<ApplicationUser>(...)
    .AddEntityFrameworkStores<ApplicationDbContext>();

...

app.MapGroup("/identity").MapIdentityApi<ApplicationUser>();

...

app.MapAdditionalIdentityEndpoints();

Importante

ASP.NET pagine principali Identity e l'implementazione della classe framework per gestire gli accessi e gli utenti vengono generate automaticamente quando si crea un progetto dal modello di SignInManager<TUser>Blazor Web App progetto con account individuali.

Questo articolo è incentrato sull'uso dell'app di esempio fornita; Tuttavia, quando si crea un nuovo progetto dal Blazor Web App modello, è necessario rimuovere la chiamata generata a AddIdentityCookies .AddAuthentication La chiamata non è necessaria quando si implementa l'API, ad esempio MapAdditionalIdentityEndpoints nell'app di esempio, e genera un errore se lasciata nell'app.

Accedere dal client MAUI

Il Login componente (/identity/login endpoint) è il punto in cui l'utente effettua l'accesso. Il componente inietta il MauiAuthenticationStateProvider (MauiBlazorWeb/Services/MauiAuthenticationStateProvider.cs) e utilizza il AuthenticationStateProvider per autenticare l'utente e reindirizzarlo alla home page in caso di successo. Quando lo stato cambia, il AuthorizeView componente mostra i collegamenti appropriati in base allo stato di autenticazione dell'utente.

In MauiBlazorWeb/Components/Pages/Login.razor:

private async Task LoginUser()
{
    await AuthStateProvider.LogInAsync(LoginModel);

    if (AuthStateProvider.LoginStatus != LoginStatus.Success)
    {
        loginFailureHidden = false;
        return;
    }

    Navigation.NavigateTo("");
}

Annotazioni

In questo esempio vengono implementate solo le pagine di accesso e disconnessione nel client MAUI, ma è possibile creare Register e altre pagine di gestione sugli endpoint esposti Identity per ottenere ulteriori funzionalità. Per altre informazioni sugli Identity endpoint, vedere Usare Identity per proteggere un back-end API Web per le applicazioni a pagina singola.

Provider dello stato di autenticazione MAUI (`MauiAuthenticationStateProvider`)

La MauiAuthenticationStateProvider classe è responsabile della gestione dello stato di autenticazione dell'utente e della fornitura di all'app AuthenticationState . La MauiAuthenticationStateProvider classe utilizza un HttpClient per effettuare richieste al server per autenticare l'utente. Per ulteriori informazioni, vedere ASP.NET Core Blazor Hybrid autenticazione e autorizzazione.

In MauiBlazorWeb/Services/MauiAuthenticationStateProvider.cs:

 private async Task<ClaimsPrincipal> LoginWithProviderAsync(LoginRequest loginModel)
 {
    var authenticatedUser = _defaultUser;
    LoginStatus = LoginStatus.None;

    try
    {
        // Call the Login endpoint and pass the email and password
        var httpClient = HttpClientHelper.GetHttpClient();
        var loginData = new { loginModel.Email, loginModel.Password };
        using var response = await httpClient.PostAsJsonAsync(HttpClientHelper.LoginUrl, 
            loginData);

        LoginStatus = 
            response.IsSuccessStatusCode ? LoginStatus.Success : LoginStatus.Failed;

        if (LoginStatus == LoginStatus.Success)
        {
            // Save token to secure storage so the user doesn't have to login 
            // every time
            var token = await response.Content.ReadAsStringAsync();
            _accessToken = await TokenStorage.SaveTokenToSecureStorageAsync(token, 
                loginModel.Email);

            authenticatedUser = CreateAuthenticatedUser(loginModel.Email);
            LoginStatus = LoginStatus.Success;
        }
        else
        {
            LoginFailureMessage = "Invalid Email or Password. Please try again.";
            LoginStatus = LoginStatus.Failed;
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"Error logging in: {ex}");
        LoginFailureMessage = "Server error.";
        LoginStatus = LoginStatus.Failed;
    }

    return authenticatedUser;
}

La MauiAuthenticationStateProvider classe utilizza () per gestire la HttpClientHelperMauiBlazorWeb/Services/HttpClientHelper.cschiamata di localhost tramite gli emulatori e i simulatori per il test. Per altre informazioni sulla chiamata di servizi locali da emulatori e simulatori, vedere Connettersi ai servizi Web locali da emulatori Android e simulatori iOS (.NET MAUI documentazione).

Il provider di stato di autenticazione MAUI usa anche la TokenStorage classe (MauiBlazorWeb/Services/TokenStorage.cs) che usa SecureStorage l'API (.NET MAUI documentation) per archiviare il token dell'utente in modo sicuro nel dispositivo. Aggiorna il token in prossimità della scadenza del token per evitare gli accessi degli utenti.

File MAUI `MauiProgram`

Il file del MauiProgram progetto MAUI (MauiProgram.cs) è la posizione in cui MauiAuthenticationStateProvider è registrato nel contenitore DI. Vengono registrati anche i componenti principali dell'autorizzazione, in cui vengono definite le API, ad esempio i AuthorizeView componenti .

In MauiBlazorWeb/MauiProgram.cs, la funzionalità di base viene aggiunta chiamando AddAuthorizationCore:

builder.Services.AddAuthorizationCore();

L'opzione personalizzata AuthenticationStateProvider (MauiAuthenticationStateProvider) dell'app è registrata in MauiProgram.cs:

builder.Services.AddScoped<MauiAuthenticationStateProvider>();

Utilizzare quando MauiAuthenticationStateProvider l'app richiede un AuthenticationStateProvider:

builder.Services.AddScoped<AuthenticationStateProvider>(s => 
    (MauiAuthenticationStateProvider)
        s.GetRequiredService<MauiAuthenticationStateProvider>());

Condividi tramite