Agregar autenticación a la aplicación windows (WinUI3)
En este tutorial, agregará la autenticación de Microsoft al proyecto TodoApp mediante el identificador de Microsoft Entra. Antes de completar este tutorial, asegúrese de que ha creado el proyecto e implementado el back-end.
Sugerencia
Aunque usamos microsoft Entra ID para la autenticación, puede usar cualquier biblioteca de autenticación que desee con Azure Mobile Apps.
Adición de autenticación al servicio back-end
El servicio back-end es un servicio estándar ASP.NET 6. Cualquier tutorial que muestre cómo habilitar la autenticación para un servicio ASP.NET 6 funciona con Azure Mobile Apps.
Para habilitar la autenticación de Microsoft Entra para el servicio back-end, debe:
- Registrar una aplicación con Microsoft Entra ID.
- Agregue la comprobación de autenticación al proyecto de back-end de ASP.NET 6.
Registro de la aplicación
En primer lugar, registre la API web en el inquilino de Microsoft Entra y agregue un ámbito siguiendo estos pasos:
Inicie sesión en Azure Portal.
Si tiene acceso a varios inquilinos, use el filtro Directorios y suscripciones en el menú superior para cambiar al inquilino en el que desea registrar la aplicación.
Busque y seleccione Microsoft Entra ID.
En Administrar, seleccione Registros de aplicaciones> y, luego, Nuevo registro.
- Nombre: escriba un nombre para la aplicación; por ejemplo, Inicio rápido de TodoApp. Los usuarios de la aplicación verán este nombre. Puede cambiarlo más tarde.
- Tipos de cuenta admitidos: cuentas en cualquier directorio organizativo (cualquier directorio microsoft Entra : multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox)
Seleccione Registrar.
En Administrar, seleccione Exponer una API>Agregar un ámbito.
Para URI de id. de aplicación, acepte el valor predeterminado seleccionando Guardar y continuar.
Escriba la siguiente información:
- Nombre de ámbito:
access_as_user
- ¿Quién puede dar el consentimiento? : Administradores y usuarios
- Nombre para mostrar del consentimiento del administrador:
Access TodoApp
- Descripción del consentimiento del administrador:
Allows the app to access TodoApp as the signed-in user.
- Nombre para mostrar del consentimiento del usuario:
Access TodoApp
- Descripción del consentimiento del usuario:
Allow the app to access TodoApp on your behalf.
- Estado: Enabled
- Nombre de ámbito:
Seleccione Agregar ámbito para completar la adición del ámbito.
Anote el valor del ámbito, similar a
api://<client-id>/access_as_user
(denominado Ámbito de API web). Necesita el ámbito al configurar el cliente.Seleccione Información general.
Anote el identificador de aplicación (cliente) de la sección Essentials (denominado id. de aplicación de API web). Necesita este valor para configurar el servicio back-end.
Abra Visual Studio y seleccione el TodoAppService.NET6
proyecto.
Haga clic con el botón derecho en el
TodoAppService.NET6
proyecto y seleccione Administrar paquetes NuGet....En la nueva pestaña, seleccione Examinar y escriba Microsoft.Identity.Web en el cuadro de búsqueda.
Seleccione el
Microsoft.Identity.Web
paquete y presione Instalar.Siga las indicaciones para completar la instalación del paquete.
Abierto
Program.cs
. Agregue lo siguiente a la lista deusing
instrucciones:
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;
- Agregue el código siguiente directamente encima de la llamada a
builder.Services.AddDbContext()
:
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();
- Agregue el código siguiente directamente encima de la llamada a
app.MapControllers()
:
app.UseAuthentication();
app.UseAuthorization();
Program.cs
ahora debería presentar un aspecto similar a este:
using Microsoft.AspNetCore.Datasync;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;
using TodoAppService.NET6.Db;
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
if (connectionString == null)
{
throw new ApplicationException("DefaultConnection is not set");
}
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();
builder.Services.AddDbContext<AppDbContext>(options => options.UseSqlServer(connectionString));
builder.Services.AddDatasyncControllers();
var app = builder.Build();
// Initialize the database
using (var scope = app.Services.CreateScope())
{
var context = scope.ServiceProvider.GetRequiredService<AppDbContext>();
await context.InitializeDatabaseAsync().ConfigureAwait(false);
}
// Configure and run the web service.
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();
- Edite .
Controllers\TodoItemController.cs
Agregue un[Authorize]
atributo a la clase . La clase debe tener este aspecto:
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Datasync;
using Microsoft.AspNetCore.Datasync.EFCore;
using Microsoft.AspNetCore.Mvc;
using TodoAppService.NET6.Db;
namespace TodoAppService.NET6.Controllers
{
[Authorize]
[Route("tables/todoitem")]
public class TodoItemController : TableController<TodoItem>
{
public TodoItemController(AppDbContext context)
: base(new EntityTableRepository<TodoItem>(context))
{
}
}
}
- Edite .
appsettings.json
Agregue el siguiente bloque:
"AzureAd": {
"Instance": "https://login.microsoftonline.com",
"ClientId": "<client-id>",
"TenantId": "common"
},
Reemplace por <client-id>
el identificador de aplicación de API web que registró anteriormente. Una vez completado, debería tener este aspecto:
{
"AzureAd": {
"Instance": "https://login.microsoftonline.com",
"ClientId": "<client-id>",
"TenantId": "common"
},
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=TodoApp;Trusted_Connection=True"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Vuelva a publicar el servicio en Azure:
- Haga clic con el botón derecho en el
TodoAppService.NET6
proyecto y seleccione Publicar.... - Seleccione el botón Publicar en la esquina superior derecha de la pestaña.
Abra un explorador en https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0
. Tenga en cuenta que el servicio ahora devuelve una 401
respuesta, que indica que se requiere autenticación.
Registro de la aplicación con el servicio de identidad
Microsoft Data Sync Framework tiene compatibilidad integrada con cualquier proveedor de autenticación que use un token web json (JWT) dentro de un encabezado de la transacción HTTP. Esta aplicación usa la Biblioteca de autenticación de Microsoft (MSAL) para solicitar este token y autorizar al usuario que ha iniciado sesión en el servicio back-end.
Configuración de una aplicación de cliente nativo
Puede registrar clientes nativos para permitir la autenticación en las API web hospedadas en la aplicación con una biblioteca cliente como la Biblioteca de identidad de Microsoft (MSAL).
En Azure Portal, seleccione Microsoft Entra ID> Registros de aplicaciones> Nuevo registro.
En la página Registrar una aplicación :
- escriba un nombre para el registro de la aplicación. Es posible que quiera usar el nombre
native-quickstart
para distinguirlo del que usa el servicio back-end. - Seleccione Cuentas en cualquier directorio organizativo (cualquier directorio microsoft Entra - Multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox) .
- En URI de redirección:
- Seleccionar cliente público (móvil y escritorio)
- Escriba la dirección URL.
quickstart://auth
- escriba un nombre para el registro de la aplicación. Es posible que quiera usar el nombre
Seleccione Registrar.
Seleccione Permisos de API>Agregar permiso>Mis API.
Seleccione el registro de aplicaciones que creó anteriormente para el servicio back-end. Si no ve el registro de la aplicación, asegúrese de agregar el ámbito de access_as_user .
En Seleccionar permisos, seleccione access_as_user y, a continuación, seleccione Agregar permisos.
Seleccione Authentication Mobile and desktop applications (Autenticación>de aplicaciones móviles y de escritorio).
Active la casilla situada junto a
https://login.microsoftonline.com/common/oauth2/nativeclient
.Active la casilla situada junto a
msal{client-id}://auth
(reemplazando{client-id}
por el identificador de aplicación).Seleccione Agregar URI y agregue
http://localhost
el campo para URI adicionales.Seleccione Guardar en la parte inferior de la página.
Seleccione Información general. Anote el identificador de aplicación (cliente) (denominado id. de aplicación de Native Client) como necesita para configurar la aplicación móvil.
Hemos definido tres direcciones URL de redireccionamiento:
http://localhost
las aplicaciones de WPF usan .https://login.microsoftonline.com/common/oauth2/nativeclient
se usa en las aplicaciones para UWP.msal{client-id}://auth
se usa en aplicaciones móviles (Android e iOS).
Adición de Microsoft Identity Client a la aplicación
Abra la TodoApp.sln
solución en Visual Studio y establezca el TodoApp.WinUI
proyecto como proyecto de inicio.
Agregue la Biblioteca de identidades de Microsoft (MSAL) al proyecto de plataforma:
Haga clic con el botón derecho en el proyecto y seleccione Administrar paquetes NuGet...
Seleccione la pestaña Examinar.
Escriba
Microsoft.Identity.Client
en el cuadro de búsqueda y, luego, presione Entrar.Seleccione el resultado
Microsoft.Identity.Client
y, luego, haga clic en Instalar.Acepte el contrato de licencia para continuar con la instalación.
Agregue el identificador de cliente nativo y el ámbito de back-end a la configuración.
Abra el TodoApp.Data
proyecto y edite el Constants.cs
archivo. Agregue constantes para ApplicationId
y Scopes
:
public static class Constants
{
/// <summary>
/// The base URI for the Datasync service.
/// </summary>
public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
/// <summary>
/// The application (client) ID for the native app within Microsoft Entra ID
/// </summary>
public static string ApplicationId = "<client-id>";
/// <summary>
/// The list of scopes to request
/// </summary>
public static string[] Scopes = new[]
{
"<scope>"
};
}
Reemplace por <client-id>
el identificador de aplicación de Native Client que recibió al registrar la aplicación cliente en microsoft Entra ID y por <scope>
el ámbito de la API web que copió cuando usó Exponer una API al registrar la aplicación de servicio.
Abra el MainWindow.xaml.cs
archivo en el TodoApp.WinUI
proyecto.
Agregue las siguientes instrucciones using
al principio del archivo:
using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;
using System.Linq;
Ajuste el constructor y los campos para agregar una referencia al cliente de identidad de la siguiente manera:
private readonly TodoListViewModel _viewModel;
private readonly ITodoService _service;
private IPublicClientApplication _identityClient;
public MainWindow()
{
this.InitializeComponent();
ResizeWindow(this, 480, 800);
_service = new RemoteTodoService(GetAuthenticationToken);
_viewModel = new TodoListViewModel(this, _service);
mainContainer.DataContext = _viewModel;
}
public async Task<AuthenticationToken> GetAuthenticationToken()
{
if (_identityClient == null)
{
_identityClient = PublicClientApplicationBuilder.Create(Constants.ApplicationId)
.WithAuthority(AzureCloudInstance.AzurePublic, "common")
.WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
.Build();
}
var accounts = await _identityClient.GetAccountsAsync();
AuthenticationResult? result = null;
try
{
result = await _identityClient
.AcquireTokenSilent(Constants.Scopes, accounts.FirstOrDefault())
.ExecuteAsync();
}
catch (MsalUiRequiredException)
{
result = await _identityClient
.AcquireTokenInteractive(Constants.Scopes)
.ExecuteAsync();
}
catch (Exception ex)
{
// Display the error text - probably as a pop-up
Debug.WriteLine($"Error: Authentication failed: {ex.Message}");
}
return new AuthenticationToken
{
DisplayName = result?.Account?.Username ?? "",
ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
Token = result?.AccessToken ?? "",
UserId = result?.Account?.Username ?? ""
};
}
El GetAuthenticationToken()
método funciona con la Biblioteca de identidades de Microsoft (MSAL) para obtener un token de acceso adecuado para autorizar al usuario que ha iniciado sesión en el servicio back-end. A continuación, esta función se pasa al RemoteTodoService
objeto para crear el cliente. Si la autenticación se realiza correctamente, AuthenticationToken
se genera con los datos necesarios para autorizar cada solicitud. Si no es así, se genera un token expirado en su lugar. Un token expirado o no válido hace que la operación subyacente produzca un error adecuadamente.
Prueba de la aplicación
Debería poder presionar F5 para ejecutar la aplicación. Cuando se ejecuta la aplicación, se abre un explorador para solicitar la autenticación. La primera vez que se ejecuta la aplicación, se le pide que dé su consentimiento al acceso:
Presione Sí para continuar con la aplicación.
Pasos siguientes
A continuación, configure la aplicación para que funcione sin conexión mediante la implementación de un almacén sin conexión.
Información adicional
Comentarios
https://aka.ms/ContentUserFeedback.
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea:Enviar y ver comentarios de