Verificatie toevoegen aan uw Xamarin Forms-app

Artikel
06/25/2019

Overzicht

In dit onderwerp ziet u hoe u gebruikers van een App Service-app verifieert vanuit uw clienttoepassing. In deze zelfstudie voegt u verificatie toe aan het Xamarin Forms-snelstartproject met behulp van een id-provider die wordt ondersteund door App Service. Nadat uw mobiele app is geverifieerd en geautoriseerd, wordt de waarde van de gebruikers-id weergegeven en hebt u toegang tot beperkte tabelgegevens.

Vereisten

Voor het beste resultaat van deze zelfstudie raden we u aan eerst de zelfstudie Een Xamarin Forms-app maken te voltooien. Nadat u deze zelfstudie hebt voltooid, hebt u een Xamarin Forms-project dat een TodoList-app voor meerdere platforms is.

Als u het gedownloade quickstart-serverproject niet gebruikt, moet u het verificatie-extensiepakket toevoegen aan uw project. Zie Work with the .NET backend server SDK for Azure Mobile Apps (Werken met de .NET-back-endserver-SDK voor Azure Mobile Apps) voor meer informatie over serverextensiepakketten.

Registreer uw app voor verificatie en configureer App Services

Eerst moet u uw app registreren op de site van een id-provider en vervolgens stelt u de door de provider gegenereerde referenties in de back-end Mobile Apps in.

Configureer uw voorkeurs-id-provider door de providerspecifieke instructies te volgen:
Herhaal de vorige stappen voor elke provider die u in uw app wilt ondersteunen.

Uw app toevoegen aan de toegestane externe omleidings-URL's

Voor beveiligde verificatie moet u een nieuw URL-schema voor uw app definiëren. Hierdoor kan het verificatiesysteem terug naar uw app worden omgeleid zodra het verificatieproces is voltooid. In deze zelfstudie gebruiken we overal het URL-schema appname . U kunt echter elk URL-schema gebruiken dat u kiest. Deze moet uniek zijn voor uw mobiele toepassing. De omleiding aan de serverzijde inschakelen:

Selecteer uw Azure Portal in de App Service.
Klik op de menuoptie Verificatie/ autorisatie.
Voer in de toegestane EXTERNE omleidings-URL's in url_scheme_of_your_app://easyauth.callback. De url_scheme_of_your_app in deze tekenreeks is het URL-schema voor uw mobiele toepassing. Deze moet de normale URL-specificatie voor een protocol volgen (gebruik alleen letters en cijfers en begin met een letter). Noteer de tekenreeks die u kiest, omdat u de code van uw mobiele toepassing op verschillende plaatsen moet aanpassen met het URL-schema.
Klik op OK.
Klik op Opslaan.

Machtigingen beperken voor geverifieerde gebruikers

API's in een back Mobile Apps-end kunnen standaard anoniem worden aangeroepen. Vervolgens moet u de toegang beperken tot alleen geverifieerde clients.

Node.js back-end (via de Azure Portal) :

Klik in Mobile Apps instellingen op Eenvoudige tabellen en selecteer uw tabel. Klik op Machtigingen wijzigen, selecteer Alleen geverifieerde toegang voor alle machtigingen en klik vervolgens op Opslaan.
.NET-back-end (C#):

Navigeer in het serverproject naar ControllersTodoItemController.cs>. Voeg het [Authorize] kenmerk als volgt toe aan de klasse TodoItemController . Als u de toegang alleen wilt beperken tot specifieke methoden, kunt u dit kenmerk ook alleen toepassen op die methoden in plaats van op de klasse . Het serverproject opnieuw publiceren.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js back-Node.js (via Node.js code) :

Als u verificatie wilt vereisen voor toegang tot de tabel, voegt u de volgende regel toe aan Node.js serverscript:
```
  table.access = 'authenticated';
```
Zie How to: Require authentication for access to tables (Verificatie vereisen voor toegang tot tabellen) voor meer informatie. Zie How to: Download the Node.js backend quickstart code project using Git (Het codeproject voor de snelstartgids voor de back-Node.js downloaden met git) voor meer informatie over het downloaden van het codeproject uit de snelstartgids van uw site.

Verificatie toevoegen aan de draagbare klassebibliotheek

Mobile Apps gebruikt de loginAsync-extensiemethode op de MobileServiceClient om een gebruiker aan te melden met App Service verificatie. In dit voorbeeld wordt een door de server beheerde verificatiestroom gebruikt waarmee de aanmeldingsinterface van de provider in de app wordt weergegeven. Zie Door de server beheerde verificatie voor meer informatie. Als u een betere gebruikerservaring in uw productie-app wilt bieden, kunt u overwegen om in plaats daarvan door de client beheerde verificatie te gebruiken.

Als u wilt verifiëren met een Xamarin Forms-project, definieert u een IAuthenticate-interface in de Portable Class Library voor de app. Voeg vervolgens een knop Aanmelden toe aan de gebruikersinterface die is gedefinieerd in de Portable Class Library, waarop u klikt om de verificatie te starten. Gegevens worden geladen vanuit de back-end van de mobiele app na een geslaagde verificatie.

Implementeert de IAuthenticate-interface voor elk platform dat wordt ondersteund door uw app.

Open Visual Studio of Xamarin Studio App.cs vanuit het project met Portable in de naam . Dit is het Portable Class Library-project. Voeg vervolgens de volgende instructie using toe:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Voeg in App.cs de volgende interfacedefinitie IAuthenticate toe direct vóór de klassedefinitie App .
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Als u de interface wilt initialiseren met een platformspecifieke implementatie, voegt u de volgende statische leden toe aan de app-klasse .

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Open TodoList.xaml vanuit het project Portable Class Library en voeg het volgende knopelement toe aan het element buttonsPanel layout, na de bestaande knop:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Deze knop activeert door de server beheerde verificatie met de back-end van uw mobiele app.
Open TodoList.xaml.cs vanuit het project Portable Class Library en voeg het volgende veld toe aan de TodoList klasse :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Vervang de methode OnAppearing door de volgende code:

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

Deze code zorgt ervoor dat gegevens alleen worden vernieuwd vanuit de service nadat u bent geverifieerd.

Voeg de volgende handler voor de gebeurtenis Geklikt toe aan de klasse TodoList :

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

Sla uw wijzigingen op en bouw het Portable Class Library-project opnieuw, zonder fouten te controleren.

Verificatie toevoegen aan de Android-app

In deze sectie ziet u hoe u de interface IAuthenticate implementeert in het Android-app-project. Sla deze sectie over als u geen Android-apparaten ondersteunt.

Klik Visual Studio of Xamarin Studio met de rechtermuisknop op het project en vervolgens op Set as StartUp Project.
Druk op F5 om het project te starten in het debugger en controleer of er een onverhandelde uitzondering met de statuscode 401 (Unauthorized) wordt gemaakt nadat de app is gestart. De 401-code wordt geproduceerd omdat de toegang tot de back-end alleen is beperkt tot gemachtigde gebruikers.

Open MainActivity.cs in het Android-project en voeg de volgende -instructies using toe:

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Werk de klasse MainActivity als volgt bij om de interface IAuthenticate te implementeren:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Werk de klasse MainActivity als volgt bij door een MobileServiceUser-veld en een verificatiemethode toe te voegen, die vereist is voor de IAuthenticate-interface :

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Als u een andere id-provider dan Facebook gebruikt, kiest u een andere waarde voor MobileServiceAuthenticationProvider.

Werk het AndroidManifest.xml bij door de volgende XML toe te voegen in het <application> -element:

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

Vervang {url_scheme_of_your_app} door uw URL-schema.

Voeg de volgende code toe aan de methode OnCreate van de klasse MainActivity vóór de aanroep van LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Deze code zorgt ervoor dat de ver authenticator wordt initialiseren voordat de app wordt geladen.
Bouw de app opnieuw, voer deze uit en meld u aan met de verificatieprovider die u hebt gekozen en controleer of u toegang hebt tot gegevens als geverifieerde gebruiker.

Problemen oplossen

De toepassing is vastgelopen met Java.Lang.NoSuchMethodError: No static method startActivity

In sommige gevallen worden conflicten in de ondersteuningspakketten weergegeven als een waarschuwing in Visual Studio, maar de toepassing loopt vast met deze uitzondering tijdens runtime. In dit geval moet u ervoor zorgen dat alle ondersteuningspakketten waarnaar in uw project wordt verwezen, dezelfde versie hebben. Het Azure Mobile Apps NuGet-pakket heeft Xamarin.Android.Support.CustomTabs-afhankelijkheid voor het Android-platform, dus als uw project gebruikmaakt van nieuwere ondersteuningspakketten, moet u dit pakket met de vereiste versie rechtstreeks installeren om conflicten te voorkomen.

Verificatie toevoegen aan de iOS-app

In deze sectie ziet u hoe u de IAuthenticate-interface implementeert in het iOS-app-project. Sla deze sectie over als u geen ondersteuning voor iOS-apparaten hebt.

Klik Visual Studio of Xamarin Studio met de rechtermuisknop op het iOS-project en vervolgens op Instellen als Project.
Druk op F5 om het project te starten in het debugger en controleer of er een onverhandelde uitzondering met de statuscode 401 (Niet geautoriseerd) wordt gemaakt nadat de app is gestart. Het 401-antwoord wordt geproduceerd omdat de toegang tot de back-end alleen is beperkt tot geautoriseerde gebruikers.

Open AppDelegate.cs in het iOS-project en voeg de volgende -instructies using toe:

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Werk de AppDelegate-klasse als volgt bij om de IAuthenticate-interface te implementeren:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Werk de AppDelegate-klasse als volgt bij door een MobileServiceUser-veld en een Verificatiemethode toe te voegen die vereist zijn voor de interface IAuthenticate :

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Als u een andere id-provider dan Facebook gebruikt, kiest u een andere waarde voor [MobileServiceAuthenticationProvider].

Werk de AppDelegate-klasse als volgt bij door de overbelasting van de OpenUrl-methode toe te voegen:

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

Voeg de volgende regel code toe aan de methode FinishedLaunching vóór de aanroep van LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Deze code zorgt ervoor dat de ver authenticator wordt initialiseren voordat de app wordt geladen.
Open Info.plist en voeg een URL-type toe. Stel de Id in op een naam van uw keuze, de URL-schema's op het URL-schema voor uw app en de Rol op Geen.
Bouw de app opnieuw op, voer deze uit, meld u aan met de verificatieprovider die u hebt gekozen en controleer of u toegang hebt tot gegevens als geverifieerde gebruiker.

Verificatie toevoegen aan Windows 10-app-projecten (Telefoon)

In deze sectie ziet u hoe u de interface IAuthenticate implementeert in de Windows 10-app-projecten. Dezelfde stappen zijn van toepassing op Universeel Windows-platform (UWP)-projecten, maar met behulp van het UWP-project (met genoteerde wijzigingen). Sla deze sectie over als u geen ondersteuning Windows apparaten.

Klik Visual Studio met de rechtermuisknop op het UWP-project en vervolgens op Instellen als opstart Project.
Druk op F5 om het project te starten in het debugger en controleer of er een onverhandelde uitzondering met de statuscode 401 (Niet geautoriseerd) wordt gemaakt nadat de app is gestart. Het 401-antwoord vindt plaats omdat de toegang tot de back-end alleen is beperkt tot gemachtigde gebruikers.
Open MainPage.xaml.cs voor het project Windows app en voeg de volgende -instructies using toe:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Vervang <your_Portable_Class_Library_namespace> door de naamruimte voor uw draagbare klassebibliotheek.
Werk de klasse MainPage als volgt bij om de interface IAuthenticate te implementeren:
```
 public sealed partial class MainPage : IAuthenticate
```

Werk de klasse MainPage bij door het toevoegen van een MobileServiceUser-veld en een Verificatiemethode , die vereist is voor de interface IAuthenticate , als volgt:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```