Lägga till autentisering i din Windows-app

2019-06-25

Översikt

Det här avsnittet visar hur du lägger till molnbaserad autentisering i din mobilapp. I den här självstudien lägger du till autentisering i snabbstartsprojektet Universal Windows Platform (UWP) för Mobile Apps med hjälp av en identitetsprovider som stöds av Azure App Service. När du har autentiserats och auktoriserats av mobilappens serverdel visas användar-ID-värdet.

Den här självstudien baseras på snabbstartsguiden för mobila appar. Du måste först slutföra självstudien Kom igång med Mobile Apps.

Registrera din app för autentisering och konfigurera App Service

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

Nu kan du kontrollera att anonym åtkomst till serverdelen har inaktiverats. Med UWP-appprojektet inställt som startprojekt distribuerar och kör du appen. kontrollera att ett ohanterat undantag med statuskoden 401 (obehörig) aktiveras när appen startas. Detta beror på att appen försöker komma åt din mobilappkod som en oautentiserad användare, men tabellen TodoItem kräver nu autentisering.

Därefter uppdaterar du appen för att autentisera användare innan du begär resurser från Din App Service.

Lägga till autentisering i appen

I UWP-appprojektfilen MainPage.xaml.cs och lägg till följande kodfragment:

 // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

Den här koden autentiserar användaren med en Facebook-inloggning. Om du använder en annan identitetsprovider än Facebook ändrar du värdet för MobileServiceAuthenticationProvider ovan till värdet för din provider.

Ersätt metoden OnNavigatedTo() i MainPage.xaml.cs. Sedan lägger du till knappen Logga in i appen som utlöser autentisering.

 protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

Lägg till följande kodfragment i MainPage.xaml.cs:

 private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

Öppna projektfilen MainPage.xaml, leta upp elementet som definierar knappen Spara och ersätt den med följande kod:

 <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

Lägg till följande kodfragment i App.xaml.cs:

 protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

Öppna filen Package.appxmanifest, navigera till Deklarationer, i listrutan Tillgängliga deklarationer väljer du Protokoll och klickar på knappen Lägg till . Konfigurera nu egenskaperna för protokolldeklarationen . I Visningsnamn lägger du till det namn som du vill visa för användarna av ditt program. I Namn lägger du till {url_scheme_of_your_app}.
Tryck på F5-tangenten för att köra appen, klicka på knappen Logga in och logga in på appen med din valda identitetsprovider. När inloggningen har slutförts körs appen utan fel och du kan köra frågor mot serverdelen och göra uppdateringar av data.

Lagra autentiseringstoken på klienten

I föregående exempel visades en standardinloggning som kräver att klienten kontaktar både identitetsprovidern och App Service varje gång appen startas. Den här metoden är inte bara ineffektiv, du kan stöta på problem med användningsrelaterade problem om många kunder försöker starta appen samtidigt. En bättre metod är att cachelagra den auktoriseringstoken som returneras av din App Service och försöka använda den först innan du använder en leverantörsbaserad inloggning.

Anmärkning

Du kan cachelagrat token som utfärdats av App Services oavsett om du använder klienthanterad eller tjänsthanterad autentisering. I den här självstudien används tjänsthanterad autentisering.

I MainPage.xaml.cs-projektfilen lägger du till följande using-satser:
```
 using System.Linq;        
 using Windows.Security.Credentials;
```

Ersätt metoden AuthenticateAsync med följande kod:

 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

I den här versionen av AuthenticateAsync försöker appen använda autentiseringsuppgifter som lagras i PasswordVault för att få åtkomst till tjänsten. En vanlig inloggning utförs också när det inte finns någon lagrad autentiseringsuppgift.

Anmärkning

En cachelagrad token kan ha upphört att gälla och tokens giltighetstid kan också inträffa efter autentisering när appen används. Information om hur du avgör om en token har upphört att gälla finns i Söka efter utgångna autentiseringstoken. För en lösning på hantering av auktoriseringsfel relaterade till utgående token, se inlägget Cachning och hantering av förfallna token i Azure Mobile Services managed SDK.

Starta om appen två gånger.

Observera att vid den första starten krävs inloggning med providern igen. Vid den andra omstarten används dock de cachelagrade autentiseringsuppgifterna och inloggningen kringgås.

Nästa steg

Nu när du har slutfört den här grundläggande autentiseringsguiden kan du överväga att fortsätta till någon av följande självstudier:

Lägga till push-meddelanden i din app
Lär dig hur du lägger till stöd för push-meddelanden i din app och konfigurerar mobilappens serverdel så att den använder Azure Notification Hubs för att skicka push-meddelanden.
Aktivera offlinesynkronisering för din app
Lär dig hur du lägger till offlinestöd för din app med hjälp av en mobilappsserverdel. Med offlinesynkronisering kan slutanvändarna interagera med en mobilapp – visa, lägga till eller ändra data – även om det inte finns någon nätverksanslutning.

Dela via