Verificatie toevoegen aan uw Windows-app (WPF)

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:

1. Meld u aan bij de Azure Portal.

2. 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.

3. Zoek en selecteer Microsoft Entra ID.

4. 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)

5. Selecteer registreren.

6. Selecteer onder BeherenEen API beschikbaar maken>Een bereiktoevoegen.

7. Accepteer de standaardinstelling voor URI van de toepassings-iddoor Opslaan te selecteren en door te gaan.

8. 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

9. Selecteer Bereik toevoegen om het toevoegen van het bereik te voltooien.

10. 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.

11. Selecteer Overzicht.

12. 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.

1. Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer vervolgens NuGet-pakketten beheren....

2. Selecteer op het nieuwe tabblad Bladerenen voer Microsoft.Identity.Web in het zoekvak in.

   

3. Selecteer het Microsoft.Identity.Web-pakket en druk vervolgens op Installeren.

4. Volg de aanwijzingen om de installatie van het pakket te voltooien.

5. Open Program.cs. Voeg het volgende toe aan de lijst met using-instructies:

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

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

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

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

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

9. 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:

1. Klik met de rechtermuisknop op het TodoAppService.NET6 project en selecteer Publiceren....
2. 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.

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).

1. Selecteer in de Azure-portalMicrosoft Entra ID>App-registraties>Nieuwe registratie.

2. 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

3. Selecteer registreren.

4. Selecteer API-machtigingen>Een machtiging toevoegen>Mijn API's.

5. 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.

   

6. Selecteer onder Machtigingen selecteren, selecteer access_as_useren selecteer vervolgens Machtigingen toevoegen.

7. Selecteer Verificatie>Mobiele en bureaubladtoepassingen.

8. Schakel het selectievakje naast https://login.microsoftonline.com/common/oauth2/nativeclientin.

9. Schakel het selectievakje naast msal{client-id}://auth in (vervang {client-id} door uw toepassings-id).

10. Selecteer URI-toevoegen en voeg http://localhost toe in het veld voor extra URI's.

11. Selecteer onder aan de pagina opslaan.

12. 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.WPFproject in als het opstartproject. Voeg de MSAL- (Microsoft Identity Library) toe aan het TodoApp.WPF-project:

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

1. Klik met de rechtermuisknop op het project en selecteer vervolgens NuGet-pakketten beheren....

2. Selecteer het tabblad Bladeren.

3. Voer Microsoft.Identity.Client in het zoekvak in en druk op Enter.

4. Selecteer het Microsoft.Identity.Client resultaat en klik vervolgens op Installeren.

   

5. 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 het bestand App.xaml.cs in het TodoApp.WPF-project.

Voeg de volgende using instructies toe aan het begin van het bestand:

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

Verwijder de eigenschap TodoService en vervang deze door de volgende code:

static App()
{
    IdentityClient = PublicClientApplicationBuilder.Create(Constants.ApplicationId)
        .WithAuthority(AzureCloudInstance.AzurePublic, "common")
        .WithRedirectUri("http://localhost")
        .Build();
    TodoService = new RemoteTodoService(async () => await GetAuthenticationToken());
}

public static IPublicClientApplication IdentityClient { get; }

public static ITodoService TodoService { get; }

public static async Task<AuthenticationToken> GetAuthenticationToken()
{
    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 ?? ""
    };
}

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.

De app testen

U moet op F5- kunnen drukken om de app uit te voeren. Wanneer de app wordt uitgevoerd, wordt er een browser geopend om u te vragen om verificatie. De eerste keer dat de app wordt uitgevoerd, wordt u gevraagd toestemming te geven voor de toegang:

Druk op Ja om door te gaan naar uw app.

Volgende stappen

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

Meer lezen

• quickstart: Een web-API beveiligen met het Microsoft Identity Platform
• quickstart: Een token verkrijgen en Microsoft Graph API aanroepen vanuit een bureaubladtoepassing
• Microsoft Identity Platform: Windows Presentation Foundation-zelfstudie