Verificatie toevoegen aan uw Apache Cordova-app

In deze zelfstudie voegt u Microsoft-verificatie toe aan het quickstartproject met behulp van Microsoft Entra ID. Voordat u deze zelfstudie voltooit, moet u ervoor zorgen dat u het project hebt gemaakt en offlinesynchronisatie hebt ingeschakeld.

Uw back-end configureren voor verificatie

Als u uw back-end wilt configureren voor verificatie, moet u het volgende doen:

• Maak een app-registratie.
• Configureer Azure-app serviceverificatie en -autorisatie.
• Voeg uw app toe aan de toegestane externe omleidings-URL's.

Tijdens deze zelfstudie configureren we uw app voor het gebruik van Microsoft-verificatie. Er is automatisch een Microsoft Entra-tenant geconfigureerd in uw Azure-abonnement. U kunt Microsoft Entra-id gebruiken om Microsoft-verificatie te configureren.

U hebt de back-end-URL van de Azure Mobile Apps-service nodig die is opgegeven toen u de service inrichtte.

Een app-registratie maken

1. Meld u aan bij de Azure-portal.
2. Selecteer Microsoft Entra ID> App-registraties> Nieuwe registratie.
3. Voer zumoquickstart op de pagina Een toepassing registreren het veld Naam in.
4. Selecteer onder Ondersteunde accounttypen accounts in elke organisatiedirectory (Elke Microsoft Entra-directory - multitenant) en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox).
5. In omleidings-URI selecteert u Web en typt <backend-url>/.auth/login/aad/callbacku . Als uw back-end-URL bijvoorbeeld is https://zumo-abcd1234.azurewebsites.net, voert u dit in https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
6. Druk op de knop Registreren onderaan het formulier.
7. Kopieer de client-id van de toepassing.
8. Selecteer in het linkerdeelvenster Certificaten en geheimen>Nieuw clientgeheim.
9. Voer een geschikte beschrijving in, selecteer een geldigheidsduur en selecteer vervolgens Toevoegen.
10. Kopieer het geheim op de pagina Certificaten en geheimen . De waarde wordt niet opnieuw weergegeven.
11. Selecteer Verificatie.
12. Schakel id-tokens in onder Impliciete toekenning en hybride stromen.
13. Druk boven aan de pagina op Opslaan .

Verificatie en autorisatie van Azure-app-service configureren

1. Selecteer alle resources in Azure Portal en vervolgens uw App Service.

2. Selecteer Instellingen> Verificatie.

3. Druk op Id-provider toevoegen.

4. Selecteer Microsoft als id-provider.

   • Selecteer voor app-registratietype de optie Geef de details van een bestaande app-registratie op.
   • Plak de waarden die u eerder hebt gekopieerd in de vakken Toepassings-id (client) en Clientgeheim .
   • Voer voor de URL van de verlener het volgende in https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Deze URL is de 'magic tenant-URL' voor Microsoft-aanmeldingen.
   • Selecteer Verificatie vereisen als u de toegang wilt beperken.
   • Voor niet-geverifieerde aanvragen selecteert u HTTP 401 Niet geautoriseerd.

5. Klik op Toevoegen.

6. Zodra het verificatiescherm wordt geretourneerd, drukt u op Bewerken naast verificatie-instellingen.

7. Voer in het vak Toegestane externe omleidings-URL's de tekst in zumoquickstart://easyauth.callback.

8. Klik op Opslaan.

Stap 10 vereist dat alle gebruikers worden geverifieerd voordat ze toegang hebben tot uw back-end. U kunt verfijnde besturingselementen bieden door code toe te voegen aan uw back-end.

WIST JE DAT? U kunt gebruikers met organisatieaccounts ook toestaan in Microsoft Entra ID, Facebook, Google, Twitter of een openID-Verbinding maken compatibele provider. Volg de instructies in de documentatie van Azure-app Service.

Testen of verificatie wordt aangevraagd

• De app uitvoeren met cordova run android
• Controleer of er een niet-verwerkte uitzondering met de statuscode 401 (Niet geautoriseerd) wordt gegenereerd nadat de app is gestart.

Verificatie toevoegen aan de app

Als u verificatie wilt toevoegen via de ingebouwde provider, moet u het volgende doen:

• Voeg de verificatieprovider toe aan de lijst met bekende goede bronnen.
• Roep de verificatieprovider aan voordat u toegang hebt tot gegevens.

Het inhoudsbeveiligingsbeleid bijwerken

Elke Apache Cordova-app declareert hun bekende goede bronnen via een Content-Security-Policy header. Elke ondersteunde provider heeft een OAuth-host die moet worden toegevoegd:

Bewerken www/index.html; voeg de OAuth-host voor Microsoft Entra-id als volgt toe:

<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 *;">

De inhoud is meerdere regels voor leesbaarheid. Plaats alle code op dezelfde regel.

<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 *;">

U bent al vervangen ZUMOAPPNAME door de naam van uw app.

De verificatieprovider aanroepen

Bewerken www/js/index.js. Vervang de setup()-methode door de volgende code:

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
    });
}

De app testen

Voer de volgende opdracht uit:

cordova run android

Zodra het opstarten is voltooid, wordt u gevraagd u aan te melden met uw Microsoft-referenties. Als u klaar bent, kunt u items toevoegen aan en verwijderen uit de lijst.

De resources verwijderen

Nu u de quickstart-zelfstudie hebt voltooid, kunt u de resources verwijderen met az group delete -n zumo-quickstart. U kunt ook de globale app-registratie verwijderen die wordt gebruikt voor verificatie via de portal.

Volgende stappen

Bekijk de sectieS PROCEDURE:

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

U kunt ook snel aan de slag voor een ander platform met dezelfde service:

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