Hinzufügen von Authentifizierung zu Ihrer Apache Cordova-App

Artikel
11/08/2023

In diesem Lernprogramm fügen Sie microsoft-Authentifizierung zum Schnellstartprojekt mithilfe der Microsoft Entra-ID hinzu. Stellen Sie vor Abschluss dieses Tutorials sicher, dass Sie das Projekt erstellt und die Offlinesynchronisierung aktiviert haben.

Konfigurieren Ihres Back-Ends für die Authentifizierung

Zum Konfigurieren Ihres Back-Ends für die Authentifizierung müssen Sie Folgendes ausführen:

Erstellen Sie eine -App-Registrierung.
Konfigurieren von Authentifizierung und Autorisierung in Azure App Service.
Fügen Sie Ihre App zu den zulässigen externen Umleitungs-URLs hinzu.

In diesem Tutorial konfigurieren wir Ihre App für die Verwendung der Microsoft-Authentifizierung. Ein Microsoft Entra-Mandant wurde in Ihrem Azure-Abonnement automatisch konfiguriert. Sie können microsoft Entra-ID verwenden, um die Microsoft-Authentifizierung zu konfigurieren.

Sie benötigen die Back-End-URL des Azure Mobile Apps-Diensts, der beim Bereitstellen des Diensts bereitgestellt wurde.

Erstellen einer App-Registrierung

Melden Sie sich beim Azure-Portal an.
Wählen Sie die Microsoft Entra-ID> App-Registrierungen> Neue Registrierung aus.
Geben Sie auf der Seite Anwendung registrieren den Namen zumoquickstart in das Feld Name ein.
Wählen Sie unter unterstützten Kontotypen Konten in einem beliebigen Organisationsverzeichnis (beliebiges Microsoft Entra-Verzeichnis – Multitenant) und persönliche Microsoft-Konten (z. B. Skype, Xbox) aus.
Wählen Sie unter Umleitungs-URIs die Option Web aus, und geben Sie <backend-url>/.auth/login/aad/callback ein. Wenn Ihre Back-End-URL beispielsweise https://zumo-abcd1234.azurewebsites.net lautet, geben Sie https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback ein.
Klicken Sie unten im Formular auf die Schaltfläche Registrieren.
Kopieren Sie die Anwendungs- (Client-)ID.
Wählen Sie im linken Bereich Zertifikate und Geheimnisse>Neuer Client aus.
Geben Sie eine geeignete Beschreibung ein, wählen Sie eine Gültigkeitsdauer aus, und wählen Sie dann Hinzufügen aus.
Kopieren Sie das Geheimnis von der Seite Zertifikate und Geheimnisse. Der Wert wird nicht mehr angezeigt.
Wählen Sie Authentifizierung aus.
Aktivieren Sie unter impliziten Gewährungs- und Hybridflüssen ID-Token.
Klicken Sie oben auf der Seite auf Speichern.

Wichtig

Der geheime Clientschlüssel (Kennwort) ist eine wichtige Anmeldeinformation. Teilen Sie das Kennwort keiner anderen Person mit, und geben Sie es nicht in einer Clientanwendung weiter.

Konfigurieren von Authentifizierung und Autorisierung in Azure App Service

Wählen Sie im Azure-Portal zuerst Alle Ressourcen und dann Ihren App Service aus.
Wählen Sie Einstellungen>Authentifizierung aus.
Drücken Sie "Identitätsanbieter hinzufügen".
Wählen Sie Microsoft als Identitätsanbieter aus.
- Wählen Sie für den App-Registrierungstyp die Details einer vorhandenen App-Registrierung aus.
- Fügen Sie die Werte, die Sie zuvor kopiert haben, in die Felder Anwendungs-ID (Client- und geheimer Clientschlüssel ) ein.
- Geben Sie https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0für die Aussteller-URL ein. Diese URL ist die „magische Mandanten-URL“ für Microsoft-Anmeldungen.
- Wählen Sie unter Zugriff einschränken die Option Authentifizierung erforderlich aus.
- Wählen Sie für nicht authentifizierte Anforderung "HTTP 401 Nicht autorisiert" aus.
Klicken Sie auf Hinzufügen.
Sobald der Authentifizierungsbildschirm zurückgegeben wird, drücken Sie "Bearbeiten" neben den Authentifizierungseinstellungen.
Geben Sie zumoquickstart://easyauth.callbackim Feld zulässige externe Umleitungs-URLs ein.
Klicken Sie auf Speichern.

Schritt 10 erfordert, dass alle Benutzer authentifiziert werden, bevor sie auf Ihr Back-End zugreifen. Sie können fein differenzierte Kontrollen bereitstellen, indem Sie Ihrem Back-End Code hinzufügen.

WUSSTEN SIE SCHON? Sie können Benutzern mit Organisationskonten auch die Microsoft Entra-ID, Facebook, Google, Twitter oder eine beliebige OpenID-Verbinden kompatiblen Anbieter erlauben. Befolgen Sie die Anweisungen in der Azure App Service-Dokumentation.

Testen, ob die Authentifizierung angefordert wird

Ausführen der App mit cordova run android
Stellen Sie sicher, dass ein Ausnahmefehler mit dem Statuscode 401 (Nicht autorisiert) angezeigt wird, nachdem die App gestartet wurde.

Hinzufügen von Authentifizierung zur App

Um Authentifizierung über den integrierten Anbieter hinzuzufügen, müssen Sie Folgendes ausführen:

Fügen Sie den Authentifizierungsanbieter der Liste der als legitim bekannten Quellen hinzu.
Rufen Sie den Authentifizierungsanbieter auf, bevor Sie auf Daten zugreifen.

Aktualisieren der Inhaltssicherheitsrichtlinie

Jede Apache Cordova-App deklariert ihre bekannten legitimen Quellen über einen Content-Security-Policy-Header. Jeder unterstützte Anbieter verfügt über einen OAuth-Host, der hinzugefügt werden muss:

Anbieter	Name des SDK-Anbieters	OAuth-Host
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`

Bearbeiten ; www/index.htmlFügen Sie den OAuth-Host für Die Microsoft Entra-ID wie folgt hinzu:

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

Der Inhalt ist aus Gründen der Lesbarkeit auf mehrere Zeilen verteilt. Platzieren Sie den gesamten Code in derselben Zeile.

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

Sie haben bereits ZUMOAPPNAME durch den Namen Ihrer App ersetzt.

Aufrufen des Authentifizierungsanbieters

Bearbeiten Sie www/js/index.js. Ersetzen Sie die setup()-Methode durch folgenden 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
    });
}

Testen der App

Führen Sie den folgenden Befehl aus:

cordova run android

Sobald der erste Start abgeschlossen ist, werden Sie aufgefordert, sich mit Ihren Microsoft-Anmeldeinformationen anzumelden. Nach Abschluss des Vorgangs können Sie Elemente aus der Liste hinzufügen und löschen.

Tipp

Wenn der Emulator nicht automatisch gestartet wird, öffnen Sie Android Studio, und wählen Sie dann Konfigurieren>AVD-Manager aus. Dadurch können Sie das Gerät manuell starten. Wenn Sie adb devices -l ausführen, sollte Ihr ausgewähltes emuliertes Gerät angezeigt werden.

Löschen der Ressourcen

Nachdem Sie das Schnellstarttutorial abgeschlossen haben, können Sie die Ressourcen mit az group delete -n zumo-quickstart löschen. Außerdem können Sie die globale App-Registrierung löschen, die für die Authentifizierung über das Portal verwendet wird.

Nächste Schritte

Sehen Sie sich die VORGEHENSWEISE-Abschnitte an:

Sie können auch eine Schnellstartanleitung für eine andere Plattform mit demselben Dienst absolvieren: