Aggiungere l'autenticazione all'app Apache Cordova

Summary

Questa esercitazione consente di aggiungere l'autenticazione al progetto introduttivo TodoList in Apache Cordova tramite un provider di identità supportato. Questa esercitazione è basata sull'esercitazione relativa alla Introduzione alle app per dispositivi mobili , che deve essere completata per prima.

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

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.

  1. Configurare il provider di identità preferito seguendo le istruzioni specifiche del provider:

  2. Ripetere i passaggi precedenti per ogni provider di cui si desidera il supporto nell'app.

Guardare un video che illustra una procedura simile

Limitare le autorizzazioni agli utenti autenticati

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

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

    Nelle impostazioni dell'app per dispositivi mobili fare clic su Tabelle semplici e selezionare la tabella. Fare clic su Modifica autorizzazioni, selezionare Authenticated access only (Solo accesso con autenticazione) per tutte le autorizzazioni e quindi fare clic su Salva.

  • Back-end. NET (C#):

    Nel progetto server passare a Controller > TodoItemController.cs. Aggiungere l'attributo [Authorize] alla classe TodoItemController, come indicato di seguito. Per limitare l'accesso solo a metodi specifici, è inoltre possibile applicare questo attributo solo a tali metodi anziché alla classe. Pubblicare di nuovo il progetto server.

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

    Per richiedere l'autenticazione per l'accesso alla tabella, 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 del back-end Node.js tramite Git.

A questo punto, è possibile verificare che l'accesso anonimo al back-end è stato disabilitato. In Visual Studio:

  • Aprire il progetto creato dopo avere completato l'esercitazione Introduzione alle app per dispositivi mobili.
  • Eseguire l'applicazione nell'emulatore Android di Google.
  • Verificare che dopo l'avvio dell'applicazione venga visualizzato un errore di connessione imprevisto.

A questo punto, aggiornare l'app per autenticare gli utenti prima di richiedere risorse al back-end dell'app per dispositivi mobili.

Aggiungere l'autenticazione all'app

  1. Aprire il progetto in Visual Studio, quindi aprire il file www/index.html per la modifica.
  2. Individuare il meta tag Content-Security-Policy nella sezione di intestazione. Aggiungere l'host di OAuth all'elenco di origini consentite.

    Provider Nome del provider SDK Host OAuth
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook Facebook https://www.facebook.com
    Google Google https://accounts.google.com
    Microsoft microsoftaccount https://login.live.com
    Twitter Twitter https://api.twitter.com

    Ecco un esempio di Content-Security-Policy implementato per Azure Active Directory:

     <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. Per altre informazioni sul metatag content-security-policy, vedere la documentazione su Content-Security-Policy.

    Alcuni provider di autenticazione non richiedono modifiche a Content-Security-Policy quando viene usato in dispositivi mobili appropriati. Ad esempio, non sono richieste modifiche a Content-Security-Policy quando si usa l'autenticazione di Google in un dispositivo Android.

  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:

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

    Il metodo login() inizia l'autenticazione con il provider. Il metodo login() è una funzione asincrona che restituisce una promessa JavaScript. Il resto dell'inizializzazione viene inserito nella risposta della promessa in modo che non venga eseguita finché non viene completato il metodo login().

  4. Nel codice aggiunto, sostituire SDK_Provider_Name con il nome del provider di accesso. Ad esempio, per Azure Active Directory usare client.login('aad').

  5. Eseguire il progetto. Al termine dell'inizializzazione del progetto, nell'applicazione viene visualizzata la pagina di accesso di OAuth per il provider di autenticazione scelto.

Passaggi successivi

Informazioni su come usare gli SDK.