Verificatie toevoegen aan uw Xamarin.Forms-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 uw app 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.

Notitie

Omdat voor de iOS-app toegang tot de sleutelhanger is vereist, moet u een iOS-inrichtingsprofiel instellen. Voor een inrichtingsprofiel is een echt iOS-apparaat of een betaald Apple Developer-account vereist (als u de simulator gebruikt). U kunt deze zelfstudie overslaan en doorgaan met het toevoegen van offlinetoegang tot uw app als u geen verificatie kunt gebruiken vanwege deze beperking.

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.Forms project in als het opstartproject.

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 het TodoApp.Forms project. Voeg een nieuw bestand toe met de naam IPlatform.cs met de volgende inhoud:

using Microsoft.Identity.Client;

namespace TodoApp.Forms
{
    public interface IPlatform
    {
        IPublicClientApplication GetIdentityClient(string applicationId);
    }
}

Deze interface wordt later gebruikt om het gedeelde project toe te staan het platformproject te vragen naar een identiteitsclient die geschikt is voor het platform.

Open App.xaml.cs. Voeg de volgende using-instructies toe:

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

Voeg in de klasse App twee nieuwe eigenschappen toe:

public IPublicClientApplication IdentityClient { get; set; }
public IPlatform PlatformService { get; }

Pas de constructor aan om te lezen:

public App(IPlatform platformService)
{
    InitializeComponent();

    PlatformService = platformService;
    TodoService = new RemoteTodoService(GetAuthenticationToken);
    MainPage = new NavigationPage(new MainPage(this, TodoService));
}

Voeg de methode GetAuthenticationToken toe aan de klasse:

public async Task<AuthenticationToken> GetAuthenticationToken()
{
    if (IdentityClient == null)
    {
        IdentityClient = PlatformService.GetIdentityClient(Constants.ApplicationId);
    }

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

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 Android-app configureren voor verificatie

Open het TodoApp.Forms.Android project. Maak een nieuwe klasse MsalActivity met de volgende code:

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

namespace TodoApp.Forms.Droid
{
    [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 TodoApp.Forms.Android/Properties/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 MainActivity.cs. Voeg IPlatform toe aan de definitie van de klasse MainActivity:

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity, IPlatform

Wijzig de LoadApplication()-aanroep in de methode OnCreate():

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
    LoadApplication(new App(this));
}

Voeg de volgende code toe aan het einde van de klasse:

protected override void OnActivityResult(int requestCode, [GeneratedEnum] Result resultCode, Intent data)
{
    base.OnActivityResult(requestCode, resultCode, data);
    // Return control to MSAL
    AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
}

public IPublicClientApplication GetIdentityClient(string applicationId)
{
    var identityClient = PublicClientApplicationBuilder.Create(applicationId)
        .WithAuthority(AzureCloudInstance.AzurePublic, "common")
        .WithRedirectUri($"msal{applicationId}://auth")
        .WithParentActivityOrWindow(() => this)
        .Build();
    return identityClient;
}

Wanneer voor het gedeelde project verificatie is vereist, verkrijgt het een identiteitsclient van GetIdentityClient()en schakelt u over 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. Vervolgens wordt de MSAL-verificatiehulp aanroepen, waarmee de transactie wordt voltooid.

De iOS-app configureren voor verificatie

Open het bestand AppDelegate.cs in het TodoApp.Forms.iOS-project. Voeg IPlatform toe aan de definitie van de klasse AppDelegate:

public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IPlatform

Wijzig de methode FinishedLaunching() om te lezen:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App(this));
    return base.FinishedLaunching(app, options);
}

Voeg de volgende code toe aan het einde van de klasse:

public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
{
    bool result = AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(url);
    return result || base.OpenUrl(app, url, options);
}

public IPublicClientApplication GetIdentityClient(string applicationId)
{
    var identityClient = PublicClientApplicationBuilder.Create(applicationId)
        .WithIosKeychainSecurityGroup("com.microsoft.adalcache")
        .WithRedirectUri($"msal{applicationId}://auth")
        .Build();
    return identityClient;
}

Sleutelhangertoegang toevoegen aan de Entitlements.plist:

Open het Entitlements.plist-bestand.
Selecteer sleutelhanger.
Selecteer Nieuwe toevoegen in de sleutelhangergroepen.
Voer com.microsoft.adalcache in als de waarde:

Voeg de aangepaste rechten toe aan het project:

Klik met de rechtermuisknop op het TodoApp.Forms.iOS project en selecteer Eigenschappen.
Selecteer voor iOS-bundelondertekening.
Selecteer de knop ... naast het veld Aangepaste rechten.
Selecteer Entitlementsen selecteer vervolgens openen.
Druk op Ctrl+S- om het project op te slaan.

De Android-app testen

Stel TodoApp.Forms.Android in als het opstartproject 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 iOS-app testen

Notitie

Omdat de iOS-app toegang tot de sleutelhanger vereist, moet u een inrichtingsprofiel instellen. Voor een inrichtingsprofiel is een echt apparaat of een betaald Apple Developer-account vereist (als u de simulator gebruikt). Zie Device provisioning for iOSvoor meer informatie.

Stel TodoApp.Forms.iOS in als het opstartproject 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.

Volgende stappen

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

Delen via

Verificatie toevoegen aan uw Xamarin.Forms-app

Verificatie toevoegen aan uw back-endservice

De toepassing registreren

Uw app registreren bij de identiteitsservice

Een systeemeigen clienttoepassing configureren

De Microsoft Identity Client toevoegen aan uw app

De Android-app configureren voor verificatie

De iOS-app configureren voor verificatie

De Android-app testen

De iOS-app testen

Volgende stappen

Meer lezen

Aanvullende resources