Lägga till autentisering i Apache Cordova-appen

Artikel
05/05/2021

Not

Den här produkten har dragits tillbaka. En ersättning för projekt som använder .NET 8 eller senare finns i Community Toolkit Datasync-biblioteket.

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

Logga in på Azure-portalen.
Välj Microsoft Entra ID>>
På sidan Registrera ett program anger du zumoquickstart i fältet Namn.
Under Kontotyper som stödsväljer du Konton i valfri organisationskatalog (Alla Microsoft Entra-kataloger – flera klienter) och personliga Microsoft-konton (t.ex. Skype, Xbox).
I Omdirigerings-URIväljer du Web och skriver <backend-url>/.auth/login/aad/callback. Om din serverdels-URL till exempel är https://zumo-abcd1234.azurewebsites.netanger du https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Tryck på knappen Registrera längst ned i formuläret.
Kopiera App-ID (klient) .
I den vänstra rutan väljer du Certifikat och hemligheter>Ny klienthemlighet.
Ange en lämplig beskrivning, välj en varaktighet för giltighet och välj sedan Lägg till.
Kopiera hemligheten på sidan certifikat & hemligheter. Värdet visas inte igen.
Välj Autentisering.
Under Implicit beviljande och hybridflödenaktiverar du ID-token.
Tryck på Spara överst på sidan.

Viktig

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

I Azure-portalenväljer du Alla resurseroch sedan Din App Service.
Välj Inställningar>Autentisering.
Tryck på Lägg till identitetsprovider.
Välj Microsoft som identitetsprovider.
- För Appregistreringstypväljer du Ange information om en befintlig appregistrering.
- Klistra in de värden som du kopierade tidigare i rutorna Application (klient) och Klienthemlighet.
- Ange https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0för url för utfärdare. 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äranväljer du HTTP 401 Obehörig.
Tryck på Lägg till.
När autentiseringsskärmen har returnerats trycker du på Redigera bredvid Autentiseringsinställningar.
I rutan Tillåtna externa omdirigerings-URL:er anger du zumoquickstart://easyauth.callback.
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 Connect-kompatibel leverantör. Följ anvisningarna i Azure App Service-dokumentationen.

Testa att autentisering begärs

Kör appen med 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:

Familjeförsörjare	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`
Kvitter	kvitter	`https://api.twitter.com`

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

<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:

Dela via