Lägga till autentisering i Apache Cordova-appen

I den här självstudien lägger du till Microsoft-autentisering i snabbstartsprojektet med hjälp av Microsoft Entra-ID. Innan du slutför den här självstudien kontrollerar du att du har skapat projektet och aktiverat offlinesynkronisering.

Konfigurera serverdelen för autentisering

För att konfigurera serverdelen för autentisering måste du:

  • Skapa en appregistrering.
  • Konfigurera autentisering och auktorisering för Azure App Service.
  • Lägg till din app i URL:erna för tillåten extern omdirigering.

Under den här självstudien konfigurerar vi appen så att den använder Microsoft-autentisering. En Microsoft Entra-klientorganisation har konfigurerats automatiskt i din Azure-prenumeration. Du kan använda Microsoft Entra-ID för att konfigurera Microsoft-autentisering.

Du behöver serverdels-URL:en för Azure Mobile Apps-tjänsten som tillhandahölls när du etablerade tjänsten.

Skapa en appregistrering

  1. Logga in på Azure-portalen.
  2. Välj Microsoft Entra ID> Appregistreringar> Ny registrering.
  3. På sidan Registrera ett program anger du zumoquickstart i fältet Namn .
  4. Under Kontotyper som stöds väljer du Konton i valfri organisationskatalog (Alla Microsoft Entra-kataloger – flera klientorganisationer) och personliga Microsoft-konton (t.ex. Skype, Xbox).
  5. I Omdirigerings-URI väljer du Webb och skriver <backend-url>/.auth/login/aad/callback. Om din serverdels-URL till exempel är https://zumo-abcd1234.azurewebsites.netanger https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callbackdu .
  6. Tryck på knappen Registrera längst ned i formuläret.
  7. Kopiera App-ID (klient) .
  8. I den vänstra rutan väljer du Certifikat och hemligheter>Ny klienthemlighet.
  9. Ange en lämplig beskrivning, välj en giltighetstid och välj sedan Lägg till.
  10. Kopiera hemligheten på sidan Certifikat och hemligheter . Värdet visas inte igen.
  11. Välj Autentisering.
  12. Under Implicit beviljande och hybridflöden aktiverar du ID-token.
  13. Tryck på Spara överst på sidan.

Viktigt!

Värdet för klienthemlighet (lösenord) är en viktig säkerhetsautentiseringsuppgift. Dela inte lösenordet med någon eller distribuera det i ett klientprogram.

Konfigurera autentisering och auktorisering för Azure App Service

  1. I Azure-portalen väljer du Alla resurser och sedan Din App Service.

  2. Välj Inställningar> Authentication.

  3. Tryck på Lägg till identitetsprovider.

  4. Välj Microsoft som identitetsprovider.

    • För Appregistreringstyp väljer du Ange information om en befintlig appregistrering.
    • Klistra in de värden som du kopierade tidigare i rutorna Program -ID (klient) och Klienthemlighet .
    • För Utfärdar-URL anger du https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Den här URL:en är den "magiska klient-URL:en" för Microsoft-inloggningar.
    • För Begränsa åtkomst väljer du Kräv autentisering.
    • För Oautentiserad begäran väljer du HTTP 401 Obehörig.
  5. Tryck på Lägg till.

  6. När autentiseringsskärmen har returnerats trycker du på Redigera bredvid Autentiseringsinställningar.

  7. I rutan Tillåtna externa omdirigerings-URL:er anger du zumoquickstart://easyauth.callback.

  8. Tryck på Spara.

Steg 10 kräver att alla användare autentiseras innan de kommer åt serverdelen. Du kan ange detaljerade kontroller genom att lägga till kod i serverdelen.

VISSTE DU DET? Du kan också tillåta användare med organisationskonton i Microsoft Entra-ID, Facebook, Google, Twitter eller någon OpenID-Anslut kompatibel leverantör. Följ anvisningarna i Azure App Service-dokumentationen.

Testa att autentisering begärs

  • Kör appen med hjälp av cordova run android
  • Kontrollera att ett ohanterat undantag med statuskoden 401 (obehörig) har aktiverats när appen startas.

Lägga till autentisering i appen

Om du vill lägga till autentisering via den inbyggda providern måste du:

  • Lägg till autentiseringsprovidern i listan över kända bra källor.
  • Anropa autentiseringsprovidern innan du kommer åt data.

Uppdatera innehållssäkerhetsprincipen

Varje Apache Cordova-app deklarerar sina kända goda källor via en Content-Security-Policy rubrik. Varje leverantör som stöds har en OAuth-värd som måste läggas till:

Provider SDK-providernamn OAuth-värd
Microsoft Entra-ID Microsoft Entra-ID https://login.microsoftonline.com
Facebook Facebook https://www.facebook.com
Google Google https://accounts.google.com
Twitter twitter https://api.twitter.com

Redigera www/index.html; lägg till OAuth-värden för Microsoft Entra-ID enligt följande:

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

Innehållet är flera rader för läsbarhet. Placera all kod på samma rad.

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

Du har redan ersatt ZUMOAPPNAME med namnet på din app.

Anropa autentiseringsprovidern

Redigera www/js/index.js. Ersätt metoden setup() med följande kod:

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

Testa appen

Kör följande kommando:

cordova run android

När den första starten är klar uppmanas du att logga in med dina Microsoft-autentiseringsuppgifter. När du är klar kan du lägga till och ta bort objekt från listan.

Dricks

Om emulatorn inte startas automatiskt öppnar du Android Studio och väljer sedan Konfigurera>AVD Manager. På så sätt kan du starta enheten manuellt. Om du kör adb devices -lbör du se den valda emulerade enheten.

Ta bort resurserna

Nu när du har slutfört snabbstartsguiden kan du ta bort resurserna med az group delete -n zumo-quickstart. Du kan också ta bort den globala appregistrering som används för autentisering via portalen.

Nästa steg

Ta en titt på avsnitten HOW TO :

Du kan också göra en snabbstart för en annan plattform med samma tjänst: