Lägga till autentisering i Xamarin Forms-appen

Artikel
2019-06-25

Översikt

Det här avsnittet visar hur du autentiserar användare av en App Service Mobile App från klientprogrammet. I den här självstudien lägger du till autentisering i snabbstartsprojektet Xamarin Forms med hjälp av en identitetsprovider som stöds av App Service. När du har autentiserats och auktoriserats av din mobilapp visas användar-ID-värdet och du kommer att kunna komma åt begränsade tabelldata.

Förutsättningar

För bästa resultat med den här självstudien rekommenderar vi att du först slutför självstudien Skapa en Xamarin Forms-app . När du har slutfört den här självstudien har du ett Xamarin Forms-projekt som är en TodoList-app för flera plattformar.

Om du inte använder det nedladdade snabbstartsserverprojektet måste du lägga till paketet för autentiseringstillägg i projektet. Mer information om servertilläggspaket finns i Work with the .NET backend server SDK for Azure Mobile Apps.

Registrera din app för autentisering och konfigurera App Services

Först måste du registrera din app på en identitetsproviders webbplats, och sedan anger du de providergenererade autentiseringsuppgifterna i mobile apps-serverdelen.

Konfigurera din önskade identitetsprovider genom att följa de providerspecifika anvisningarna:
Upprepa föregående steg för varje leverantör som du vill stödja i din app.

Lägg till din app i URL:erna för tillåten extern omdirigering

Säker autentisering kräver att du definierar ett nytt URL-schema för din app. Detta gör att autentiseringssystemet kan omdirigera tillbaka till din app när autentiseringsprocessen är klar. I den här självstudien använder vi URL-schemat appname genomgående. Du kan dock använda valfritt URL-schema som du väljer. Den bör vara unik för ditt mobilprogram. Så här aktiverar du omdirigeringen på serversidan:

I Azure-portalen väljer du din App Service.
Klicka på menyalternativet Autentisering/auktorisering .
I URL:er för tillåten extern omdirigering anger du url_scheme_of_your_app://easyauth.callback. Den url_scheme_of_your_app i den här strängen är URL-schemat för ditt mobilprogram. Den bör följa normal URL-specifikation för ett protokoll (använd endast bokstäver och siffror och börja med en bokstav). Du bör anteckna strängen som du väljer eftersom du måste justera din mobilprogramkod med URL-schemat på flera platser.
Klicka på OK.
Klicka på Spara.

Begränsa behörigheter till autentiserade användare

Som standard kan API:er i en Mobile Apps-serverdel anropas anonymt. Därefter måste du begränsa åtkomsten till endast autentiserade klienter.

Node.js backend (via Azure-portalen) :

I inställningarna för Mobilappar klickar du på Enkla tabeller och väljer tabellen. Klicka på Ändra behörigheter, välj Endast autentiserad åtkomst för alla behörigheter och klicka sedan på Spara.
.NET-backend (C#):

I serverprojektet navigerar du till Controllers>TodoItemController.cs. [Authorize] Lägg till attributet i klassen TodoItemController enligt följande. Om du bara vill begränsa åtkomsten till specifika metoder kan du även använda det här attributet bara för dessa metoder i stället för klassen. Återpublicera serverprojektet.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js backend (via Node.js kod) :

Om du vill kräva autentisering för tabellåtkomst lägger du till följande rad i Node.js-serverskriptet:
```
  table.access = 'authenticated';
```
Mer information finns i Så här: Kräv autentisering för åtkomst till tabeller. Information om hur du laddar ned snabbstartskodprojektet från din webbplats finns i Så här laddar du ned snabbstartskodprojektet Node.js serverdel med Git.

Lägga till autentisering i det bärbara klassbiblioteket

Mobile Apps använder tillägget LoginAsync på MobileServiceClient för att logga in en användare med App Service-autentisering. Det här exemplet använder ett serverhanterat autentiseringsflöde som visar providerns inloggningsgränssnitt i appen. Mer information finns i Serverhanterad autentisering. För att ge en bättre användarupplevelse i produktionsappen bör du i stället överväga att använda klienthanterad autentisering.

Om du vill autentisera med ett Xamarin Forms-projekt definierar du ett IAuthenticate-gränssnitt i det bärbara klassbiblioteket för appen. Lägg sedan till en inloggningsknapp i användargränssnittet som definierats i Det bärbara klassbiblioteket, som du klickar på för att starta autentiseringen. Data läses in från mobilappens serverdel efter lyckad autentisering.

Implementera IAuthenticate-gränssnittet för varje plattform som stöds av din app.

I Visual Studio eller Xamarin Studio öppnar du App.cs från projektet med Portable i namnet, som är projektet Portable Class Library, och lägger sedan till följande using instruktion:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
I App.cs lägger du till följande IAuthenticate gränssnittsdefinition omedelbart före klassdefinitionen App .
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Om du vill initiera gränssnittet med en plattformsspecifik implementering lägger du till följande statiska medlemmar i appklassen .

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

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

Öppna TodoList.xaml från projektet Portable Class Library och lägg till följande knappelement i layoutelementet buttonsPanel efter den befintliga knappen:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Den här knappen utlöser serverhanterad autentisering med mobilappens serverdel.
Öppna TodoList.xaml.cs från projektet Portable Class Library och lägg sedan till följande fält i TodoList klassen:
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Ersätt metoden OnAppearing med följande kod:

 ```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;
     }
 }
 ```

Den här koden ser till att data endast uppdateras från tjänsten när du har autentiserats.

Lägg till följande hanterare för händelsen Klickad i klassen 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);
 }
 ```

Spara ändringarna och återskapa projektet Portable Class Library för att kontrollera att inga fel finns.

Lägga till autentisering i Android-appen

Det här avsnittet visar hur du implementerar IAuthenticate-gränssnittet i Android-appprojektet. Hoppa över det här avsnittet om du inte stöder Android-enheter.

Högerklicka på droidprojektet i Visual Studio eller Xamarin Studio och ange sedan som StartUp-projekt.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) aktiveras när appen startar. 401-koden skapas eftersom åtkomsten på serverdelen endast är begränsad till behöriga användare.

Öppna MainActivity.cs i Android-projektet och lägg till följande using instruktioner:

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

Uppdatera klassen MainActivity för att implementera IAuthenticate-gränssnittet på följande sätt:

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

Uppdatera Klassen MainActivity genom att lägga till ett MobileServiceUser-fält och en Authenticate-metod som krävs av IAuthenticate-gränssnittet enligt följande:

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

Om du använder en annan identitetsprovider än Facebook väljer du ett annat värde för MobileServiceAuthenticationProvider.

Uppdatera AndroidManifest.xml-filen genom att lägga till följande XML i elementet <application> :

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

Ersätt {url_scheme_of_your_app} med ditt URL-schema.

Lägg till följande kod i metoden OnCreate för klassen MainActivity före anropet till LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Den här koden säkerställer att autentisatorn initieras innan appen läses in.
Återskapa appen, kör den och logga sedan in med den autentiseringsprovider som du valde och kontrollera att du kan komma åt data som en autentiserad användare.

Felsökning

Programmet kraschade med Java.Lang.NoSuchMethodError: No static method startActivity

I vissa fall visas konflikter i supportpaketen endast som en varning i Visual Studio, men applikationen kraschar med det här undantaget vid körtid. I det här fallet måste du se till att alla supportpaket som refereras i projektet har samma version. NuGet-paketet Azure Mobile Apps har Xamarin.Android.Support.CustomTabs beroende av Android-plattformen, så om ditt projekt använder nyare supportpaket måste du installera det här paketet med den version som krävs direkt för att undvika konflikter.

Lägga till autentisering i iOS-appen

Det här avsnittet visar hur du implementerar IAuthenticate-gränssnittet i iOS-appprojektet. Hoppa över det här avsnittet om du inte stöder iOS-enheter.

Högerklicka på iOS-projektet i Visual Studio eller Xamarin Studio och ange sedan som StartUp Project.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) aktiveras när appen startar. 401-svaret skapas eftersom åtkomsten på serverdelen endast är begränsad till behöriga användare.

Öppna AppDelegate.cs i iOS-projektet och lägg till följande using instruktioner:

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

Uppdatera Klassen AppDelegate för att implementera IAuthenticate-gränssnittet på följande sätt:

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

Uppdatera Klassen AppDelegate genom att lägga till ett MobileServiceUser-fält och en Authenticate-metod , vilket krävs av IAuthenticate-gränssnittet enligt följande:

 ```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;
 }
 ```

Om du använder en annan identitetsprovider än Facebook väljer du ett annat värde för [MobileServiceAuthenticationProvider].

Uppdatera klassen AppDelegate genom att lägga till OpenUrl-metodens överlagring enligt följande:

 ```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);
 }
 ```

Lägg till följande kodrad i metoden FinishedLaunching innan anropet till LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Den här koden säkerställer att autentiseringen initieras innan appen läses in.
Öppna Info.plist och lägg till en URL-typ. Ange identifieraren till ett namn som du väljer, URL-scheman till URL-schemat för din app och Rollen till Ingen.
Återskapa appen, kör den och logga sedan in med den autentiseringsprovider som du valde och kontrollera att du kan komma åt data som en autentiserad användare.

Lägga till autentisering i Windows 10-appprojekt (inklusive Telefon)

Det här avsnittet visar hur du implementerar IAuthenticate-gränssnittet i Windows 10-appprojekten. Samma steg gäller för UWP-projekt (Universal Windows Platform), men med UWP-projektet (med antecknade ändringar). Hoppa över det här avsnittet om du inte stöder Windows-enheter.

Högerklicka på UWP-projektet i Visual Studio och välj Ange som startprojekt.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) aktiveras när appen startar. 401-svaret inträffar eftersom åtkomsten på serverdelen endast är begränsad till behöriga användare.
Öppna MainPage.xaml.cs för Windows-appprojektet och lägg till följande using instruktioner:
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Ersätt <your_Portable_Class_Library_namespace> med namnområdet för ditt portabla klassbibliotek.
Uppdatera Klassen MainPage för att implementera IAuthenticate-gränssnittet enligt följande:
```
 public sealed partial class MainPage : IAuthenticate
```

Uppdatera Klassen MainPage genom att lägga till ett MobileServiceUser-fält och en Authenticate-metod som krävs av IAuthenticate-gränssnittet enligt följande:

 ```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;
 }
 ```