Aggiungere l'autenticazione all'app Apache Cordova

In questa esercitazione si aggiunge l'autenticazione Microsoft al progetto di avvio rapido usando Microsoft Entra ID. Prima di completare questa esercitazione, assicurarsi di aver creato il progetto e abilitato per la sincronizzazione offline.

Configurare il back-end per l'autenticazione

Per configurare il back-end per l'autenticazione, è necessario:

• Creare una registrazione dell'app.
• Configurare l'autenticazione e l'autorizzazione del servizio app di Azure.
• Aggiungere l'app agli URL di reindirizzamento esterni consentiti.

Durante questa esercitazione verrà configurata l'app per l'uso dell'autenticazione Microsoft. Un tenant di Microsoft Entra è stato configurato automaticamente nella sottoscrizione di Azure. È possibile usare Microsoft Entra ID per configurare l'autenticazione Microsoft.

È necessario l'URL back-end del servizio App per dispositivi mobili di Azure fornito al momento del provisioning del servizio.

Creare una registrazione dell'app

1. Accedere al portale di Azure .
2. Selezionare Microsoft Entra ID>Registrazioni app>Nuova registrazione.
3. Nella pagina Registra un'applicazione immettere zumoquickstart nel campo Nome.
4. In Tipi di account supportatiselezionare account in qualsiasi directory organizzativa (qualsiasi directory Microsoft Entra - multi-tenant) e account Microsoft personali (ad esempio Skype, Xbox).
5. In URI di reindirizzamentoselezionare Web e digitare <backend-url>/.auth/login/aad/callback. Ad esempio, se l'URL back-end è https://zumo-abcd1234.azurewebsites.net, immettere https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
6. Premere il pulsante registra nella parte inferiore del modulo.
7. Copiare l'ID applicazione (client) .
8. Nel riquadro sinistro selezionare Certificati & segreti>Nuovo segreto client.
9. Immettere una descrizione appropriata, selezionare una durata di validità, quindi selezionare Aggiungi.
10. Copiare il segreto nella pagina & certificati . Il valore non viene visualizzato di nuovo.
11. Selezionare Autenticazione.
12. In la concessione implicita e i flussi ibridiabilitare i token ID .
13. Premere Salva nella parte superiore della pagina.

Configurare l'autenticazione e l'autorizzazione del servizio app di Azure

1. Nel portale di Azure selezionare Tutte le risorsee quindi il servizio app.

2. Selezionare impostazioni >autenticazione.

3. Premere Aggiungi provider di identità.

4. Selezionare Microsoft come provider di identità.

   • Per Tipo di registrazione dell'appselezionare Specificare i dettagli di una registrazione dell'app esistente.
   • Incollare i valori copiati in precedenza nelle caselle ID applicazione (client) e segreto client.
   • Per URL autorità di certificazione, immettere https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Questo URL è l'"URL del tenant magic" per gli account di accesso Microsoft.
   • Per Limitare l'accesso, selezionare Richiedi autenticazione.
   • Per richiesta non autenticata, selezionare HTTP 401 Non autorizzato.

5. Premere Aggiungi.

6. Al termine della schermata di autenticazione, premere Modifica accanto a Impostazioni di autenticazione.

7. Nella casella URL di reindirizzamento esterni consentiti immettere zumoquickstart://easyauth.callback.

8. Premere Salva.

Il passaggio 10 richiede che tutti gli utenti siano autenticati prima di accedere al back-end. È possibile fornire controlli con granularità fine aggiungendo codice al back-end.

LO SAPEVI? È anche possibile consentire agli utenti con account aziendali in Microsoft Entra ID, Facebook, Google, Twitter o qualsiasi provider compatibile con OpenID Connect. Seguire le istruzioni nella documentazione del servizio app di Azure .

Verificare che venga richiesta l'autenticazione

• Eseguire l'app usando cordova run android
• Verificare che venga generata un'eccezione non gestita con un codice di stato 401 (Non autorizzato) dopo l'avvio dell'app.

Aggiungere l'autenticazione all'app

Per aggiungere l'autenticazione tramite il provider predefinito, è necessario:

• Aggiungere il provider di autenticazione all'elenco delle origini valide note.
• Chiamare il provider di autenticazione prima di accedere ai dati.

Aggiornare i criteri di sicurezza del contenuto

Ogni app Apache Cordova dichiara le origini valide note tramite un'intestazione Content-Security-Policy. Ogni provider supportato ha un host OAuth che deve essere aggiunto:

Modificare www/index.html; aggiungere l'host OAuth per Microsoft Entra ID come indicato di seguito:

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

Il contenuto è costituito da più righe per la leggibilità. Inserire tutto il codice nella stessa riga.

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

Hai già sostituito ZUMOAPPNAME con il nome dell'app.

Chiamare il provider di autenticazione

Modificare www/js/index.js. Sostituire il metodo setup() con il codice seguente:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Testare l'app

Eseguire il comando seguente:

cordova run android

Al termine dell'avvio iniziale, verrà richiesto di accedere con le credenziali Microsoft. Al termine, è possibile aggiungere ed eliminare elementi dall'elenco.

Eliminazione delle risorse

Dopo aver completato l'esercitazione introduttiva, è possibile eliminare le risorse con az group delete -n zumo-quickstart. È anche possibile eliminare la registrazione globale dell'app usata per l'autenticazione tramite il portale.

Passaggi successivi

Esaminare le sezioni PROCEDURA:

• Server (Node.js)
• Server (ASP.NET Framework)
• client Apache Cordova

È anche possibile eseguire una guida introduttiva per un'altra piattaforma usando lo stesso servizio:

• Windows (UWP)
• windows (WPF)
• Xamarin.Android
• Xamarin.Forms
• Xamarin.iOS