Aggiungere l'autenticazione all'app Xamarin Forms

Androide
Cordova
Ios
Windows
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

Informazioni generali

Questo argomento illustra come autenticare gli utenti di un App Service Mobile App dall'applicazione del client. In questa esercitazione si aggiunge l'autenticazione al progetto di avvio rapido di Xamarin Forms usando un provider di identità supportato dal servizio app. Dopo essere stato autenticato e autorizzato con successo dall'app mobile, viene visualizzato il valore dell'ID utente e sarà possibile accedere ai dati della tabella con restrizioni.

Prerequisiti

Per ottenere risultati ottimali con questa esercitazione, è consigliabile completare prima l'esercitazione Creare un'app Xamarin Forms . Dopo aver completato questa esercitazione, si avrà un progetto Xamarin Forms che è un'app TodoList multipiattaforma.

Se non si usa il progetto server di avvio rapido scaricato, è necessario aggiungere il pacchetto di estensione di autenticazione al progetto. Per altre informazioni sui pacchetti di estensione server, vedere Usare l'SDK del server back-end .NET per App per dispositivi mobili di Azure.

Registrare l'app per l'autenticazione e configurare i servizi 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 OK.
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.

Aggiungere l'autenticazione alla libreria di classi portabile

App mobile utilizza il metodo di estensione LoginAsync su MobileServiceClient per effettuare l'accesso di un utente con l'autenticazione di App Service. Questo esempio usa un flusso di autenticazione gestito dal server che visualizza l'interfaccia di accesso del provider nell'app. Per altre informazioni, vedere Autenticazione gestita dal server. Per offrire un'esperienza utente migliore nell'app di produzione, è consigliabile usare invece l'autenticazione gestita dal client.

Per eseguire l'autenticazione con un progetto Xamarin Forms, definire un'interfaccia IAuthenticate nella libreria di classi portabile per l'app. Aggiungere quindi un pulsante Accedi all'interfaccia utente definita nella libreria di classi portabile, su cui fare clic per avviare l'autenticazione. I dati vengono caricati dal back-end dell'app per dispositivi mobili dopo l'autenticazione riuscita.

Implementare l'interfaccia IAuthenticate per ogni piattaforma supportata dall'app.

In Visual Studio o Xamarin Studio aprire App.cs dal progetto con Portabile nel nome, ovvero il progetto Libreria di classi portabile , quindi aggiungere l'istruzione seguente using :
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
In App.cs aggiungere la definizione di interfaccia seguente IAuthenticate immediatamente prima della definizione della App classe.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

Per inizializzare l'interfaccia con un'implementazione specifica della piattaforma, aggiungere i membri statici seguenti alla classe App .

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

Aprire TodoList.xaml dal progetto Libreria di classi portabile, aggiungere l'elemento Button seguente nell'elemento di layout buttonsPanel , dopo il pulsante esistente:
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
Questo pulsante attiva l'autenticazione gestita dal server con il back-end dell'app per dispositivi mobili.
Aprire TodoList.xaml.cs dal progetto Libreria di classi portabile, quindi aggiungere il campo seguente alla TodoList classe :
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

Sostituire il metodo OnAppearing con il codice seguente:

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

Questo codice assicura che i dati vengano aggiornati solo dal servizio dopo l'autenticazione.

Aggiungere il gestore seguente per l'evento Clicked alla classe TodoList :

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

Salva le modifiche e ricompila il progetto Libreria di Classi Portabile verificando che non ci siano errori.

Aggiungere l'autenticazione all'app Android

Questa sezione illustra come implementare l'interfaccia IAuthenticate nel progetto di app Android. Ignorare questa sezione se non si supportano i dispositivi Android.

In Visual Studio o Xamarin Studio fare clic con il pulsante destro del mouse sul progetto droide , quindi imposta come progetto di avvio.
Premere F5 per avviare il progetto nel debugger, quindi verificare che venga generata un'eccezione non gestita con un codice di stato 401 (Non autorizzato) dopo l'avvio dell'app. Il codice 401 viene generato perché l'accesso nel back-end è limitato solo agli utenti autorizzati.

Aprire MainActivity.cs nel progetto Android e aggiungere le istruzioni seguenti using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Aggiornare la classe MainActivity per implementare l'interfaccia IAuthenticate , come indicato di seguito:

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

Aggiornare la classe MainActivity aggiungendo un campo MobileServiceUser e un metodo Authenticate , richiesto dall'interfaccia IAuthenticate , come indicato di seguito:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Se si usa un provider di identità diverso da Facebook, scegliere un valore diverso per MobileServiceAuthenticationProvider.

Aggiornare il fileAndroidManifest.xml aggiungendo il codice XML seguente all'interno dell'elemento <application> :

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

Sostituire {url_scheme_of_your_app} con lo schema URL.

Aggiungere il codice seguente al metodo OnCreate della classe MainActivity prima della chiamata a LoadApplication():
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
Questo codice garantisce che l'autenticatore venga inizializzato prima del caricamento dell'app.
Ricompilare l'app, eseguirla, quindi accedere con il provider di autenticazione scelto e verificare di poter accedere ai dati come utente autenticato.

Risoluzione dei problemi

L'applicazione si è arrestata in modo anomalo con Java.Lang.NoSuchMethodError: No static method startActivity

In alcuni casi, i conflitti nei pacchetti di supporto sono visualizzati solo come avviso in Visual Studio, tuttavia, l'applicazione si arresta in modo anomalo con questa eccezione durante l'esecuzione. In questo caso è necessario assicurarsi che tutti i pacchetti di supporto a cui si fa riferimento nel progetto abbiano la stessa versione. Il pacchetto NuGet di App per dispositivi mobili di Azure ha Xamarin.Android.Support.CustomTabs dipendenza per la piattaforma Android, quindi se il progetto usa pacchetti di supporto più recenti è necessario installare questo pacchetto con la versione necessaria direttamente per evitare conflitti.

Aggiungere l'autenticazione all'app iOS

Questa sezione illustra come implementare l'interfaccia IAuthenticate nel progetto di app iOS. Ignorare questa sezione se non si supportano i dispositivi iOS.

In Visual Studio o Xamarin Studio fare clic con il pulsante destro del mouse sul progetto iOS , quindi scegliere Imposta come progetto di avvio.
Premere F5 per avviare il progetto nel debugger, quindi verificare che venga generata un'eccezione non gestita con un codice di stato 401 (Non autorizzato) dopo l'avvio dell'app. La risposta 401 viene generata perché l'accesso nel back-end è limitato solo agli utenti autorizzati.

Aprire AppDelegate.cs nel progetto iOS e aggiungere le istruzioni seguenti using :

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

Aggiornare la classe AppDelegate per implementare l'interfaccia IAuthenticate , come indicato di seguito:

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

Aggiornare la classe AppDelegate aggiungendo un campo MobileServiceUser e un metodo Authenticate , richiesto dall'interfaccia IAuthenticate , come indicato di seguito:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Se si usa un provider di identità diverso da Facebook, scegliere un valore diverso per [MobileServiceAuthenticationProvider].

Aggiornare la classe AppDelegate aggiungendo l'overload del metodo OpenUrl , come indicato di seguito:

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

Aggiungere la riga di codice seguente al metodo FinishedLaunching prima della chiamata a LoadApplication():
```
 ```csharp
 App.Init(this);
 ```
```
Questo codice garantisce che l'autenticatore venga inizializzato prima del caricamento dell'app.
Aprire Info.plist e aggiungere un tipo di URL. Impostare l'identificatore su un nome scelto, gli schemi URL sullo schema URL per l'app e il ruolo su Nessuno.
Ricompilare l'app, eseguirla, quindi accedere con il provider di autenticazione scelto e verificare di poter accedere ai dati come utente autenticato.

Aggiungere l'autenticazione ai progetti di app Windows 10 (incluso Phone)

Questa sezione illustra come implementare l'interfaccia IAuthenticate nei progetti di app di Windows 10. Gli stessi passaggi si applicano per i progetti UWP (Universal Windows Platform), ma usando il progetto UWP (con le modifiche annotate). Ignorare questa sezione se non si supportano i dispositivi Windows.

In Visual Studio fare clic con il pulsante destro del mouse sul progetto UWP , quindi imposta come progetto di avvio.
Premere F5 per avviare il progetto nel debugger, quindi verificare che venga generata un'eccezione non gestita con un codice di stato 401 (Non autorizzato) dopo l'avvio dell'app. La risposta 401 si verifica perché l'accesso nel back-end è limitato solo agli utenti autorizzati.
Aprire MainPage.xaml.cs per il progetto di app di Windows e aggiungere le istruzioni seguenti using :
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
Sostituire <your_Portable_Class_Library_namespace> con lo spazio dei nomi della libreria di classi portabile.
Aggiornare la classe MainPage per implementare l'interfaccia IAuthenticate , come indicato di seguito:
```
 public sealed partial class MainPage : IAuthenticate
```

Aggiornare la classe MainPage aggiungendo un campo MobileServiceUser e un metodo Authenticate , richiesto dall'interfaccia IAuthenticate , come indicato di seguito:

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```