Aggiungere l'autenticazione all'app Apache CordovaAdd authentication to your Apache Cordova app

SummarySummary

Questa esercitazione consente di aggiungere l'autenticazione al progetto introduttivo TodoList in Apache Cordova tramite un provider di identità supportato.In this tutorial, you add authentication to the todolist quickstart project on Apache Cordova using a supported identity provider. Questa esercitazione è basata sull'esercitazione relativa alla Introduzione alle app per dispositivi mobili , che deve essere completata per prima.This tutorial is based on the [Get started with Mobile Apps] tutorial, which you must complete first.

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.

Guardare un video che illustra una procedura simileWatch a video showing similar steps

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. In Visual Studio:In Visual Studio:

  • Aprire il progetto creato dopo avere completato l'esercitazione Introduzione alle app per dispositivi mobili.Open the project that you created when you completed the tutorial [Get started with Mobile Apps].
  • Eseguire l'applicazione nell'emulatore Android di Google.Run your application in the Google Android Emulator.
  • Verificare che dopo l'avvio dell'applicazione venga visualizzato un errore di connessione imprevisto.Verify that an Unexpected Connection Failure is shown after the app starts.

A questo punto, aggiornare l'app per autenticare gli utenti prima di richiedere risorse al back-end dell'app per dispositivi mobili.Next, update the app to authenticate users before requesting resources from the Mobile App backend.

Aggiungere l'autenticazione all'appAdd authentication to the app

  1. Aprire il progetto in Visual Studio, quindi aprire il file www/index.html per la modifica.Open your project in Visual Studio, then open the www/index.html file for editing.
  2. Individuare il meta tag Content-Security-Policy nella sezione di intestazione.Locate the Content-Security-Policy meta tag in the head section. Aggiungere l'host di OAuth all'elenco di origini consentite.Add the OAuth host to the list of allowed sources.

    ProviderProvider Nome del provider SDKSDK Provider Name Host OAuthOAuth Host
    Azure Active DirectoryAzure Active Directory aadaad https://login.microsoftonline.comhttps://login.microsoftonline.com
    FacebookFacebook Facebookfacebook https://www.facebook.comhttps://www.facebook.com
    GoogleGoogle Googlegoogle https://accounts.google.comhttps://accounts.google.com
    MicrosoftMicrosoft microsoftaccountmicrosoftaccount https://login.live.comhttps://login.live.com
    TwitterTwitter Twittertwitter https://api.twitter.comhttps://api.twitter.com

    Ecco un esempio di Content-Security-Policy implementato per Azure Active Directory:An example Content-Security-Policy (implemented for Azure Active Directory) is as follows:

     <meta http-equiv="Content-Security-Policy" content="default-src 'self'
         data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">
    

    Sostituire https://login.microsoftonline.com con l'host di OAuth indicato nella tabella precedente.Replace https://login.microsoftonline.com with the OAuth host from the preceding table. Per altre informazioni sul metatag content-security-policy, vedere la documentazione su Content-Security-Policy.For more information about the content-security-policy meta tag, see the [Content-Security-Policy documentation].

    Alcuni provider di autenticazione non richiedono modifiche a Content-Security-Policy quando viene usato in dispositivi mobili appropriati.Some authentication providers do not require Content-Security-Policy changes when used on appropriate mobile devices. Ad esempio, non sono richieste modifiche a Content-Security-Policy quando si usa l'autenticazione di Google in un dispositivo Android.For example, no Content-Security-Policy changes are required when using Google authentication on an Android device.

  3. Aprire il file www/js/index.js per la modifica, individuare il metodo onDeviceReady() e nel codice di creazione del client aggiungere il codice seguente:Open the www/js/index.js file for editing, locate the onDeviceReady() method, and under the client creation code add the following code:

     // Login to the service
     client.login('SDK_Provider_Name')
         .then(function () {
    
             // BEGINNING OF ORIGINAL CODE
    
             // Create a table reference
             todoItemTable = client.getTable('todoitem');
    
             // Refresh the todoItems
             refreshDisplay();
    
             // Wire up the UI Event Handler for the Add Item
             $('#add-item').submit(addItemHandler);
             $('#refresh').on('click', refreshDisplay);
    
             // END OF ORIGINAL CODE
    
         }, handleError);
    

    Questo codice sostituisce il codice esistente che crea il riferimento alla tabella e aggiorna l'interfaccia utente.This code replaces the existing code that creates the table reference and refreshes the UI.

    Il metodo login() inizia l'autenticazione con il provider.The login() method starts authentication with the provider. Il metodo login() è una funzione asincrona che restituisce una promessa JavaScript.The login() method is an async function that returns a JavaScript Promise. Il resto dell'inizializzazione viene inserito nella risposta della promessa in modo che non venga eseguita finché non viene completato il metodo login().The rest of the initialization is placed inside the promise response so that it is not executed until the login() method completes.

  4. Nel codice aggiunto, sostituire SDK_Provider_Name con il nome del provider di accesso.In the code that you just added, replace SDK_Provider_Name with the name of your login provider. Ad esempio, per Azure Active Directory usare client.login('aad').For example, for Azure Active Directory, use client.login('aad').

  5. Eseguire il progetto.Run your project. Al termine dell'inizializzazione del progetto, nell'applicazione viene visualizzata la pagina di accesso di OAuth per il provider di autenticazione scelto.When the project has finished initializing, your application shows the OAuth login page for the chosen authentication provider.

Passaggi successiviNext Steps

  • Per altre informazioni, vedere Autenticazione e autorizzazione con il servizio app di Azure.Learn more [About Authentication] with Azure App Service.
  • Continuare l'esercitazione aggiungendo Notifiche Push all'app Apache Cordova.Continue the tutorial by adding [Push Notifications] to your Apache Cordova app.

Informazioni su come usare gli SDK.Learn how to use the SDKs.