Aggiungere l'autenticazione all'app di Windows

Articolo
2019-06-25

Android
Cordova
iOS
Windows
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

Informazioni generali

Questo argomento illustra come aggiungere l'autenticazione basata sul cloud all'app per dispositivi mobili. In questa esercitazione si aggiunge l'autenticazione al progetto di avvio rapido della piattaforma UWP (Universal Windows Platform) per app per dispositivi mobili usando un provider di identità supportato dal servizio app di Azure. Dopo essere stato autenticato e autorizzato con successo dal back-end dell'app mobile, viene visualizzato il valore dell'ID utente.

Questa esercitazione si basa sulla guida introduttiva alle app per dispositivi mobili. È prima necessario completare l'esercitazione Introduzione alle app per dispositivi mobili.

Registrare l'app per l'autenticazione e configurare il servizio app

Prima di tutto, è necessario registrare l'app nel sito di un provider di identità e quindi impostare le credenziali generate dal provider nel back-end delle app per dispositivi mobili.

Configurare il provider di identità preferito seguendo le istruzioni specifiche del provider:
Ripetere i passaggi precedenti per ogni provider che si vuole supportare nell'app.

Aggiungere l'app agli URL di reindirizzamento esterni consentiti

Per l'autenticazione sicura è necessario definire un nuovo schema URL per l'app. Ciò consente al sistema di autenticazione di tornare all'app al termine del processo di autenticazione. In questa esercitazione viene usato lo schema URL nomeapp in tutto. Tuttavia, è possibile usare qualsiasi schema url scelto. Deve essere univoco per l'applicazione per dispositivi mobili. Per abilitare il reindirizzamento sul lato server:

Nel portale di Azure, selezionare il Servizio App.
Fare clic sull'opzione di menu Autenticazione/autorizzazione.
Nella URL di reindirizzamento esterno consentita, inserire url_scheme_of_your_app://easyauth.callback. Il url_scheme_of_your_app presente in questa stringa è lo schema URL per la tua applicazione mobile. Deve seguire la normale specifica url per un protocollo (usare solo lettere e numeri e iniziare con una lettera). È consigliabile prendere nota della stringa scelta perché sarà necessario modificare il codice dell'applicazione per dispositivi mobili con lo schema URL in diverse posizioni.
Fare clic su Salva.

Limitare le autorizzazioni agli utenti autenticati

Per impostazione predefinita, le API in un back-end delle app per dispositivi mobili possono essere richiamate in modo anonimo. Successivamente, è necessario limitare l'accesso solo ai client autenticati.

Node.js back-end (tramite il portale di Azure) :

Nelle impostazioni delle app per dispositivi mobili fare clic su Tabelle semplici e selezionare la tabella. Fare clic su Modifica autorizzazioni, selezionare Solo accesso autenticato per tutte le autorizzazioni e quindi fare clic su Salva.
back end .NET (C#):

Nel progetto server, navigare verso Controllers>TodoItemController.cs. Aggiungere l'attributo [Authorize] alla classe TodoItemController come indicato di seguito. Per limitare l'accesso solo a metodi specifici, è anche possibile applicare questo attributo solo a tali metodi anziché alla classe . Ripubblica il progetto del server.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Node.js back-end (tramite codice Node.js) :

Per richiedere l'autenticazione per l'accesso alle tabelle, aggiungere la riga seguente allo script del server Node.js:
```
  table.access = 'authenticated';
```
Per altre informazioni, vedere Procedura: Richiedere l'autenticazione per l'accesso alle tabelle. Per informazioni su come scaricare il progetto di codice di avvio rapido dal sito, vedere Procedura: Scaricare il progetto di codice di avvio rapido back-end Node.js usando Git.

È ora possibile verificare che l'accesso anonimo al back-end sia stato disabilitato. Con il progetto di app UWP impostato come progetto di avvio, distribuire ed eseguire l'app; verificare che venga generata un'eccezione non gestita con un codice di stato 401 (Non autorizzato) dopo l'avvio dell'app. Ciò si verifica perché l'app tenta di accedere al codice dell'app per dispositivi mobili come utente non autenticato, ma la tabella TodoItem richiede ora l'autenticazione.

Successivamente, si aggiornerà l'app per autenticare gli utenti prima di richiedere risorse dal servizio app.

Aggiungere l'autenticazione all'app

Nel file di progetto dell'app UWP MainPage.xaml.cs e aggiungere il frammento di codice seguente:

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

Questo codice autentica l'utente con un account di accesso di Facebook. Se si usa un provider di identità diverso da Facebook, modificare il valore di MobileServiceAuthenticationProvider sopra al valore per il provider.

Sostituire il metodo OnNavigatedTo() in MainPage.xaml.cs. Successivamente, si aggiungerà un pulsante Accedi all'app che attiva l'autenticazione.

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

Aggiungere il frammento di codice seguente alla 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();
     }
 }

Aprire il file di progetto MainPage.xaml, individuare l'elemento che definisce il pulsante Salva e sostituirlo con il codice seguente:

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

Aggiungere il frammento di codice seguente al 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);
 }

Aprire il file Package.appxmanifest, passare a Dichiarazioni, nell'elenco a discesa Dichiarazioni disponibili selezionare Protocollo e fare clic sul pulsante Aggiungi . Configurare ora le proprietà della dichiarazione protocollo . In Nome visualizzato aggiungere il nome da visualizzare agli utenti dell'applicazione. In Nome, aggiungi il tuo {url_scheme_of_your_app}.
Premere F5 per eseguire l'app, fare clic sul pulsante Accedi e accedere all'app con il provider di identità scelto. Al termine dell'accesso, l'app viene eseguita senza errori ed è possibile eseguire query sul back-end e apportare aggiornamenti ai dati.

Archiviare il token di autenticazione nel client

L'esempio precedente ha mostrato un accesso standard, che richiede al client di contattare sia il provider di identità che il servizio app ogni volta che l'app viene avviata. Non solo questo metodo è inefficiente, è possibile verificare problemi relativi all'utilizzo se molti clienti tentano di avviare l'app contemporaneamente. Un approccio migliore consiste nel memorizzare nella cache il token di autorizzazione restituito dal servizio app e provare a usarlo prima di usare un accesso basato su provider.

Nota

È possibile memorizzare nella cache il token rilasciato da Servizi app indipendentemente dal fatto che si usi l'autenticazione gestita dal client o gestita dal servizio. Questa esercitazione usa l'autenticazione gestita dal servizio stesso.

Nel file di progetto MainPage.xaml.cs aggiungere le istruzioni using seguenti:
```
 using System.Linq;        
 using Windows.Security.Credentials;
```

Sostituire il metodo AuthenticateAsync con il codice seguente:

 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 questa versione di AuthenticateAsync, l'app tenta di usare le credenziali archiviate in PasswordVault per accedere al servizio. Viene eseguito anche un accesso regolare quando non sono presenti credenziali archiviate.

Nota

Un token memorizzato nella cache può essere scaduto e la scadenza del token può verificarsi anche dopo l'autenticazione quando l'app è in uso. Per informazioni su come determinare se un token è scaduto, vedere Verificare la presenza di token di autenticazione scaduti. Per una soluzione per gestire gli errori di autorizzazione relativi ai token in scadenza, vedere il post Memorizzazione nella cache e gestione dei token scaduti in Azure Mobile Services Managed SDK.

Riavviare l'app due volte.

Si noti che al primo avvio, è necessario eseguire di nuovo l'accesso con il provider. Tuttavia, al secondo riavvio vengono usate le credenziali memorizzate nella cache e l'accesso viene ignorato.

Passaggi successivi

Dopo aver completato questa esercitazione sull'autenticazione di base, è consigliabile continuare con una delle esercitazioni seguenti:

Aggiungi notifiche push alla tua app
Informazioni su come aggiungere il supporto delle notifiche push all'app e configurare il back-end dell'app per dispositivi mobili per l'uso di Hub di notifica di Azure per inviare notifiche push.
Abilitare la sincronizzazione offline per l'app
Informazioni su come aggiungere il supporto offline dell'app usando un back-end dell'app per dispositivi mobili. La sincronizzazione offline consente agli utenti finali di interagire con un'app per dispositivi mobili, visualizzando, aggiungendo o modificando i dati, anche quando non è presente alcuna connessione di rete.

Condividi tramite