Verificatie toevoegen aan uw Windows app

  • Artikel

Overzicht

In dit onderwerp ziet u hoe u cloudgebaseerde verificatie toevoegt aan uw mobiele app. In deze zelfstudie voegt u verificatie toe aan het snelstartproject Universeel Windows-platform (UWP) voor Mobile Apps met behulp van een id-provider die wordt ondersteund door Azure App Service. Nadat de verificatie is geslaagd en geautoriseerd door de back-end van uw mobiele app, wordt de waarde van de gebruikers-id weergegeven.

Deze zelfstudie is gebaseerd op de Mobile Apps quickstart. U moet eerst de zelfstudie Aan de slag met Mobile Apps.

Registreer uw app voor verificatie en configureer de App Service

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

  1. Configureer uw voorkeurs-id-provider door de providerspecifieke instructies te volgen:

  2. Herhaal de vorige stappen voor elke provider die u in uw app wilt ondersteunen.

Uw app toevoegen aan de toegestane URL's voor externe omleiding

Voor beveiligde verificatie moet u een nieuw URL-schema voor uw app definiëren. Hierdoor kan het verificatiesysteem terugleiden naar uw app zodra het verificatieproces is voltooid. In deze zelfstudie gebruiken we overal de app-naam van het URL-schema . U kunt echter elk URL-schema gebruiken dat u kiest. Deze moet uniek zijn voor uw mobiele toepassing. De omleiding aan de serverzijde inschakelen:

  1. Selecteer uw Azure Portal in de App Service.

  2. Klik op de menuoptie Verificatie/ autorisatie.

  3. Voer in de toegestane URL's voor externe omleiding 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. U moet de code van uw mobiele toepassing op verschillende plaatsen aanpassen met het URL-schema.

  4. Klik op Opslaan.

Machtigingen beperken voor geverifieerde gebruikers

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

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

    Klik in Mobile Apps instellingen op Eenvoudige tabellen en selecteer uw 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 ControllersTodoItemController.cs>. Voeg het [Authorize] kenmerk als volgt toe aan de klasse TodoItemController . Als u de toegang alleen wilt beperken tot specifieke methoden, kunt u dit kenmerk ook alleen toepassen op die methoden in plaats van op de klasse . Het serverproject opnieuw publiceren.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js back-Node.js (via Node.js code) :

    Als u verificatie wilt vereisen voor toegang tot de tabel, voegt u de volgende regel toe aan Node.js serverscript:

      table.access = 'authenticated';

    Zie How to: Require authentication for access to tables (Verificatie vereisen voor toegang tot tabellen) voor meer informatie. Zie How to: Download the Node.js backend quickstart code project using Git (Het snelstartcodeproject voor de back-Node.js downloaden met Behulp van Git) voor meer informatie over het downloaden van het quickstart-codeproject van uw site.

U kunt nu controleren of anonieme toegang tot uw back-end is uitgeschakeld. Als het UWP-app-project is ingesteld als het opstartproject, implementeert en voer u de app uit; controleer of er een onverhandelde uitzondering met de statuscode 401 (Niet geautoriseerd) wordt gemaakt nadat de app is gestart. Dit gebeurt omdat de app als niet-geauthenticeerde gebruiker toegang probeert te krijgen tot uw mobiele app-code, maar voor de todoItem-tabel is nu verificatie vereist.

Vervolgens gaat u de app bijwerken om gebruikers te verifiëren voordat u resources aanvraagt bij uw App Service.

Verificatie toevoegen aan de app

  1. Voeg in het UWP-app-projectbestand MainPage.xaml.cs het volgende codefragment toe:

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

    Met deze code wordt de gebruiker geverifieerd met een Facebook-aanmelding. Als u een andere id-provider dan Facebook gebruikt, wijzigt u de waarde van MobileServiceAuthenticationProvider hierboven in de waarde voor uw provider.

  2. Vervang de methode OnNavigatedTo() in MainPage.xaml.cs. Vervolgens voegt u een knop Aanmelden toe aan de app die verificatie activeert.

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

  3. Voeg het volgende codefragment toe aan 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();
     }
 }

  4. Open het projectbestand MainPage.xaml, zoek het element dat de knop Opslaan definieert en vervang het door de volgende code:

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

  5. Voeg het volgende codefragment toe aan 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);
 }

  6. Open het bestand Package.appxmanifest, navigeer naar Declaraties, selecteer protocol in de vervolgkeuzelijst Beschikbare declaraties en klik opde knop Toevoegen. Configureer nu de eigenschappen van de protocoldeclaratie . Voeg in Weergavenaam de naam toe die u wilt weergeven voor gebruikers van uw toepassing. Voeg bij Naam uw {url_scheme_of_your_app} toe.

  7. Druk op de toets F5 om de app uit te voeren, klik op de knop Aanmelden en meld u aan bij de app met de door u gekozen id-provider. Nadat uw aanmelding is geslaagd, wordt de app zonder fouten uitgevoerd en kunt u een query uitvoeren op uw back-ende back-en om gegevens bij te werken.

Het verificatietoken opslaan op de client

In het vorige voorbeeld werd een standaard aanmelding getoond, waarvoor de client telkens wanneer de app wordt gestart contact moet opnemen met zowel de id-provider als de App Service de client. Deze methode is niet alleen inefficiënt, maar u kunt ook problemen met betrekking tot gebruik krijgen als veel klanten proberen om uw app op hetzelfde moment te starten. Een betere benadering is om het autorisatie-token dat door uw App Service wordt geretourneerd, in de cache op te nemen en dit eerst te gebruiken voordat u een aanmelding op basis van een provider gebruikt.

Notitie

U kunt het token dat is uitgegeven door App Services in de cache, ongeacht of u door de client beheerde of door de service beheerde verificatie gebruikt. In deze zelfstudie wordt gebruikgemaakt van door de service beheerde verificatie.

  1. Voeg in het projectbestand MainPage.xaml.cs de volgende using-instructies toe:

     using System.Linq;        
 using Windows.Security.Credentials;

  2. Vervang de methode AuthenticateAsync door de volgende code:

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

    In deze versie van AuthenticateAsync probeert de app referenties te gebruiken die zijn opgeslagen in passwordVault om toegang te krijgen tot de service. Er wordt ook regelmatig een aanmelding uitgevoerd wanneer er geen referenties zijn opgeslagen.

    Notitie

    Een token in de cache kan verlopen zijn en het token kan ook verlopen na verificatie wanneer de app in gebruik is. Zie Controleren op verlopen verificatietokens voor meer informatie over het bepalen of een token is verlopen. Zie de post-Caching en verwerking van verlopen tokens in Azure Mobile Services beheerde SDK voor een oplossing voor het afhandelen van autorisatiefouten met betrekking tot verlopen tokens.

  3. Start de app twee keer opnieuw.

    U ziet dat u zich bij de eerste keer opnieuw moet aanmelden bij de provider. Bij het tweede keer opnieuw opstarten worden echter de referenties in de cache gebruikt en wordt de aanmelding overgeslagen.

Volgende stappen

Nu u deze basisverificatiezelfstudie hebt voltooid, kunt u doorgaan met een van de volgende zelfstudies:

  • Pushmeldingen toevoegen aan uw app
    Informatie over het toevoegen van ondersteuning van pushmeldingen aan uw app en het configureren van de backend voor mobiele apps voor gebruik van Azure Notification Hubs voor het verzenden van pushmeldingen.
  • Offlinesynchronisatie voor uw app inschakelen
    Informatie over het toevoegen van offlineondersteuning aan uw app met een back-end voor mobiele apps. Met offlinesynchronisatie kunnen eindgebruikers communiceren met een mobiele app, zoals het weergeven, toevoegen of wijzigen van gegevens, zelfs wanneer er geen netwerkverbinding is.