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
- Logga in på Azure-portalen.
- Välj Microsoft Entra ID> Appregistreringar> Ny registrering.
- På sidan Registrera ett program anger du
zumoquickstart
i fältet Namn . - 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).
- I Omdirigerings-URI väljer du Webb och skriver
<backend-url>/.auth/login/aad/callback
. Om din serverdels-URL till exempel ärhttps://zumo-abcd1234.azurewebsites.net
angerhttps://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback
du . - 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 giltighetstid och välj sedan Lägg till.
- Kopiera hemligheten på sidan Certifikat och hemligheter . Värdet visas inte igen.
- Välj Autentisering.
- Under Implicit beviljande och hybridflöden aktiverar du ID-token.
- 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
I Azure-portalen väljer du Alla resurser och sedan Din App Service.
Välj Inställningar> Authentication.
Tryck på Lägg till identitetsprovider.
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.
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-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 |
https://www.facebook.com |
||
https://accounts.google.com |
||
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 -l
bö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 :
- Server (Node.js)
- Server (ASP.NET Framework)
- Apache Cordova-klient
Du kan också göra en snabbstart för en annan plattform med samma tjänst:
Feedback
https://aka.ms/ContentUserFeedback.
Kommer snart: Under hela 2024 kommer vi att fasa ut GitHub-problem som feedbackmekanism för innehåll och ersätta det med ett nytt feedbacksystem. Mer information finns i:Skicka och visa feedback för