Compartir a través de

.NET MAUI Blazor Hybrid y aplicación web con ASP.NET Core Identity

En esta aplicación de ejemplo, se muestra cómo compilar una .NET MAUIBlazor Hybrid aplicación con un que usa ASP.NET Blazor Web App Core Identity. Muestra cómo compartir una interfaz de usuario común y autenticarse con ASP.NET cuentas locales principales Identity . Aunque se usa ASP.NET Core Identity , puede usar este patrón para cualquier proveedor de autenticación de un cliente MAUI Blazor Hybrid .

El ejemplo :

  • Configura la interfaz de usuario para mostrar u ocultar páginas en función de la autenticación del usuario.
  • Configura ASP.NET puntos de conexión principales Identity para clientes remotos.
  • Inicia y cierra la sesión de los usuarios y actualiza los tokens del cliente MAUI.
  • Guarda y recupera tokens en el almacenamiento seguro del dispositivo.
  • Llama a un punto de conexión seguro (/api/weather) desde el cliente para los datos meteorológicos.

Requisitos previos y pasos preliminares

Para conocer los requisitos previos y los pasos preliminares, consulta Compilar una .NET MAUIBlazor Hybrid aplicación. Se recomienda usar el tutorial de MAUI Blazor Hybrid para configurar el sistema local para el desarrollo de MAUI antes de usar las instrucciones de este artículo y la aplicación de ejemplo.

Aplicación de ejemplo

Obtenga la aplicación de ejemplo en la MauiBlazorWebIdentity carpeta del repositorio de GitHub deBlazor ejemplos (dotnet/blazor-samples) (.NET 9 o posterior).

La aplicación de ejemplo es una solución de inicio que contiene una aplicación MAUI Blazor Hybrid nativa y multiplataforma, un Blazor Web App, y una biblioteca de Razor clases (RCL) que contiene la interfaz de usuario compartida (Razor componentes) que usan las aplicaciones nativas y web.

  1. Clone este repositorio o descargue un archivo ZIP del repositorio. Para obtener más información, consulte Cómo descargar un ejemplo.
  2. Asegúrese de que tiene .NET 9 y la carga de trabajo MAUI instalada (.NET MAUI documentación).
  3. Abra la solución en Visual Studio (2022 o posterior) o VS Code con la .NET MAUI extensión instalada.
  4. Establezca el MauiBlazorWeb proyecto MAUI como proyecto de inicio. En Visual Studio, haga clic con el botón secundario en el proyecto y seleccione Establecer como proyecto de inicio.
  5. Inicie el MauiBlazorWeb.Web proyecto sin depurar. En Visual Studio, haga clic con el botón secundario en el proyecto y seleccione Depurar>iniciar sin depurar.
  6. Inspeccione los Identity puntos de conexión navegando a https://localhost:7157/swagger en un explorador.
  7. Vaya hasta https://localhost:7157/account/register para registrar un usuario en el Blazor Web Apparchivo . Inmediatamente después de que el usuario se registre, use el enlace Haga clic aquí para confirmar su cuenta en la interfaz de usuario para confirmar la dirección de correo electrónico del usuario porque un remitente de correo electrónico real no está registrado para la confirmación de la cuenta.
  8. Inicie (F5) el MauiBlazorWeb proyecto MAUI. Puedes establecer el destino de depuración en Windows o en un emulador de Android.
  9. Tenga en cuenta que solo puede ver las Home páginas y Login .
  10. Inicie sesión con el usuario que registró.
  11. Observe que ahora puede ver las páginas compartidas Counter y Weather .
  12. Cierre la sesión y observe que solo puede volver a ver las Home páginas y Login .
  13. Navegue hasta https://localhost:7157/ en un navegador y la aplicación web se comportará de la misma manera.

Interfaz de usuario compartida

La interfaz de usuario compartida está en el MauiBlazorWeb.Shared proyecto. Este proyecto contiene los Razor componentes que se comparten entre el MAUI y Blazor Web App los proyectos (Homepáginas , Contador y Tiempo). El componente y Weather el Counter componente están protegidos por atributos, por lo que los usuarios no pueden navegar hasta [Authorize]ellos a menos que hayan iniciado sesión en la aplicación.

En las Razor directivas en la parte superior de los Counter archivos component (MauiBlazorWeb.Shared/Pages/Counter.razor) y Weather component (MauiBlazorWeb.Shared/Pages/Weather.razor):

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

Aplicación MAUI y Blazor Web App enrutamiento

El Routes componente utiliza un AuthorizeRouteView para enrutar a los usuarios en función de su estado de autenticación. Si un usuario no está autenticado, se le redirige a la Login página. Para obtener más información, consulte ASP.NET Core Blazor autenticación y autorización.

En MauiBlazorWeb.Web/Components/Routes.razor:

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

El NavMenu componente contiene el menú de navegación que utiliza un AuthorizeView componente para mostrar u ocultar vínculos en función del estado de autenticación del usuario.

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

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

Proyecto de servidor

El Blazor Web App proyecto (MauiBlazorWeb.Web) de la aplicación de muestra contiene las páginas principales Identity ASP.NET y usa la clase de SignInManager<TUser> marco para administrar inicios de sesión y usuarios en el servidor. Para que el cliente MAUI (o cualquier cliente externo) se autentique, los Identity puntos de conexión deben estar registrados y expuestos. En el Program archivo, Identity los puntos de conexión se configuran con las llamadas a:

En MauiBlazorWeb.Web/Program.cs:

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

...

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

...

app.MapAdditionalIdentityEndpoints();

Importante

ASP.NET páginas principales Identity y la implementación de la SignInManager<TUser> clase de marco para administrar inicios de sesión y usuarios se genera automáticamente al crear un proyecto a partir de la Blazor Web App plantilla de proyecto con cuentas individuales.

Este artículo se centra en el uso de la aplicación de ejemplo proporcionada; Pero al crear un nuevo proyecto a partir de la Blazor Web App plantilla, debe eliminar la llamada generada a AddIdentityCookies ON AddAuthentication. La llamada no es necesaria cuando se implementa la API, como MapAdditionalIdentityEndpoints en la aplicación de ejemplo, y da como resultado un error si se deja en la aplicación.

Inicie sesión desde el cliente MAUI

El Login componente (/identity/login punto final) es donde el usuario inicia sesión. El componente inyecta el MauiAuthenticationStateProvider (MauiBlazorWeb/Services/MauiAuthenticationStateProvider.cs) y lo AuthenticationStateProvider utiliza para autenticar al usuario y redirigirlo a la página de inicio si tiene éxito. Cuando cambia el estado, el AuthorizeView componente muestra los vínculos adecuados en función del estado de autenticación del usuario.

En MauiBlazorWeb/Components/Pages/Login.razor:

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

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

    Navigation.NavigateTo("");
}

Nota:

En este ejemplo solo se implementan las páginas de inicio y cierre de sesión en el cliente MAUI, pero puede crear páginas de registro y otras páginas de administración en los puntos de conexión expuestos Identity para obtener más funcionalidad. Para obtener más información sobre los puntos de Identity conexión, consulte Uso Identity para proteger un back-end de API web para SPA.

Proveedor de estado de autenticación MAUI (MauiAuthenticationStateProvider)

La MauiAuthenticationStateProvider clase es responsable de administrar el estado de autenticación del usuario y proporcionar el AuthenticationState a la aplicación. La MauiAuthenticationStateProvider clase utiliza un HttpClient para realizar solicitudes al servidor para autenticar al usuario. Para obtener más información, consulte ASP.NET Core Blazor Hybrid autenticación y autorización.

En 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 clase usa () para controlar las HttpClientHelperMauiBlazorWeb/Services/HttpClientHelper.csllamadas a localhost a través de los emuladores y simuladores para realizar pruebas. Para obtener más información sobre cómo llamar a servicios locales desde emuladores y simuladores, consulta Conexión a servicios web locales desde emuladores de Android y simuladores de iOS (.NET MAUIdocumentación).

El proveedor de estado de autenticación MAUI también usa la clase (MauiBlazorWeb/Services/TokenStorage.cs) que usa SecureStorage API (.NET MAUI documentación) para almacenar el token del usuario de forma segura en el dispositivo.TokenStorage Actualiza el token cerca de la caducidad del token para evitar inicios de sesión de usuario.

Archivo MAUI MauiProgram

El archivo del proyecto MauiProgram MAUI (MauiProgram.cs) es donde se MauiAuthenticationStateProvider registra en el contenedor DI. También se registran los componentes principales de autorización, donde se definen la API, como AuthorizeView el componente .

En MauiBlazorWeb/MauiProgram.cs, la funcionalidad principal se agrega llamando a AddAuthorizationCore:

builder.Services.AddAuthorizationCore();

El () personalizado AuthenticationStateProvider de la aplicación se registra en MauiProgram.cs:MauiAuthenticationStateProvider

builder.Services.AddScoped<MauiAuthenticationStateProvider>();

Úselo MauiAuthenticationStateProvider cuando la aplicación requiera un AuthenticationStateProvider:

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