Verificatie toevoegen aan uw Xamarin Forms-app

2019-06-25

Overzicht

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

Vereiste voorwaarden

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 met meerdere platforms is.

Als u het gedownloade snelstartserverproject niet gebruikt, moet u het verificatieuitbreidingspakket toevoegen aan uw project. Zie Werken met de .NET-back-endserver-SDK voor Azure Mobile Apps voor meer informatie over serveruitbreidingspakketten.

Uw app registreren voor verificatie en App Services configureren

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 van Mobile Apps in.

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

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 terugkeren naar uw app zodra het verificatieproces is voltooid. In deze zelfstudie gebruiken we het URL-schema appname doorheen. 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 App Service in Azure Portal.
Klik op de menuoptie Verificatie/autorisatie .
Voer in de toegestane externe omleidings-URL's het volgende 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 moet aanpassen met het URL-schema op verschillende plaatsen.
Klik op OK.
Klik op Opslaan.

Machtigingen beperken voor geverifieerde gebruikers

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

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

Klik in de instellingen van Mobile Apps op Easy Tables en selecteer de 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 Controllers>TodoItemController.cs. Voeg als volgt het [Authorize] kenmerk toe aan de klasse TodoItemController . Als u alleen de toegang tot specifieke methoden wilt beperken, kunt u dit kenmerk ook alleen toepassen op deze methoden in plaats van op de klasse. Publiceer het serverproject opnieuw.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (via Node.js code):

Als u verificatie voor tabeltoegang wilt vereisen, voegt u de volgende regel toe aan het Node.js serverscript:
```
  table.access = 'authenticated';
```
Voor meer informatie, zie Hoe: Verificatie vereisen voor toegang tot tabellen. Voor meer informatie over het downloaden van het quickstartcodeproject van uw site, raadpleegt u Procedure: Download het Node.js quickstart-codeproject voor back-end met behulp van Git.

Verificatie toevoegen aan de draagbare klassebibliotheek

Mobile Apps maakt gebruik van de loginAsync-extensiemethode in 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 Serverbeheerde verificatie voor meer informatie. Als u een betere gebruikerservaring wilt bieden in uw productie-app, moet u in plaats daarvan overwegen om door 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 aanmeldingsknop toe aan de gebruikersinterface die is gedefinieerd in de Portable Class Library, waarop u klikt om verificatie te starten. Gegevens worden na een geslaagde verificatie vanuit de back-end van de mobiele app geladen.

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

Open in Visual Studio of Xamarin Studio App.cs vanuit het project met Portable in de naam, dat het project Portable Class Library is en voeg vervolgens de volgende using instructie toe:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
Voeg in App.cs de volgende IAuthenticate interfacedefinitie direct vóór de App klassedefinitie toe.
```
 ```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, voeg het volgende knopelement toe in het layout-element buttonsPanel , na de bestaande knop:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Met deze knop wordt door de server beheerde verificatie geactiveerd met de back-end van uw mobiele app.
Open TodoList.xaml.cs vanuit het project Portable Class Library en voeg vervolgens 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 klikgebeurtenis 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 op, waarbij u controleert dat er geen fouten zijn.

Verificatie toevoegen aan de Android-app

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

Klik in Visual Studio of Xamarin Studio met de rechtermuisknop op het droid-project en stel in als opstartproject.
Druk op F5 om het project te starten in het foutopsporingsprogramma en controleer vervolgens of er een niet-verwerkte uitzondering met een statuscode van 401 (Niet geautoriseerd) wordt gegenereerd nadat de app is gestart. De 401-code wordt geproduceerd omdat de toegang op de back-end beperkt is tot alleen geautoriseerde gebruikers.

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

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

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

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

Werk de klasse MainActivity bij door als volgt een MobileServiceUser-veld en een verificatiemethode toe te voegen die is vereist 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-bestand 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 OnCreate-methode van de klasse MainActivity voordat de aanroep naar LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Deze code zorgt ervoor dat de verificator wordt geïnitialiseerd 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.

Probleemoplossingsproces

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 NuGet-pakket van Azure Mobile Apps heeft Xamarin.Android.Support.CustomTabs afhankelijkheid voor het Android-platform, dus als uw project nieuwere ondersteuningspakketten gebruikt, moet u dit pakket rechtstreeks met de vereiste versie installeren om conflicten te voorkomen.

Verificatie toevoegen aan de iOS-app

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

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

Open AppDelegate.cs in het iOS-project en voeg de volgende using instructies 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 bij door als volgt 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.
         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 bij door de Overbelasting van de OpenUrl-methode als volgt 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 coderegel toe aan de FinishedLaunching-methode voordat de aanroep naar LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Deze code zorgt ervoor dat de verificator wordt geïnitialiseerd 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, 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.

Verificatie toevoegen aan Windows 10-app-projecten (inclusief telefoon)

In deze sectie wordt beschreven hoe u de IAuthenticate-interface implementeert in de Windows 10-app-projecten. Dezelfde stappen zijn van toepassing op UWP-projecten (Universal Windows Platform), maar met behulp van het UWP-project (met genoteerde wijzigingen). Sla deze sectie over als u Windows-apparaten niet ondersteunt.

Klik in Visual Studio met de rechtermuisknop op het UWP-project en stel het project in als opstartproject.
Druk op F5 om het project te starten in het foutopsporingsprogramma en controleer vervolgens of er een niet-verwerkte uitzondering met een statuscode van 401 (Niet geautoriseerd) wordt gegenereerd nadat de app is gestart. Het 401-antwoord treedt op omdat de toegang op de back-end alleen is beperkt tot geautoriseerde gebruikers.
Open MainPage.xaml.cs voor het Windows-app-project en voeg de volgende using instructies 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 MainPage-klasse als volgt bij om de IAuthenticate-interface te implementeren:
```
 public sealed partial class MainPage : IAuthenticate
```

Werk de MainPage-klasse bij door als volgt 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()
 {
     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;
 }
 ```