Aggiungere l'autenticazione all'app Apache Cordova

Articolo
06/25/2019

Riepilogo

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 creazione di un'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.

Configurare il provider di identità preferito seguendo le istruzioni specifiche del provider:
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 di 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 ControllersTodoItemController.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

Aprire il progetto in Visual Studio, quindi aprire il file www/index.html per la modifica.

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.

Aprire il www/js/index.js file per la modifica, individuare il onDeviceReady() metodo 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().
Nel codice aggiunto, sostituire SDK_Provider_Name con il nome del provider di accesso. Ad esempio, per Azure Active Directory usare client.login('aad').
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

Per altre informazioni, vedere Autenticazione e autorizzazione con il servizio app di Azure.
Continuare l'esercitazione aggiungendo Notifiche Push all'app Apache Cordova.

Informazioni su come usare gli SDK.