Lägga till autentisering i Xamarin Forms-appen

Artikel
06/25/2019

Översikt

Det här avsnittet visar hur du autentiserar användare av App Service en mobilapp från klientprogrammet. I den här självstudien lägger du till autentisering i Xamarin Forms-snabbstartsprojektet med hjälp av en identitetsprovider som stöds av App Service. När du har autentiserats och auktoriserats av mobilappen visas värdet för användar-ID 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 hämtade snabbstartsserverprojektet måste du lägga till autentiseringstilläggspaketet i projektet. Mer information om servertilläggspaket finns i Arbeta med SDK för .NET-serverserver för 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 ange de autentiseringsuppgifter som genererats av providern Mobile Apps-backend.

Konfigurera den identitetsprovider du föredrar genom att följa de providerspecifika anvisningarna:
Upprepa föregående steg för varje provider 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-schemats appnamn genomgående. Du kan dock använda val annat URL-schema. Det bör vara unikt för ditt mobilprogram. Så här aktiverar du omdirigeringen på serversidan:

I Azure Portal väljer du App Service.
Klicka på menyalternativet Autentisering/auktorisering .
I Tillåtna externa omdirigerings-URL:er anger du url_scheme_of_your_app://easyauth.callback. Den url_scheme_of_your_app strängen är URL-schemat för ditt mobilprogram. Den bör följa den normala URL-specifikationen 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 behöver justera koden för mobilprogram 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 Mobile Apps en backend anropas anonymt. Därefter behöver du begränsa åtkomsten till endast autentiserade klienter.

Node.js (via Azure Portal):

I inställningarna Mobile Apps 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 ControllersTodoItemController.cs>. Lägg till [Authorize] 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 . Publicera om serverprojektet.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js (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 Gör så här: Kräv autentisering för åtkomst till tabeller. Information om hur du laddar ned snabbstartskodprojektet från webbplatsen finns i How to: Download the Node.js backend quickstart code project using Git (Så här gör du: Ladda ned kodprojektet för Node.js backend med Git).

Lägga till autentisering i det portabla klassbiblioteket

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

Om du vill autentisera med ett Xamarin Forms-projekt definierar du ett IAuthenticate-gränssnitt i Portable Class Library för appen. Lägg sedan till en inloggningsknapp i användargränssnittet som definierats i Portable Class Library, som du klickar på för att starta autentiseringen. Data läses in från mobilappsserverappen 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 Portable Class Library-projekt, och lägger sedan till följande using -instruktion:
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
I App.cs lägger du till följande gränssnittsdefinition IAuthenticate 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 klassen App .

 ```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 Button-element 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 serverad autentisering med mobilappsserverservern.
Ö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 efter att du har autentiserats.

Lägg till följande hanterare för den klickade händelsen 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 och verifiera att det inte finns några fel.

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.

I Visual Studio eller Xamarin Studio högerklickar du på droid-projektet och sedan på Ange som Project.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) utlöses när appen startar. 401-koden skapas eftersom åtkomsten på backend är begränsad till endast 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 enligt följande:

 ```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 Autentiseringsmetod 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.xmlgenom att lägga till följande XML i <application> elementet :

<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 i 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 autentiseringen initieras innan appen läses in.
Återskapa appen, kör den och logga sedan in med den autentiseringsprovider som du har valt 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 som bara en varning i Visual Studio, men programmet kraschar med det här undantaget vid körning. I det här fallet måste du se till att alla supportpaket som refereras till i projektet har samma version. Azure Mobile Apps NuGet-paketet är Xamarin.Android.Support.CustomTabs beroende av Android-plattformen, så om projektet använder nyare supportpaket behöver du installera det här paketet i erfordrad version 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.

I Visual Studio eller Xamarin Studio högerklickar du på iOS-projektet och sedan på Ange som Project.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) utlöses när appen startar. 401-svaret skapas eftersom åtkomsten på backend är begränsad till endast behöriga användare.

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

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

Uppdatera AppDelegate-klassen för att implementera IAuthenticate-gränssnittet enligt följande:

 ```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 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.
         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 metoden overload för OpenUrl 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 före 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 Roll till Ingen.
Återskapa appen, kör den och logga sedan in med den autentiseringsprovider som du har valt och kontrollera att du kan komma åt data som en autentiserad användare.

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

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

Högerklicka Visual Studio UWP-projektet i Project.
Tryck på F5 för att starta projektet i felsökningsprogrammet och kontrollera sedan att ett ohanterat undantag med statuskoden 401 (Obehörig) utlöses när appen startar. 401-svaret beror på att åtkomsten på backend är begränsad till endast behöriga användare.
Öppna MainPage.xaml.cs för Windows-appprojektet och lägg till följande -instruktionerusing:
```
 ```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 Autentiseringsmetod 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;
 }
 ```