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

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.

Tipp.

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:

1. Jelentkezzen be az Azure Portalra.

2. Ha több bérlőhöz is hozzáfér, a felső menü Címtárak + előfizetések szűrőjével válthat arra a bérlőre, amelyben regisztrálni szeretné az alkalmazást.

3. Search for and select Microsoft Entra ID.

4. A Kezelés területen válassza a Alkalmazásregisztrációk> New regisztráció lehetőséget.

   • Név: adja meg az alkalmazás nevét, például a TodoApp rövid útmutatóját. 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árban – Több-bérlős) és személyes Microsoft-fiókokban (pl. Skype, Xbox) lévő fiókok

5. Válassza ki a pénztárgépet.

6. A Kezelés területen válassza az API-k> hatókör hozzáadása lehetőséget.

7. Az alkalmazásazonosító URI-ja esetén fogadja el az alapértelmezett beállítást a Mentés és a folytatás gombra kattintva.

8. Adja meg a következő adatokat:

   • Hatókör neve: access_as_user
   • Kik járulhatnak hozzá?: Rendszergazda és felhasználók
   • Rendszergazda hozzájárulás megjelenítendő neve:Access TodoApp
   • Rendszergazda 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élyezve

9. Válassza a Hatókör hozzáadása lehetőséget a hatókör hozzáadásának befejezéséhez.

10. Figyelje meg a hatókör értékét, hasonló módon api://<client-id>/access_as_user (a webes API-hatókörhöz). Az ügyfél konfigurálásakor szükség van a hatókörre.

11. Válassza az Áttekintés lehetőséget.

12. Jegyezze fel az alkalmazás (ügyfél) azonosítóját az Essentials szakaszban (a web API-alkalmazásazonosító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.

1. Kattintson a jobb gombbal a projektre, majd válassza a TodoAppService.NET6 NuGet-csomagok kezelése... lehetőséget.

2. Az új lapon válassza a Tallózás lehetőséget, majd írja be a Microsoft.Identity.Web kifejezést a keresőmezőbe.

   

3. Jelölje ki a csomagot, majd nyomja le az Microsoft.Identity.Web Install billentyűt.

4. Kövesse az utasításokat a csomag telepítésének befejezéséhez.

5. Nyílt Program.cs. Adja hozzá a következőket az utasítások listájához using :

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

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

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

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

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

A Program.cs fájl tartalmának most az alábbinak kell lennie:

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. Szerkessze a Controllers\TodoItemController.cs. 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))
    {
    }
  }
}

9. Szerkessze a appsettings.json. Adja hozzá a következő blokkot:

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

Cserélje le a <client-id>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:

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

Nyisson meg egy böngészőt.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.

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.

1. Az Azure Portalon válassza a Microsoft Entra ID> Alkalmazásregisztrációk> New regisztrációt.

2. Az Alkalmazás regisztrálása lapon:

   • adja meg az alkalmazásregisztráció nevét. Ezt a nevet érdemes lehet megkülönböztetni a háttérszolgáltatás által használt névtől native-quickstart .
   • Válassza a Fiókok lehetőséget bármely szervezeti könyvtárban (Bármely Microsoft Entra címtár – Több-bérlős) és személyes Microsoft-fiókokban (pl. Skype, Xbox).
   • Átirányítási URI-ban:
     • Nyilvános ügyfél kiválasztása (mobil és asztali)
     • Adja meg az URL-címet quickstart://auth

3. Válassza ki a pénztárgépet.

4. Válassza az API-engedélyeket>: Engedély>hozzáadása Saját API-k.

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

   

6. Az Engedélyek kiválasztása csoportban válassza a access_as_user, majd az Engedélyek hozzáadása lehetőséget.

7. Válassza a Authentication>Mobile és az asztali alkalmazások lehetőséget.

8. Jelölje be a mellette lévő jelölőnégyzetet https://login.microsoftonline.com/common/oauth2/nativeclient.

9. Jelölje be a mellette lévő msal{client-id}://auth jelölőnégyzetet (az alkalmazásazonosítóra cserélve {client-id} ).

10. Válassza az URI hozzáadása lehetőséget, majd adja hozzá http://localhost a mezőben a további URI-khoz.

11. Válassza a Lap alján található Mentés lehetőséget.

12. Válassza az Áttekintés lehetőséget. Jegyezze fel az alkalmazás (ügyfél) azonosítóját (más néven natív ügyfélalkalmazás-azonosítót), amikor szüksége van rá a mobilalkalmazás konfigurálásához.

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

• http://localhost 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 megoldást a TodoApp.sln Visual Studióban, és állítsa be a TodoApp.UWPprojektet indítási projektként. Adja hozzá a Microsoft Identity Libraryt (MSAL) a TodoApp.UWP projekthez:

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

1. Kattintson a jobb gombbal a projektre, majd válassza a NuGet-csomagok kezelése... lehetőséget.

2. Válassza a Tallózás lapot.

3. Írja be Microsoft.Identity.Client a keresőmezőbe, majd nyomja le az Enter billentyűt.

4. Jelölje ki az eredményt, majd kattintson a Microsoft.Identity.Client Telepítés gombra.

   

5. 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. Állandók hozzáadása a következőhözApplicationId: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 az <client-id>ügyfélalkalmazás Microsoft Entra-azonosítóban való regisztrálásakor kapott natív ügyfélalkalmazás-azonosítóra, valamint a <scope> web API-hatókörre, amelyet a szolgáltatásalkalmazás regisztrálása során az Api-k elérhetővé tételének 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() módszer a Microsoft Identity Library (MSAL) segítségével olyan hozzáférési jogkivonatot kap, amely alkalmas a bejelentkezett felhasználónak a háttérszolgáltatáshoz való engedélyezésére. Ezt a függvényt ezután átadja a rendszer az RemoteTodoService ügyfél létrehozásához. Ha a hitelesítés sikeres, a rendszer az AuthenticationToken egyes kérések engedélyezéséhez szükséges adatokkal jön létre. 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 az F5 billentyűt. 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:

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

További lépések

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

További olvasnivalók

• Rövid útmutató: Webes API védelme a Microsoft Identitásplatform
• Rövid útmutató: Jogkivonat beszerzése és a Microsoft Graph API meghívása asztali alkalmazásból
• Microsoft Identitásplatform: Univerzális Windows-platform oktatóanyag