Verificatie toevoegen aan uw Apache Cordova-app

Artikel
05/05/2021

Notitie

Dit product is buiten gebruik gesteld. Zie de Community Toolkit Datasync-bibliotheekvoor een vervanging voor projecten met .NET 8 of hoger.

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.
Azure App Service-verificatie en -autorisatie configureren.
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

Meld u aan bij de Azure Portal.
Selecteer Microsoft Entra ID>App-registraties>Nieuwe registratie.
Voer op de pagina Een toepassing registrerenzumoquickstart in het veld Naam in.
Selecteer onder Ondersteunde accounttypenAccounts in elke organisatiedirectory (Elke Microsoft Entra-directory - multitenant) en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox).
Selecteer in omleidings-URIWeb en typ <backend-url>/.auth/login/aad/callback. Als uw back-end-URL bijvoorbeeld is https://zumo-abcd1234.azurewebsites.net, voert u https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callbackin.
Druk op de knop registreren onderaan het formulier.
Kopieer de id van de toepassing (client).
Selecteer in het linkerdeelvenster Certificaten & geheimen>Nieuw clientgeheim.
Voer een geschikte beschrijving in, selecteer een geldigheidsduur en selecteer vervolgens Toevoegen.
Kopieer het geheim op de pagina Certificaten & geheimen. De waarde wordt niet opnieuw weergegeven.
Selecteer verificatie-.
Schakel onder impliciete toekenning en hybride stromenid-tokens in.
Druk boven aan de pagina op Opslaan.

Belangrijk

De waarde van het clientgeheim (wachtwoord) is een belangrijke beveiligingsreferentie. Deel het wachtwoord niet met iemand of distribueer het in een clienttoepassing.

Azure App Service-verificatie en -autorisatie configureren

Selecteer in de Azure Portal Alle resourcesen vervolgens uw App Service.
Selecteer Settings>Authentication.
Druk op id-provider toevoegen.
Selecteer Microsoft als id-provider.
- Voor app-registratietypeselecteert u Geef de details op van een bestaande app-registratie.
- Plak de waarden die u eerder hebt gekopieerd in de Application-id (client)-id en clientgeheim vakken.
- Voer https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0in voor URL-URL van verlener. Deze URL is de 'magic tenant-URL' voor Microsoft-aanmeldingen.
- Selecteer Verificatie vereisenvoor Toegang beperken.
- Voor niet-geverifieerde aanvraagselecteert u HTTP 401 Niet-geautoriseerde.
Druk op Toevoegen.
Zodra het verificatiescherm wordt geretourneerd, drukt u op Bewerken naast de verificatie-instellingen.
Voer in het vak Toegestane externe omleidings-URL'szumoquickstart://easyauth.callbackin.
Druk 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 Connect-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:

Aanbieder	NAAM VAN SDK-provider	OAuth-host
Microsoft Entra-id	Microsoft Entra-id	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Sjilpen	sjilpen	`https://api.twitter.com`

www/index.htmlbewerken; 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 hebt ZUMOAPPNAME al vervangen door de naam van uw app.

De verificatieprovider aanroepen

www/js/index.jsbewerken. 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.

Fooi

Als de emulator niet automatisch wordt gestart, opent u Android Studio en selecteert u >AVD Manager-configureren. Hierdoor kunt u het apparaat handmatig starten. Als u adb devices -luitvoert, ziet u het geselecteerde geëmuleerde apparaat.

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:

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

Delen via