Aggiungere l'autenticazione all'app WindowsAdd authentication to your Windows app

In questo argomento viene illustrato come aggiungere l'autenticazione basata su cloud all’app per dispositivi mobili.This topic shows you how to add cloud-based authentication to your mobile app. In questa esercitazione si aggiungerà l'autenticazione al progetto di guida introduttiva UWP (Universal Windows Platform) per App per dispositivi mobili tramite un provider di identità supportato dal Servizio app di Azure.In this tutorial, you add authentication to the Universal Windows Platform (UWP) quickstart project for Mobile Apps using an identity provider that is supported by Azure App Service. In seguito all'autenticazione e all'autorizzazione da parte dell'app per dispositivi mobili, viene visualizzato il valore dell'ID utente.After being successfully authenticated and authorized by your Mobile App backend, the user ID value is displayed.

Questa esercitazione è basata sulla guida introduttiva di App per dispositivi mobili.This tutorial is based on the Mobile Apps quickstart. È necessario completare prima l'esercitazione relativa alla creazione di un'app per dispositivi mobili.You must first complete the tutorial Get started with Mobile Apps.

Registrare l'app per l'autenticazione e configurare il servizio appRegister your app for authentication and configure the App Service

Innanzitutto, è necessario registrare l'app nel sito di un provider di identità e quindi impostare le credenziali generate dal provider nel back-end dell'app per dispositivi mobili.First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

  1. Configurare il provider di identità preferito seguendo le istruzioni specifiche del provider:Configure your preferred identity provider by following the provider-specific instructions:

  2. Ripetere i passaggi precedenti per ogni provider di cui si desidera il supporto nell'app.Repeat the previous steps for each provider you want to support in your app.

Aggiungere l'app agli URL di reindirizzamento esterni consentitiAdd your app to the Allowed External Redirect URLs

L'autenticazione sicura richiede la definizione di un nuovo schema URL per l'app.Secure authentication requires that you define a new URL scheme for your app. In questo modo il sistema di autenticazione reindirizza all'app al termine del processo di autenticazione.This allows the authentication system to redirect back to your app once the authentication process is complete. In questa esercitazione si usa lo schema URL appname.In this tutorial, we use the URL scheme appname throughout. È tuttavia possibile usare QUALSIASI schema URL.However, you can use any URL scheme you choose. Lo schema deve essere univoco per l'applicazione per dispositivi mobili.It should be unique to your mobile application. Per abilitare il reindirizzamento sul lato server:To enable the redirection on the server side:

  1. Nel [portale di Azure] selezionare il servizio app.In the [Azure portal], select your App Service.

  2. Fare clic sull'opzione di menu Autenticazione/Autorizzazione.Click the Authentication / Authorization menu option.

  3. In URL di reindirizzamento esterni consentiti specificare url_scheme_of_your_app://easyauth.callback.In the Allowed External Redirect URLs, enter url_scheme_of_your_app://easyauth.callback. Il valore url_scheme_of_your_app in questa stringa è lo schema URL per l'applicazione per dispositivi mobili.The url_scheme_of_your_app in this string is the URL Scheme for your mobile application. Deve seguire le normale specifica URL per un protocollo, ovvero usare solo lettere e numeri e iniziare con una lettera.It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). È opportuno prendere nota della stringa scelta perché sarà necessario modificare il codice dell'applicazione per dispositivi mobili con lo schema URL in diverse posizioni.You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.

  4. Fare clic su OK.Click OK.

  5. Fare clic su Save.Click Save.

Limitare le autorizzazioni agli utenti autenticatiRestrict permissions to authenticated users

Per impostazione predefinita, le API in un back-end dell'app per dispositivi mobili possono essere richiamate in modo anonimo.By default, APIs in a Mobile Apps back end can be invoked anonymously. È necessario limitare l'accesso solo ai client autenticati.Next, you need to restrict access to only authenticated clients.

  • Back-end Node. js nuovamente fine (tramite il Portale di Azure) :Node.js back end (via the Azure portal) :

    Nelle impostazioni dell'app per dispositivi mobili fare clic su Tabelle semplici e selezionare la tabella.In your Mobile Apps settings, click Easy Tables and select your table. Fare clic su Modifica autorizzazioni, selezionare Authenticated access only (Solo accesso con autenticazione) per tutte le autorizzazioni e quindi fare clic su Salva.Click Change permissions, select Authenticated access only for all permissions, and then click Save.

  • Back-end. NET (C#):.NET back end (C#):

    Nel progetto server passare a Controller > TodoItemController.cs.In the server project, navigate to Controllers > TodoItemController.cs. Aggiungere l'attributo [Authorize] alla classe TodoItemController, come indicato di seguito.Add the [Authorize] attribute to the TodoItemController class, as follows. Per limitare l'accesso solo a metodi specifici, è inoltre possibile applicare questo attributo solo a tali metodi anziché alla classe.To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. Pubblicare di nuovo il progetto server.Republish the server project.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Back-end Node.js (tramite codice Node.js) :Node.js backend (via Node.js code) :

    Per richiedere l'autenticazione per l'accesso alla tabella, aggiungere la riga seguente allo script del server Node.js:To require authentication for table access, add the following line to the Node.js server script:

      table.access = 'authenticated';
    

    Per altre informazioni, vedere Procedura: Richiedere l'autenticazione per l'accesso alle tabelle.For more details, see How to: Require authentication for access to tables. Per informazioni su come scaricare il progetto di codice di avvio rapido dal sito, vedere Procedura: Scaricare il progetto di codice di avvio rapido del back-end Node.js tramite Git.To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

A questo punto, è possibile verificare che l'accesso anonimo al back-end è stato disabilitato.Now, you can verify that anonymous access to your backend has been disabled. Dopo aver impostato il progetto di app UWP come progetto di avvio, distribuire ed eseguire l'app. Verificare che dopo l'avvio dell'app venga generata un'eccezione non gestita con codice di stato 401 (Non autorizzato).With the UWP app project set as the start-up project, deploy and run the app; verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. L'eccezione non gestita viene generata perché l'app prova ad accedere al codice dell'app per dispositivi mobili come utente non autenticato, mentre la tabella TodoItem richiede ora l'autenticazione.This happens because the app attempts to access your Mobile App Code as an unauthenticated user, but the TodoItem table now requires authentication.

A questo punto, si aggiornerà l'app in modo che autentichi gli utenti prima di richiedere risorse al servizio mobile.Next, you will update the app to authenticate users before requesting resources from your App Service.

Aggiungere l'autenticazione all'appAdd authentication to the app

  1. Nel file del progetto dell'app UWP MainPage.xaml.cs aggiungere il frammento di codice seguente:In the UWP app project file MainPage.xaml.cs and add the following code snippet:

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

    L'utente viene autenticato nel codice tramite un account di accesso di Facebook.This code authenticates the user with a Facebook login. Se si usa un provider di identità diverso da Facebook, sostituire il valore di MobileServiceAuthenticationProvider con il nome del provider.If you are using an identity provider other than Facebook, change the value of MobileServiceAuthenticationProvider above to the value for your provider.

  2. Sostituire il metodo OnNavigatedTo() in MainPage.xaml.cs.Replace the OnNavigatedTo() method in MainPage.xaml.cs. A questo punto aggiungere un pulsante di accesso all'app che attiva l'autenticazione.Next, you will add a Sign in button to the app that triggers authentication.

     protected override async void OnNavigatedTo(NavigationEventArgs e)
     {
         if (e.Parameter is Uri)
         {
             App.MobileService.ResumeWithURL(e.Parameter as Uri);
         }
     }
    
  3. Aggiungere il seguente frammento di codice a MainPage.xaml.cs:Add the following code snippet to the 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. Aprire il file di progetto MainPage.xaml, individuare l'elemento che definisce il pulsante Save e sostituirlo con il codice seguente:Open the MainPage.xaml project file, locate the element that defines the Save button and replace it with the following 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. Aggiungere il seguente frammento di codice ad App.xaml.cs:Add the following code snippet to the 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. Aprire il file Package.appxmanifest, passare a Dichiarazioni nell'elenco a discesa Dichiarazioni disponibili, selezionare Protocollo e fare clic sul pulsante Aggiungi.Open Package.appxmanifest file, navigate to Declarations, in Available Declarations dropdown list, select Protocol and click Add button. Configurare ora le Proprietà della dichiarazione Protocollo.Now configure the Properties of the Protocol declaration. In Nome visualizzato aggiungere il nome da mostrare agli utenti dell'applicazione.In Display name, add the name you wish to display to users of your application. In Nome aggiungere il valore {url_scheme_of_your_app}.In Name, add your {url_scheme_of_your_app}.
  7. Premere il tasto F5 per eseguire l'app, fare clic sul pulsante Sign in e accedere all'app con il provider di identità scelto.Press the F5 key to run the app, click the Sign in button, and sign into the app with your chosen identity provider. Dopo che l'accesso è stato completato, l'app funziona senza errori ed è possibile eseguire query nel back-end e aggiornare i dati.After your sign-in is successful, the app runs without errors and you are able to query your backend and make updates to data.

Archiviare il token di autenticazione sul clientStore the authentication token on the client

Nell'esempio precedente è stato illustrato un accesso standard, che richiede al client di contattare sia il provider di identità sia il servizio app ogni volta che l'app viene avviata.The previous example showed a standard sign-in, which requires the client to contact both the identity provider and the App Service every time that the app starts. Non solo questo metodo è inefficiente, ma si potrebbero riscontrare problemi relativi all'uso qualora molti clienti provassero ad avviare l'app contemporaneamente.Not only is this method inefficient, you can run into usage-relates issues should many customers try to start you app at the same time. Un miglior approccio consiste nel memorizzare nella cache il token di autorizzazione restituito dal servizio app e provare a usare questo prima di usare un accesso basato su provider.A better approach is to cache the authorization token returned by your App Service and try to use this first before using a provider-based sign-in.

Nota

È possibile memorizzare nella cache il token rilasciato dai Servizi app indipendentemente dal fatto che si usi l'autenticazione gestita dal client o gestita dal servizio.You can cache the token issued by App Services regardless of whether you are using client-managed or service-managed authentication. In questa esercitazione viene usata l'autenticazione gestita dal servizio.This tutorial uses service-managed authentication.

  1. Nel file di progetto MainPage.xaml.cs aggiungere le istruzioni using seguenti:In the MainPage.xaml.cs project file, add the following using statements:

     using System.Linq;        
     using Windows.Security.Credentials;
    
  2. Sostituire il metodo AuthenticateAsync con il codice seguente:Replace the AuthenticateAsync method with the following 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: http://aka.ms/jww5vp.
    
             success = true;
             message = string.Format("Cached credentials for user - {0}", user.UserId);
         }
         else
         {
             try
             {
                 // Login with the identity provider.
                 user = await App.MobileService
                     .LoginAsync(provider);
    
                 // 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 logged in - {0}", user.UserId);
             }
             catch (MobileServiceInvalidOperationException)
             {
                 message = "You must log in. Login Required";
             }
         }
    
         var dialog = new MessageDialog(message);
         dialog.Commands.Add(new UICommand("OK"));
         await dialog.ShowAsync();
    
         return success;
     }
    

    In questa versione di AuthenticateAsync, l'app tenta di usare le credenziali archiviate in PasswordVault per accedere al servizio.In this version of AuthenticateAsync, the app tries to use credentials stored in the PasswordVault to access the service. Un accesso normale viene eseguito anche quando non sono disponibili credenziali archiviate.A regular sign-in is also performed when there is no stored credential.

    Nota

    Un token memorizzato nella cache potrebbe essere scaduto, ma la scadenza del token può avvenire anche dopo l'autenticazione mentre l'app è in uso.A cached token may be expired, and token expiration can also occur after authentication when the app is in use. Per informazioni su come determinare se un token è scaduto, vedere Cercare i token di autenticazione scaduti.To learn how to determine if a token is expired, see Check for expired authentication tokens. Per una soluzione relativa alla gestione degli errori di autorizzazione relativi ai token scaduti, vedere il post sulla memorizzazione nella cache e la gestione dei token scaduti nell'SDK per il codice gestito di Servizi mobili di Azure.For a solution to handling authorization errors related to expiring tokens, see the post Caching and handling expired tokens in Azure Mobile Services managed SDK.

  3. Riavviare l'app due volte.Restart the app twice.

    Si noti che al primo avvio viene di nuovo richiesto l'accesso con il provider.Notice that on the first start-up, sign-in with the provider is again required. Al secondo riavvio, invece, verranno usate le credenziali memorizzate nella cache e l'accesso sarà ignorato.However, on the second restart the cached credentials are used and sign-in is bypassed.

Passaggi successiviNext steps

Dopo aver completato questa esercitazione sull'autenticazione di base, provare a continuare fino a una delle esercitazioni seguenti:Now that you completed this basic authentication tutorial, consider continuing on to one of the following tutorials:

  • Aggiungere notifiche push all'app Xamarin.FormsAdd push notifications to your app
    : informazioni su come aggiungere il supporto per le notifiche push all'app e configurare il back-end dell'app per dispositivi mobili per usare Hub di notifica di Azure per l'invio di notifiche push.Learn how to add push notifications support to your app and configure your Mobile App backend to use Azure Notification Hubs to send push notifications.
  • Abilitare la sincronizzazione offline per l'app per dispositivi mobili Xamarin.FormsEnable offline sync for your app
    : informazioni su come aggiungere il supporto offline all'app usando il back-end di un'app per dispositivi mobili.Learn how to add offline support your app using an Mobile App backend. La sincronizzazione offline consente agli utenti finali di interagire con un'app—visualizzando, aggiungendo e modificando i dati—anche se non è disponibile una connessione di rete.Offline sync allows end-users to interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection.