Adición de autenticación a la aplicación De plataforma Uno
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. Para obtener más información sobre cómo integrar MSAL en un proyecto de plataforma Uno, revise su documentación;
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 solución TodoApp.sln
en Visual Studio. Agregue uno.WinUI.MSAL a cada uno de los TodoApp.Uno
proyectos:
Haga clic con el botón derecho en la solución y seleccione Administrar paquetes NuGet para la solución....
Seleccione la pestaña Examinar.
Escriba
Uno.WinUI.MSAL
en el cuadro de búsqueda y, luego, presione Entrar.Seleccione el
Uno.WinUI.MSAL
resultado.En el panel derecho, seleccione cada uno de los
TodoApp.Uno
proyectos.Seleccione Instalar.
Acepte el contrato de licencia para continuar con la instalación.
Use la misma técnica para agregar la biblioteca Microsoft.Identity.Client a cada uno de los TodoApp.Uno
proyectos:
Escriba
Microsoft.Identity.Client
en el cuadro de búsqueda y, luego, presione Entrar.Seleccione el
Microsoft.Identity.Client
resultado.En el panel derecho, seleccione cada uno de los
TodoApp.Uno
proyectos.Seleccione Instalar.
Acepte el contrato de licencia para continuar con la instalación.
Nota:
Asegúrese de instalar las versiones más recientes de estas dos bibliotecas. Los números de versión mínimos son:
- Uno.WinUI.MSAL v4.9.20
- Microsoft.Identity.Client v4.54.1
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 Azure Active Directory
/// </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 MainPage.xaml.cs
archivo en la carpeta superior del TodoApp.Uno
proyecto.
Agregue las siguientes instrucciones using
al principio del archivo:
using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;
using System.Linq;
using Uno.UI.MSAL;
Reemplace los campos y el constructor por el código siguiente:
private readonly IPublicClientApplication _identityClient;
private readonly TodoListViewModel _viewModel;
private readonly ITodoService _service;
public MainPage() {
this.InitializeComponent();
_identityClient = PublicClientApplicationBuilder
.Create(Constants.ApplicationId)
.WithAuthority(AzureCloudInstance.AzurePublic, "common")
#if __IOS__ || __MACOS__ || __ANDROID__
.WithRedirectUri($"msal{Constants.ApplicationId}://auth")
#else
.WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
#endif
#if __IOS__
.WithIosKeychainSecurityGroup("com.microsoft.adalcache")
#endif
.WithUnoHelpers()
.Build();
_service = new RemoteTodoService(GetAuthenticationToken);
_viewModel = new TodoListViewModel(this, _service);
mainContainer.DataContext = _viewModel;
}
Agregue el método siguiente a la MainPage
clase :
public async Task<AuthenticationToken> GetAuthenticationToken()
{
var accounts = await _identityClient.GetAccountsAsync();
AuthenticationResult? result = null;
bool tryInteractiveLogin = false;
try
{
result = await _identityClient
.AcquireTokenSilent(Constants.Scopes, accounts.FirstOrDefault())
.ExecuteAsync();
}
catch (MsalUiRequiredException)
{
tryInteractiveLogin = true;
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
}
if (tryInteractiveLogin)
{
try
{
result = await _identityClient
.AcquireTokenInteractive(Constants.Scopes)
.WithUnoHelpers()
.ExecuteAsync();
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine($"MSAL Interactive Error: {ex.Message}");
}
}
return new AuthenticationToken
{
DisplayName = result?.Account?.Username ?? string.Empty,
ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
Token = result?.AccessToken ?? string.Empty,
UserId = result?.Account?.Username ?? string.Empty
};
}
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 incorrecto expirado en su lugar.
Configuración de la aplicación Android para la autenticación
Abra el TodoApp.Uno.Mobile
proyecto y expanda la Android
carpeta . Cree una nueva clase MsalActivity.Android.cs
(junto con el existente MainActivity.Android.cs
) con el código siguiente:
using Android.Content;
using Microsoft.Identity.Client;
namespace TodoApp.Uno.Droid
{
[Activity(Exported = true)]
[IntentFilter(new[] { Intent.ActionView },
Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
DataHost = "auth",
DataScheme = "msal{client-id}")]
public class MsalActivity : BrowserTabActivity
{
}
}
Reemplace {client-id}
por el identificador de aplicación del cliente nativo (que es el mismo Constants.ApplicationId
que ).
Si el proyecto tiene como destino Android versión 11 (versión 30 de API) o posterior, debe actualizar AndroidManifest.xml
para cumplir los requisitos de visibilidad del paquete de Android. Abra TodoApp.Uno.Mobile/Android/AndroidManifest.xml
y agregue los siguientes queries/intent
nodos al manifest
nodo:
<manifest>
...
<queries>
<intent>
<action android:name="android.support.customtabs.action.CustomTabsService" />
</intent>
</queries>
</manifest>
Edite la MainActivity.Android.cs
clase ; agregue el OnActivityResult
método :
using Android.Views;
using Microsoft.Identity.Client;
namespace TodoApp.Uno.Droid
{
[Activity(
MainLauncher = true,
ConfigurationChanges = global::Uno.UI.ActivityHelper.AllConfigChanges,
WindowSoftInputMode = SoftInput.AdjustNothing | SoftInput.StateHidden
)]
public class MainActivity : Microsoft.UI.Xaml.ApplicationActivity
{
protected override void OnActivityResult(int requestCode, Result resultCode, Android.Content.Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
}
}
}
Cuando Android requiere autenticación, obtiene un cliente de identidad y, a continuación, cambia a una actividad interna que abre el explorador del sistema. Una vez completada la autenticación, el explorador del sistema redirige a la dirección URL de redireccionamiento definida (msal{client-id}://auth
). Intercepta MasalActvity
la dirección URL de redireccionamiento, que luego vuelve a la actividad principal llamando a OnActivityResult()
. El OnActivityResult()
método llama al asistente de autenticación msal para completar la transacción.
Prueba de la aplicación Android
Establezca TodoApp.Uno.Mobile
como proyecto de inicio, seleccione un emulador de Android como destino y presione F5 para compilar y ejecutar la aplicación. Cuando se inicie la aplicación, se le pedirá que inicie sesión en la aplicación. En la primera ejecución, también se le pide que dé su consentimiento a la aplicación. Una vez completada la autenticación, la aplicación se ejecuta como normal.
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