Aggiungere l'autenticazione all'app per Xamarin.iOSAdd authentication to your Xamarin.iOS app

Questo argomento descrive come autenticare gli utenti di un'app mobile del servizio app dall'applicazione client.This topic shows you how to authenticate users of an App Service Mobile App from your client application. In questa esercitazione verrà aggiunta l'autenticazione al progetto di guida introduttiva Xamarin.iOS tramite un provider di identità supportato dal servizio app.In this tutorial, you add authentication to the Xamarin.iOS quickstart project using an identity provider that is supported by App Service. In seguito all'autenticazione e all'autorizzazione da parte dell'app per dispositivi mobili, viene visualizzato il valore dell'ID utente e si sarà in grado di accedere ai dati della tabella con restrizioni.After being successfully authenticated and authorized by your Mobile App, the user ID value is displayed and you will be able to access restricted table data.

È necessario completare prima l'esercitazione Creare un'app per Xamarin iOS.You must first complete the tutorial [Create a Xamarin.iOS app]. Se non si usa il progetto server di avvio rapido scaricato, è necessario aggiungere il pacchetto di estensione di autenticazione al progetto.If you do not use the downloaded quick start server project, you must add the authentication extension package to your project. Per altre informazioni sui pacchetti di estensione server, vedere l'articolo relativo all' utilizzo dell'SDK del server back-end .NET per app per dispositivi mobili di Azure.For more information about server extension packages, see Work with the .NET backend server SDK for Azure Mobile Apps.

Registrare l'app per l'autenticazione e configurare i servizi appRegister your app for authentication and configure App Services

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

  4.  4. In Visual Studio o Xamarin Studio, eseguire il progetto client su un dispositivo o un emulatore.In Visual Studio or Xamarin Studio, run the client project on a device or emulator. Verificare che dopo l'avvio dell'app venga generata un'eccezione non gestita con codice di stato 401 (Non autorizzato).Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts. L'errore viene registrato nella console del debugger.The failure is logged to the console of the debugger. In Visual Studio l'errore dovrebbe quindi essere visualizzato nella finestra di output.So in Visual Studio, you should see the failure in the output window.

  Questo errore non autorizzato viene generato perché l'app prova ad accedere al back-end dell'app per dispositivi mobili come utente non autenticato.  This unauthorized failure happens because the app attempts to access your Mobile App backend as an unauthenticated user. La tabella TodoItem richiede ora l'autenticazione.The TodoItem table now requires authentication.

Si aggiornerà quindi l'app client per richiedere le risorse dal back-end dell'app per dispositivi mobili con un utente autenticato.Next, you will update the client app to request resources from the Mobile App backend with an authenticated user.

Aggiungere l'autenticazione all'appAdd authentication to the app

In questa sezione si procederà alla modifica dell'app in modo da visualizzare una schermata di accesso prima dei dati.In this section, you will modify the app to display a login screen before displaying data. All'avvio, l'app non si connetterà al servizio app e non sarà visualizzato alcun dato.When the app starts, it will not not connect to your App Service and will not display any data. Dopo la prima volta che l'utente esegue il movimento di aggiornamento verrà visualizzata la schermata di accesso. Dopo aver eseguito correttamente l'accesso, verrà visualizzato un elenco di elementi ToDo.After the first time that the user performs the refresh gesture, the login screen will appear; after successful login the list of todo items will be displayed.

  1. Nel progetto client aprire il file QSTodoService.cs e aggiungere quanto segue tramite l'istruzione MobileServiceUser con la funzione di accesso alla classe QSTodoService:In the client project, open the file QSTodoService.cs and add the following using statement and MobileServiceUser with accessor to the QSTodoService class:

     using UIKit;
    
     // Logged in user
     private MobileServiceUser user;
     public MobileServiceUser User { get { return user; } }
    
  2. Aggiungere un nuovo metodo denominato Authenticate a QSTodoService con la definizione seguente:Add new method named Authenticate to QSTodoService with the following definition:

     public async Task Authenticate(UIViewController view)
     {
         try
         {
             AppDelegate.ResumeWithURL = url => url.Scheme == "zumoe2etestapp" && client.ResumeWithURL(url);
             user = await client.LoginAsync(view, MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         }
         catch (Exception ex)
         {
             Console.Error.WriteLine (@"ERROR - AUTHENTICATION FAILED {0}", ex.Message);
         }
     }
    

    [AZURE.NOTE] Se si usa un provider di identità diverso da Google, sostituire il valore passato a LoginAsync riportato in precedenza con uno dei seguenti: MicrosoftAccount, Twitter, Google o WindowsAzureActiveDirectory.If you are using an identity provider other than a Facebook, change the value passed to LoginAsync above to one of the following: MicrosoftAccount, Twitter, Google, or WindowsAzureActiveDirectory.

  3. Aprire QSTodoListViewController.cs.Open QSTodoListViewController.cs. Modificare la definizione del metodo di ViewDidLoad rimuovendo la chiamata a RefreshAsync() verso la fine:Modify the method definition of ViewDidLoad removing the call to RefreshAsync() near the end:

     public override async void ViewDidLoad ()
     {
         base.ViewDidLoad ();
    
         todoService = QSTodoService.DefaultService;
         await todoService.InitializeStoreAsync();
    
         RefreshControl.ValueChanged += async (sender, e) => {
             await RefreshAsync();
         }
    
         // Comment out the call to RefreshAsync
         // await RefreshAsync();
     }
    
  4. Modificare il metodo RefreshAsync per autenticare e visualizzare una schermata di accesso se la proprietà User è Null.Modify the method RefreshAsync to authenticate if the User property is null. Aggiungere il codice seguente nella parte superiore della definizione del metodo:Add the following code at the top of the method definition:

     // start of RefreshAsync method
     if (todoService.User == null) {
         await QSTodoService.DefaultService.Authenticate(this);
         if (todoService.User == null) {
             Console.WriteLine("couldn't login!!");
             return;
         }
     }
     // rest of RefreshAsync method
    
  5. Aprire AppDelegate.cs e aggiungere il seguente metodo:Open AppDelegate.cs, add the following method:

     public static Func<NSUrl, bool> ResumeWithURL;
    
     public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
     {
         return ResumeWithURL != null && ResumeWithURL(url);
     }
    
  6. Aprire il file Info.plist e passare a Tipi di URL nella sezione Avanzate.Open Info.plist file, navigate to URL Types in the Advanced section. Configurare ora l'identificatore e gli schemi URL del tipo di URL e fare clic su Aggiungi tipo di URL.Now configure the Identifier and the URL Schemes of your URL Type and click Add URL Type. Gli schemi URL devono essere gli stessi del valore {url_scheme_of_your_app}.URL Schemes should be the same as your {url_scheme_of_your_app}.
  7. In Visual Studio o Xamarin Studio connesso all'host di compilazione Xamarin sul Mac eseguire il progetto client destinato a un dispositivo o un emulatore.In Visual Studio or Xamarin Studio connected to your Xamarin Build Host on your Mac, run the client project targeting a device or emulator. Verificare che nell'app non siano visualizzati dati.Verify that the app displays no data.

    Eseguire il movimento di aggiornamento spostando verso il basso l'elenco di elementi, in modo da visualizzare la schermata di accesso.Perform the refresh gesture by pulling down the list of items, which will cause the login screen to appear. Dopo aver correttamente immesso le credenziali valide, verrà visualizzato l'elenco di elementi ToDo e sarà possibile aggiornare i dati nell'app.Once you have successfully entered valid credentials, the app will display the list of todo items, and you can make updates to the data.