Hitelesítés hozzáadása a Windows (UWP) alkalmazáshoz

Cikk
10/13/2023

Jegyzet

Ez a termék ki van állítva. A .NET 8-at vagy újabb verziót használó projektek cseréjét a Community Toolkit Datasync kódtárcímű témakörben talál.

Ebben az oktatóanyagban Microsoft-hitelesítést ad hozzá a TodoApp-projekthez a Microsoft Entra ID használatával. Az oktatóanyag elvégzése előtt győződjön meg arról, hogy létrehozta a projektet, és üzembe helyezte a háttérrendszert.

Borravaló

Bár a Hitelesítéshez Microsoft Entra-azonosítót használunk, az Azure Mobile Appsben bármilyen hitelesítési kódtárat használhat.

Hitelesítés hozzáadása a háttérszolgáltatáshoz

A háttérszolgáltatás egy standard ASP.NET 6 szolgáltatás. Minden olyan oktatóanyag, amely bemutatja, hogyan engedélyezheti a hitelesítést egy ASP.NET 6 szolgáltatáshoz, az Azure Mobile Apps szolgáltatással működik.

A Microsoft Entra-hitelesítés háttérszolgáltatáshoz való engedélyezéséhez a következőkre van szükség:

Alkalmazás regisztrálása a Microsoft Entra-azonosítóval.
Hitelesítési ellenőrzés hozzáadása a ASP.NET 6 háttérprojekthez.

Az alkalmazás regisztrálása

Először regisztrálja a webes API-t a Microsoft Entra-bérlőben, és adjon hozzá egy hatókört az alábbi lépések végrehajtásával:

Jelentkezzen be az Azure Portal.
Ha több bérlőhöz is hozzáfér, a Címtárak + előfizetések szűrővel váltson arra a bérlőre, amelyben regisztrálni szeretné az alkalmazást.
Keresse meg és válassza ki Microsoft Entra-azonosítót.
A Kezelésterületen válassza Alkalmazásregisztrációk>Új regisztrációslehetőséget.
- Név: adja meg az alkalmazás nevét; például TodoApp gyorsútmutató. Az alkalmazás felhasználói ezt a nevet fogják látni. Később módosíthatja.
- Támogatott fióktípusok: Bármely szervezeti címtárban (Bármely Microsoft Entra címtár – Több-bérlős) és személyes Microsoft-fiókokban (pl. Skype, Xbox)
Válassza a Regisztráláslehetőséget.
A Kezelésterületen válassza az API->Hatókör hozzáadásalehetőséget.
Az alkalmazásazonosító URI-esetében fogadja el az alapértelmezett beállítást a Mentés ésfolytatása lehetőség kiválasztásával.
Adja meg a következő adatokat:
- hatókör neve: access_as_user
- Ki tud hozzájárulni?: rendszergazdák és felhasználók
- rendszergazdai hozzájárulás megjelenítendő neve: Access TodoApp
- rendszergazdai hozzájárulás leírása: Allows the app to access TodoApp as the signed-in user.
- felhasználói hozzájárulás megjelenítendő neve: Access TodoApp
- felhasználói hozzájárulás leírása: Allow the app to access TodoApp on your behalf.
- Állapot: Engedélyezett
Válassza a Hatókör hozzáadása lehetőséget a hatókör hozzáadásának befejezéséhez.
Figyelje meg a hatókör értékét, hasonlóan a api://<client-id>/access_as_user (más néven a Webes API-hatókör). Az ügyfél konfigurálásakor szükség van a hatókörre.
Válassza Áttekintéslehetőséget.
Figyelje meg a alkalmazás (ügyfél) azonosítóját az Essentials szakaszban (a továbbiakban: Web API-alkalmazásazonosító). Erre az értékre van szüksége a háttérszolgáltatás konfigurálásához.

Nyissa meg a Visual Studiót, és válassza ki a TodoAppService.NET6 projektet.

Kattintson a jobb gombbal a TodoAppService.NET6 projektre, majd válassza a NuGet-csomagok kezelése...lehetőséget.
Az új lapon válassza a Tallózáslehetőséget, majd írja be Microsoft.Identity.Web a keresőmezőbe.
Válassza ki a Microsoft.Identity.Web csomagot, majd nyomja le a Telepítésbillentyűt.
Kövesse az utasításokat a csomag telepítésének befejezéséhez.
Nyissa meg Program.cs. Adja hozzá a következőket using utasítások listájához:

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

Adja hozzá a következő kódot közvetlenül a builder.Services.AddDbContext()hívása fölé:

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

Adja hozzá a következő kódot közvetlenül a app.MapControllers()hívása fölé:

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

A Program.cs a következőképpen kell kinéznie:

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

A Controllers\TodoItemController.csszerkesztése. Adjon hozzá egy [Authorize] attribútumot az osztályhoz. Az osztálynak így kell kinéznie:

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

A appsettings.jsonszerkesztése. Adja hozzá a következő blokkot:

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

Cserélje le a <client-id> a korábban rögzített webes API-alkalmazásazonosítóra. Ha elkészült, a következőhöz hasonlóan kell kinéznie:

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

A szolgáltatás ismételt közzététele az Azure-ban:

Kattintson a jobb gombbal a TodoAppService.NET6 projektre, majd válassza a Közzététel...lehetőséget.
Válassza a Közzététel gombot a lap jobb felső sarkában.

Nyisson meg egy böngészőt a https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0. Vegye figyelembe, hogy a szolgáltatás most egy 401 választ ad vissza, amely azt jelzi, hogy hitelesítésre van szükség.

A hibaüzenetet megjelenítő böngésző képernyőképe.

Alkalmazás regisztrálása az identitásszolgáltatásban

A Microsoft Data Sync Framework beépített támogatást nyújt minden olyan hitelesítésszolgáltatóhoz, amely Json Web Tokent (JWT) használ a HTTP-tranzakció fejlécén belül. Ez az alkalmazás a Microsoft Authentication Library (MSAL) használatával kéri le az ilyen jogkivonatot, és engedélyezi a bejelentkezett felhasználót a háttérszolgáltatásnak.

Natív ügyfélalkalmazás konfigurálása

Natív ügyfelek regisztrálásával engedélyezheti az alkalmazásban üzemeltetett webes API-k hitelesítését egy ügyfélkódtár, például a Microsoft Identity Library (MSAL) használatával.

Az Azure Portalválassza Microsoft Entra-azonosítótAlkalmazásregisztrációkÚj regisztrációs.
Az Alkalmazás regisztrálása lapon:
- adjon meg egy név az alkalmazásregisztrációhoz. Érdemes lehet a native-quickstart nevet használni, hogy megkülönböztesse ezt a háttérszolgáltatás által használttól.
- Válassza a -fiókokat bármely szervezeti könyvtárban (Bármely Microsoft Entra könyvtár – Több-bérlős) és személyes Microsoft-fiókokban (pl. Skype, Xbox).
- Átirányítási URI:
  - Válassza nyilvános ügyfél (mobil & asztali)
  - Adja meg az URL-quickstart://auth
Válassza a Regisztráláslehetőséget.
Válassza API-engedélyeket,>Engedély hozzáadása>Saját API-k.
Válassza ki a háttérszolgáltatáshoz korábban létrehozott alkalmazásregisztrációt. Ha nem látja az alkalmazásregisztrációt, győződjön meg arról, hogy hozzáadta a access_as_user hatókört.
Az Engedélyek kiválasztásaterületen válassza a access_as_userlehetőséget, majd válassza az Engedélyek hozzáadásalehetőséget.
Válassza Hitelesítés>Mobil- és asztali alkalmazásoklehetőséget.
Jelölje be a https://login.microsoftonline.com/common/oauth2/nativeclientmelletti jelölőnégyzetet.
Jelölje be a msal{client-id}://auth melletti jelölőnégyzetet (cserélje le a {client-id} az alkalmazásazonosítóra).
Válassza az URI-hozzáadása lehetőséget, majd adjon hozzá http://localhost a mezőben további URI-khoz.
Válassza Mentés a lap alján lehetőséget.
Válassza Áttekintéslehetőséget. Jegyezze fel az alkalmazás (ügyfél) azonosítóját (a natív ügyfélalkalmazás-azonosítót) a mobilalkalmazás konfigurálásához.

Három átirányítási URL-címet határoztunk meg:

http://localhost a WPF-alkalmazások használják.
https://login.microsoftonline.com/common/oauth2/nativeclient UWP-alkalmazások használják.
msal{client-id}://auth mobilalkalmazások (Android és iOS) használják.

A Microsoft Identity-ügyfél hozzáadása az alkalmazáshoz

Nyissa meg a TodoApp.sln megoldást a Visual Studióban, és állítsa be a TodoApp.UWPprojektet indítási projektként. Adja hozzá a Microsoft Identity Library (MSAL) a TodoApp.UWP projekthez:

Adja hozzá a Microsoft Identity Library (MSAL) a platformprojekthez:

Kattintson a jobb gombbal a projektre, majd válassza a NuGet-csomagok kezelése...lehetőséget.
Válassza a Tallózás lapot.
Írja be Microsoft.Identity.Client a keresőmezőbe, majd nyomja le az Enter billentyűt.
Jelölje ki a Microsoft.Identity.Client eredményt, majd kattintson a Telepítésgombra.
A telepítés folytatásához fogadja el a licencszerződést.

Adja hozzá a natív ügyfélazonosítót és a háttérbeli hatókört a konfigurációhoz.

Nyissa meg a TodoApp.Data projektet, és szerkessze a Constants.cs fájlt. Konstansok hozzáadása ApplicationId és 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>"
      };
  }

Cserélje le a <client-id> az ügyfélalkalmazás Microsoft Entra-azonosítóban való regisztrálásakor kapott natív ügyfélalkalmazás-azonosítóra, a <scope> pedig a webes API-hatókörre, amelyet a szolgáltatásalkalmazás regisztrálása során API- használatakor másolt.

Nyissa meg a App.xaml.cs fájlt a TodoApp.UWP projektben.

Adja hozzá a következő using utasításokat a fájl elejéhez:

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

Cserélje le a konstruktort és a TodoService kódot a következő kódra:

public App()
{
    InitializeComponent();
    Suspending += OnSuspending;

    IdentityClient = GetIdentityClient();
    TodoService = new RemoteTodoService(GetAuthenticationToken);
}

public static IPublicClientApplication IdentityClient { get; set; }

public ITodoService TodoService { get; }

public IPublicClientApplication GetIdentityClient()
{
    var identityClient = PublicClientApplicationBuilder.Create(Constants.ApplicationId)
        .WithAuthority(AzureCloudInstance.AzurePublic, "common")
        .WithUseCorporateNetwork(false)
        .WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
        .Build();
    return identityClient;
}

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()
            .ConfigureAwait(false);
    }
    catch (MsalUiRequiredException)
    {
        tryInteractiveLogin = true;
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
    }

    if (tryInteractiveLogin)
    {
        try
        {
            result = await IdentityClient
                .AcquireTokenInteractive(Constants.Scopes)
                .ExecuteAsync()
                .ConfigureAwait(false);
        }
        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 ?? ""
    };
}

A GetAuthenticationToken() metódus a Microsoft Identity Library (MSAL) segítségével olyan hozzáférési jogkivonatot kap, amely alkalmas a bejelentkezett felhasználó háttérszolgáltatáshoz való engedélyezésére. Ezt a függvényt ezután a rendszer átadja a RemoteTodoService az ügyfél létrehozásához. Ha a hitelesítés sikeres, a AuthenticationToken az egyes kérések engedélyezéséhez szükséges adatokkal állítják elő. Ha nem, akkor a rendszer ehelyett egy lejárt hibás jogkivonatot hoz létre.

Az alkalmazás tesztelése

Az alkalmazás futtatásához nyomja le F5. Az alkalmazás futtatásakor megnyílik egy böngésző, amely hitelesítést kér. Az alkalmazás első futtatásakor a rendszer a hozzáféréshez való hozzájárulást kéri:

Képernyőkép a Microsoft Entra hozzájárulási kérelméről.

Az alkalmazás folytatásához nyomja le az Igen billentyűt.

Következő lépések

Ezután konfigurálja az alkalmazást offline működésre egy offline áruházimplementálásával.

Megosztás a következőn keresztül: