Lägga till autentisering i din Windows app

Artikel
06/25/2019

Översikt

Det här avsnittet visar hur du lägger till molnbaserad autentisering i mobilappen. I den här självstudien lägger du till autentisering i Universell Windows-plattform-snabbstartsprojektet (UWP) för Mobile Apps med hjälp av en identitetsprovider som stöds av Azure App Service. När autentiseringen har lyckats och auktoriserats av mobilapps-servern visas värdet för användar-ID:t.

Den här självstudien baseras Mobile Apps snabbstarten. Du måste först slutföra självstudiekursen 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 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å 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).

Nu kan du kontrollera att anonym åtkomst till din backend 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) utlöses när appen startar. Detta beror på att appen försöker komma åt mobilappkoden som en oautentiseringsanvändare, men TodoItem-tabellen 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 lägger du 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 leverantör.

Ersätt metoden OnNavigatedTo() i MainPage.xaml.cs. Sedan lägger du till en inloggningsknapp 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, gå till Deklarationer, välj Protokoll i listrutan Tillgängliga deklarationer och klicka på knappen Lägg till. Konfigurera nu egenskaper fördeklarationen Protokoll. I Visningsnamn lägger du till det namn som du vill visa för användare av ditt program. I Namn lägger du till {url_scheme_of_your_app}.
Tryck på F5 för att köra appen, klicka på knappen Logga in och logga in i appen med din valda identitetsprovider. När inloggningen har lyckats körs appen utan fel och du kan köra frågor mot din backend och göra uppdateringar av data.

Lagra autentiseringstoken på klienten

I föregående exempel visades en standard-inloggning som kräver att klienten kontaktar både identitetsprovidern och App Service varje gång appen startar. Den här metoden är ineffektiv, du kan även få 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 providerbaserad inloggning.

Anteckning

Du kan cachelagra den token som utfärdats av App Services oavsett om du använder klient-hanterad eller tjänst-hanterad autentisering. I den här självstudien används tjänstbaserad autentisering.

Lägg till följande using-instruktioner i MainPage.xaml.cs-projektfilen:
```
 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ågra lagrade autentiseringsuppgifter.

Anteckning

En cachelagrad token kan ha upphört att gälla och tokens giltighetstid kan också ske 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. En lösning för att hantera auktoriseringsfel som rör utgående token finns i post-Cachelagring och hantering av utgångna token i Azure Mobile Services managed SDK.

Starta om appen två gånger.

Observera att inloggning med providern krävs igen vid den första starten. 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 självstudien om autentisering kan du fortsätta till någon av följande självstudier:

Lägg till push-meddelanden i appen
Läs om hur du lägger till stöd för push-meddelanden i appen och konfigurerar serverdelen för mobilappen så att Azure Notification Hubs används för att skicka push-meddelanden.
Aktivera offlinesynkronisering av appen
Läs om hur du lägger till offlinestöd i appen genom en mobilappsserverdel. Med offlinesynkronisering kan slutanvändare interagera med en mobilapp – visa, lägga till eller ändra data – även om det inte finns någon nätverksanslutning.

Share via