Verificatie toevoegen aan uw .NET MAUI-app

Artikel
01/12/2024

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

In deze zelfstudie voegt u Microsoft-verificatie toe aan het TodoApp-project met behulp van Microsoft Entra-id. Voordat u deze zelfstudie voltooit, moet u ervoor zorgen dat u het project hebt gemaakt en de back-end-hebt geïmplementeerd.

Fooi

Hoewel we Microsoft Entra ID gebruiken voor verificatie, kunt u elke gewenste verificatiebibliotheek gebruiken met Azure Mobile Apps.

Verificatie toevoegen aan uw back-endservice

Uw back-endservice is een standaardservice ASP.NET 6. Elke zelfstudie die laat zien hoe u verificatie inschakelt voor een ASP.NET 6-service werkt met Azure Mobile Apps.

Als u Microsoft Entra-verificatie wilt inschakelen voor uw back-endservice, moet u het volgende doen:

Registreer een toepassing bij Microsoft Entra-id.
Verificatiecontrole toevoegen aan het back-endproject ASP.NET 6.

De toepassing registreren

Registreer eerst de web-API in uw Microsoft Entra-tenant en voeg een bereik toe door de volgende stappen uit te voeren:

Meld u aan bij de Azure Portal.
Als u toegang hebt tot meerdere tenants, gebruikt u de Mappen en abonnementen filter in het bovenste menu om over te schakelen naar de tenant waarin u de toepassing wilt registreren.
Zoek en selecteer Microsoft Entra ID.
Selecteer onder BeherenApp-registraties>Nieuwe registratie.
- naam: voer een naam in voor uw toepassing; Bijvoorbeeld TodoApp Quickstart. Gebruikers van uw app zien deze naam. U kunt deze later wijzigen.
- Ondersteunde accounttypen: accounts in elke organisatiemap (Elke Microsoft Entra-directory - Multitenant) en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox)
Selecteer registreren.
Selecteer onder BeherenEen API beschikbaar maken>Een bereiktoevoegen.
Accepteer de standaardinstelling voor URI van de toepassings-iddoor Opslaan te selecteren en door te gaan.
Voer de volgende gegevens in:
- bereiknaam: access_as_user
- Wie kan toestemming geven?: beheerders en gebruikers
- weergavenaam van beheerderstoestemming: Access TodoApp
- beschrijving van beheerderstoestemming: Allows the app to access TodoApp as the signed-in user.
- weergavenaam van gebruikerstoestemming: Access TodoApp
- beschrijving van gebruikerstoestemming: Allow the app to access TodoApp on your behalf.
- status: ingeschakeld
Selecteer Bereik toevoegen om het toevoegen van het bereik te voltooien.
Let op de waarde van het bereik, vergelijkbaar met api://<client-id>/access_as_user (ook wel het web-API-bereikgenoemd). U hebt het bereik nodig bij het configureren van de client.
Selecteer Overzicht.
Noteer de id van de toepassing (client) in de sectie Essentials (ook wel de web-API-toepassings-idgenoemd). U hebt deze waarde nodig om de back-endservice te configureren.

Open Visual Studio en selecteer het TodoAppService.NET6 project.

Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer vervolgens NuGet-pakketten beheren....
Selecteer op het nieuwe tabblad Bladerenen voer Microsoft.Identity.Web in het zoekvak in.
Selecteer het Microsoft.Identity.Web-pakket en druk vervolgens op Installeren.
Volg de aanwijzingen om de installatie van het pakket te voltooien.
Open Program.cs. Voeg het volgende toe aan de lijst met using-instructies:

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

Voeg de volgende code toe direct boven de aanroep van builder.Services.AddDbContext():

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();

Voeg de volgende code toe direct boven de aanroep van app.MapControllers():

app.UseAuthentication();
app.UseAuthorization();

Uw Program.cs ziet er nu als volgt uit:

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();

Bewerk de Controllers\TodoItemController.cs. Voeg een [Authorize] kenmerk toe aan de klasse. Uw klas moet er als volgt uitzien:

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))
    {
    }
  }
}

Bewerk de appsettings.json. Voeg het volgende blok toe:

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },

Vervang de <client-id> door de web-API-toepassings-id die u eerder hebt vastgelegd. Zodra dit is voltooid, ziet deze er als volgt uit:

{
  "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": "*"
}

Publiceer uw service opnieuw naar Azure:

Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer Publiceren....
Selecteer de knop Publiceren in de rechterbovenhoek van het tabblad.

Open een browser om te https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0. Houd er rekening mee dat de service nu een 401 antwoord retourneert, wat aangeeft dat verificatie vereist is.

schermopname van de browser met een fout.

Uw app registreren bij de identiteitsservice

Het Microsoft Data Sync Framework biedt ingebouwde ondersteuning voor elke verificatieprovider die gebruikmaakt van een Json Web Token (JWT) binnen een header van de HTTP-transactie. Deze toepassing maakt gebruik van de MSAL - (Microsoft Authentication Library) om een dergelijk token aan te vragen en de aangemelde gebruiker te autoriseren bij de back-endservice.

Een systeemeigen clienttoepassing configureren

U kunt systeemeigen clients registreren om verificatie toe te staan voor web-API's die worden gehost in uw app met behulp van een clientbibliotheek zoals de Microsoft Identity Library (MSAL).

Selecteer in de Azure-portalMicrosoft Entra ID>App-registraties>Nieuwe registratie.
Op de pagina Een toepassing registreren:
- voer een -naam in voor uw app-registratie. U kunt de naam native-quickstart gebruiken om deze te onderscheiden van de naam die wordt gebruikt door uw back-endservice.
- Selecteer Accounts in een organisatiedirectory (Elke Microsoft Entra-directory - Multitenant) en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox).
- In omleidings-URI:
  - Selecteer openbare client (mobiele & desktop)
  - Voer de URL-quickstart://auth in
Selecteer registreren.
Selecteer API-machtigingen>Een machtiging toevoegen>Mijn API's.
Selecteer de app-registratie die u eerder hebt gemaakt voor uw back-endservice. Als u de app-registratie niet ziet, controleert u of u het access_as_user bereik hebt toegevoegd.
Selecteer onder Machtigingen selecteren, selecteer access_as_useren selecteer vervolgens Machtigingen toevoegen.
Selecteer Verificatie>Mobiele en bureaubladtoepassingen.
Schakel het selectievakje naast https://login.microsoftonline.com/common/oauth2/nativeclientin.
Schakel het selectievakje naast msal{client-id}://auth in (vervang {client-id} door uw toepassings-id).
Selecteer URI-toevoegen en voeg http://localhost toe in het veld voor extra URI's.
Selecteer onder aan de pagina opslaan.
Selecteer Overzicht. Noteer de id van de toepassings-id (client) (de systeemeigen clienttoepassings-id) omdat u deze nodig hebt om de mobiele app te configureren.

We hebben drie omleidings-URL's gedefinieerd:

http://localhost wordt gebruikt door WPF-toepassingen.
https://login.microsoftonline.com/common/oauth2/nativeclient wordt gebruikt door UWP-toepassingen.
msal{client-id}://auth wordt gebruikt door mobiele toepassingen (Android en iOS).

De Microsoft Identity Client toevoegen aan uw app

Open de TodoApp.sln-oplossing in Visual Studio en stel het TodoApp.MAUI project in als het opstartproject. Voeg de MSAL- (Microsoft Identity Library) toe aan het TodoApp.MAUI-project:

Voeg de Microsoft Identity Library (MSAL) toe aan het platformproject:

Klik met de rechtermuisknop op het project en selecteer vervolgens NuGet-pakketten beheren....
Selecteer het tabblad Bladeren.
Voer Microsoft.Identity.Client in het zoekvak in en druk op Enter.
Selecteer het Microsoft.Identity.Client resultaat en klik vervolgens op Installeren.
Accepteer de gebruiksrechtovereenkomst om door te gaan met de installatie.

Voeg de systeemeigen client-id en het back-endbereik toe aan de configuratie.

Open het TodoApp.Data project en bewerk het Constants.cs-bestand. Constanten toevoegen voor ApplicationId en 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>"
      };
  }

Vervang de <client-id> door de systeemeigen clienttoepassings-id die u hebt ontvangen bij het registreren van de clienttoepassing in Microsoft Entra-id en de <scope> door het web-API-bereik u hebt gekopieerd toen u een API- beschikbaar maakte tijdens het registreren van de servicetoepassing.

Open de MainPage.xaml.cs-klasse in het TodoApp.MAUI-project. Voeg de volgende using-instructies toe:

using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;

Voeg in de klasse MainPage een nieuwe eigenschap toe:

public IPublicClientApplication IdentityClient { get; set; }

Pas de constructor aan om te lezen:

public MainPage()
{
    InitializeComponent();
    TodoService = new RemoteTodoService(GetAuthenticationToken);
    viewModel = new MainViewModel(this, TodoService);
    BindingContext = viewModel;
}

Voeg de methode GetAuthenticationToken toe aan de klasse:

public async Task<AuthenticationToken> GetAuthenticationToken()
{
    if (IdentityClient == null)
    {
#if ANDROID
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
            .WithParentActivityOrWindow(() => Platform.CurrentActivity)
            .Build();
#elif IOS
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithIosKeychainSecurityGroup("com.microsoft.adalcache")
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
            .Build();
#else
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
            .Build();
#endif
    }

    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)
    {
        Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
    }

    if (tryInteractiveLogin)
    {
        try
        {
            result = await IdentityClient
                .AcquireTokenInteractive(Constants.Scopes)
                .ExecuteAsync();
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"MSAL Interactive Error: {ex.Message}");
        }
    }

    return new AuthenticationToken
    {
        DisplayName = result?.Account?.Username ?? "",
        ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
        Token = result?.AccessToken ?? "",
        UserId = result?.Account?.Username ?? ""
    };
}

De methode GetAuthenticationToken() werkt met de Microsoft Identity Library (MSAL) om een toegangstoken op te halen dat geschikt is voor het autoriseren van de aangemelde gebruiker naar de back-endservice. Deze functie wordt vervolgens doorgegeven aan de RemoteTodoService voor het maken van de client. Als de verificatie is geslaagd, wordt de AuthenticationToken geproduceerd met gegevens die nodig zijn om elke aanvraag te autoriseren. Zo niet, dan wordt in plaats daarvan een verlopen ongeldig token geproduceerd.

We kunnen platformspecifieke opties toevoegen met behulp van de #if gebieden met een platformaanduiding. Android vereist bijvoorbeeld dat we de bovenliggende activiteit opgeven, die wordt doorgegeven vanaf de belpagina.

De Android-app configureren voor verificatie

Maak een nieuwe klasse Platforms\Android\MsalActivity.cs met de volgende code:

using Android.App;
using Android.Content;
using Microsoft.Identity.Client;

namespace TodoApp.MAUI
{
    [Activity(Exported = true)]
    [IntentFilter(new[] { Intent.ActionView },
        Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
        DataHost = "auth",
        DataScheme = "msal{client-id}")]
    public class MsalActivity : BrowserTabActivity
    {
    }
}

Vervang {client-id} door de toepassings-id van de systeemeigen client (die hetzelfde is als Constants.ApplicationId).

Als uw project is gericht op Android versie 11 (API-versie 30) of hoger, moet u uw AndroidManifest.xml bijwerken om te voldoen aan de zichtbaarheidsvereisten voor Android-pakket. Open Platforms/Android/AndroidManifest.xml en voeg de volgende queries/intent knooppunten toe aan het manifest-knooppunt:

<manifest>
  ...
  <queries>
    <intent>
      <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
  </queries>
</manifest>

Open MauiProgram.cs. Neem de volgende using instructies boven aan het bestand op:

using Microsoft.Identity.Client;

Werk de opbouwfunctie bij naar de volgende code:

    builder
        .UseMauiApp<App>()
        .ConfigureLifecycleEvents(events =>
        {
#if ANDROID
            events.AddAndroid(platform =>
            {
                platform.OnActivityResult((activity, rc, result, data) =>
                {
                    AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(rc, result, data);
                });
            });
#endif
        })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

Als u deze stap uitvoert nadat u de toepassing voor iOS hebt bijgewerkt, voegt u de code toe die is aangewezen door de #if ANDROID (inclusief de #if en #endif). De compiler kiest het juiste stukje code op basis van het platform dat wordt gecompileerd. Deze code kan vóór of na het bestaande blok voor iOS worden geplaatst.

Wanneer voor Android verificatie is vereist, wordt er een identiteitsclient verkregen en vervolgens overgeschakeld naar een interne activiteit waarmee de systeembrowser wordt geopend. Zodra de verificatie is voltooid, wordt de systeembrowser omgeleid naar de gedefinieerde omleidings-URL (msal{client-id}://auth). De MsalActivity trapt de omleidings-URL, die vervolgens terugschakelt naar de hoofdactiviteit door OnActivityResult()aan te roepen. De methode OnActivityResult() roept de MSAL-verificatiehulp aan om de transactie te voltooien.

De Android-app testen

Stel TodoApp.MAUI in als opstartproject, selecteer een Android-emulator als doel en druk op F5- om de app te bouwen en uit te voeren. Wanneer de app wordt gestart, wordt u gevraagd u aan te melden bij de app. Tijdens de eerste uitvoering wordt u gevraagd om toestemming te geven voor de app. Zodra de verificatie is voltooid, wordt de app uitgevoerd als normaal.

De Windows-app testen

Stel TodoApp.MAUI in als opstartproject, selecteer Windows Machine als doel en druk vervolgens op F5- om de app te bouwen en uit te voeren. Wanneer de app wordt gestart, wordt u gevraagd u aan te melden bij de app. Tijdens de eerste uitvoering wordt u gevraagd om toestemming te geven voor de app. Zodra de verificatie is voltooid, wordt de app uitgevoerd als normaal.

Volgende stappen

Configureer vervolgens uw toepassing om offline te werken door een offlinearchief te implementeren.

Delen via