Authentifizieren von JavaScript-Apps bei Azure-Diensten während der lokalen Entwicklung mithilfe von Dienstprinzipalen
Wenn Sie Cloudanwendungen erstellen, müssen Entwickler Anwendungen auf ihrer lokalen Arbeitsstation debuggen und testen. Wenn eine Anwendung während der lokalen Entwicklung auf der Arbeitsstation eines Entwicklers ausgeführt wird, muss sie sich weiterhin bei allen von der App verwendeten Azure-Diensten authentifizieren. In diesem Artikel erfahren Sie, wie Sie dedizierte Anwendungsdienstprinzipalobjekte einrichten, die während der lokalen Entwicklung verwendet werden sollen.
Dedizierte Anwendungsdienstprinzipale für die lokale Entwicklung ermöglichen es Ihnen, das Prinzip der geringsten Rechte während der App-Entwicklung zu befolgen. Da Berechtigungen genau auf das festgelegt sind, was für die App während der Entwicklung benötigt wird, wird der App-Code daran gehindert, versehentlich auf eine Azure-Ressource zuzugreifen, die für die Verwendung durch eine andere App vorgesehen ist. Diese Methode verhindert auch, dass Fehler auftreten, wenn die App in die Produktion verschoben wird, da die App in der Entwicklungsumgebung überprivilegiert wurde.
Ein Anwendungsdienstprinzipal wird für die App eingerichtet, wenn die App in Azure registriert ist. Beim Registrieren von Apps für die lokale Entwicklung wird Folgendes empfohlen:
- Erstellen Sie separate App-Registrierungen für jeden Entwickler, der an der App arbeitet. Diese Methode erstellt separate Anwendungsdienstprinzipale für jeden Entwickler, die während der lokalen Entwicklung verwendet werden sollen, und vermeiden, dass Entwickler Anmeldeinformationen für einen einzelnen Anwendungsdienstprinzipal freigeben müssen.
- Erstellen Sie separate App-Registrierungen pro App. Dadurch werden die Berechtigungen der App nur auf das festgelegt, was von der App benötigt wird.
Während der lokalen Entwicklung werden Umgebungsvariablen mit der Identität des Anwendungsdienstprinzipals festgelegt. Das Azure SDK für JavaScript liest diese Umgebungsvariablen und verwendet diese Informationen, um die App bei den benötigten Azure-Ressourcen zu authentifizieren.
1 - Registrieren der Anwendung in Azure AD
Anwendungsdienstprinzipalobjekte werden mit einer App-Registrierung in Azure erstellt. Sie können Dienstprinzipale entweder mit dem Azure-Portal oder der Azure CLI erstellen.
Melden Sie sich beim Azure-Portal an, und führen Sie die folgenden Schritte aus.
| Anweisungen | Screenshot |
|---|---|
Im Azure-Portal:
|
|
| Wählen Sie auf der Seite „App-Registrierungen“ die Option + Neue Registrierung aus. | 
|
Füllen Sie auf der Seite Registrieren einer Anwendung das Formular wie folgt aus.
|
|
Auf der App-Registrierungsseite für Ihre App:
|
|
| Wählen Sie auf der Seite „Zertifikate und geheime Schlüssel“ + Neuer geheimer Clientschlüssel aus. | 
|
Das Dialogfeld Geheimer Clientschlüssel hinzufügen wird auf der rechten Seite der Seite angezeigt. In diesem Dialog:
|
|
| Auf der Seite Zertifikate und Geheimnisse wird der Wert des geheimen Clientschlüssels angezeigt. Kopieren Sie diesen Wert an einen temporären Speicherort in einem Texteditor, da Sie ihn in einem zukünftigen Schritt benötigen. WICHTIG: Dieser Wert wird nur dieses eine Mal angezeigt. Sobald Sie diese Seite verlassen oder aktualisieren, können Sie diesen Wert nicht mehr anzeigen. Sie können weitere Client-Secrets hinzufügen, ohne dieses Client-Secret ungültig zu machen, dieser Wert wird jedoch nicht mehr angezeigt. |
|
2 – Erstellen einer Microsoft Entra-Sicherheitsgruppe für die lokale Entwicklung
Da es in der Regel mehrere Entwickler gibt, die an einer Anwendung arbeiten, empfiehlt es sich, eine Microsoft Entra-Gruppe zu erstellen, um die Rollen (Berechtigungen) zu kapseln, die die App in der lokalen Entwicklung benötigt, anstatt die Rollen einzelnen Dienstprinzipalobjekten zuzuweisen. Dies bietet die folgenden Vorteile:
- Jedem Entwickler wird sichergestellt, dass dieselben Rollen zugewiesen werden, da Rollen auf Gruppenebene zugewiesen werden.
- Wenn eine neue Rolle für die App benötigt wird, muss sie nur der Microsoft Entra-Gruppe für die App hinzugefügt werden.
- Wenn ein neuer Entwickler dem Team beitritt, wird ein neuer Anwendungsdienstprinzipal für den Entwickler erstellt und der Gruppe hinzugefügt, um zu sorgen, dass der Entwickler über die richtigen Berechtigungen für die Arbeit an der App verfügt.
| Anweisungen | Screenshot |
|---|---|
| Navigieren Sie im Azure-Portal zur Microsoft Entra ID-Seite, indem Sie Microsoft Entra ID in das Suchfeld oben auf der Seite eingeben und dann unter „Dienste“ die Option Microsoft Entra ID auswählen. | 
|
| Wählen Sie auf der Seite Microsoft Entra ID im Menü auf der linken Seite die Option Gruppen aus. | 
|
| Wählen Sie auf der Seite Alle GruppenNeue Gruppeaus. | 
|
Auf der Seite Neue Gruppe :
|
|
Das Dialogfeld Mitglieder hinzufügen wird angezeigt.
|
|
| Wählen Sie auf der Seite Neue Gruppe die Option Erstellen aus, um die Gruppe zu erstellen. Die Gruppe wird erstellt, und Sie werden zur Seite Alle Gruppen zurückgeführt. Es kann bis zu 30 Sekunden dauern, bis die Gruppe angezeigt wird, und Sie müssen die Seite möglicherweise aktualisieren, da sie im Azure-Portal zwischengespeichert wird. |
|
3 : Zuweisen von Rollen zur Anwendung
Als Nächstes müssen Sie bestimmen, welche Rollen (Berechtigungen) Ihre App für welche Ressourcen benötigt, und diese Rollen Ihrer App zuweisen. In diesem Beispiel werden die Rollen der Microsoft Entra-Gruppe zugewiesen, die in Schritt 2 erstellt wurde. Rollen können in einem Ressourcen-, Ressourcengruppen- oder Abonnementbereich eine Rolle zugewiesen werden. In diesem Beispiel wird gezeigt, wie Sie Rollen auf der Ebene der Ressourcengruppe zuweisen, da die meisten Anwendungen alle ihre Azure-Ressourcen in einer einzigen Ressourcengruppe zusammenfassen.
| Anweisungen | Screenshot |
|---|---|
| Suchen Sie die Ressourcengruppe für Ihre Anwendung, indem Sie über das Suchfeld oben im Azure-Portal nach dem Namen der Ressourcengruppe suchen. Navigieren Sie zu Ihrer Ressourcengruppe, indem Sie den Namen der Ressourcengruppe unter der Überschrift Ressourcengruppen im Dialogfeld auswählen. |
|
| Wählen Sie auf der Seite für die Ressourcengruppe im linken Menü Die Option Zugriffssteuerung (IAM) aus. | 
|
Klicken Sie auf der Seite Zugriffssteuerungseinstellungen:
|
|
Auf der Seite Rollenzuweisung hinzufügen werden alle Rollen aufgelistet, die der Ressourcengruppe zugewiesen werden können.
|
|
Auf der nächsten Seite Rollenzuweisung hinzufügen können Sie angeben, welchem Benutzer die Rolle zugewiesen werden soll.
|
|
Im Dialogfeld Mitglieder auswählen :
|
|
| Die Microsoft Entra-Gruppe wird auf dem Bildschirm Rollenzuweisung hinzufügen als ausgewählt angezeigt. Wählen Sie Überprüfen und zuweisen aus, um zur letzten Seite zu gelangen, und wählen Sie erneut Überprüfen und zuweisen aus, um den Vorgang abzuschließen. |
|
4 – Einrichten von Umgebungsvariablen für die lokale Entwicklung
Das DefaultAzureCredential Objekt sucht zur Laufzeit nach den Dienstprinzipalinformationen in einer Gruppe von Umgebungsvariablen. Da die meisten Entwickler an mehreren Anwendungen arbeiten, empfiehlt es sich, ein Paket wie Dotenv für den Zugriff auf die Umgebung aus einer .env Datei zu verwenden, die während der Entwicklung im Verzeichnis der Anwendung gespeichert ist. Dadurch werden die Umgebungsvariablen für die Authentifizierung der Anwendung bei Azure so verwendet, dass sie nur von dieser Anwendung verwendet werden können.
Die Datei .env wird nie in die Quellcodeverwaltung eingecheckt, da sie das Anwendungsgeheimnis für Azure enthält. Die standardmäßige GITIGnore-Datei für JavaScript schließt die .env Datei automatisch aus dem Einchecken aus.
Um das dotenv Paket zu verwenden, installieren Sie zuerst das Paket in Ihrer Anwendung.
npm install dotenv
Erstellen Sie dann eine .env-Datei im Stammverzeichnis Ihrer Anwendung. Legen Sie die Umgebungsvariablen mit Werten fest, die wie folgt aus dem App-Registrierungsprozess abgerufen werden:
AZURE_CLIENT_ID→ Der App-ID-Wert.AZURE_TENANT_ID→ Der Wert der Mandanten-ID.AZURE_CLIENT_SECRET→ Das für die App generierte Kennwort/Anmeldeinformationen.
AZURE_CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
AZURE_TENANT_ID=ffffaaaa-5555-bbbb-6666-cccc7777dddd
AZURE_CLIENT_SECRET=Aa1Bb~2Cc3.-Dd4Ee5Ff6Gg7Hh8Ii9_Jj0Kk1Ll2
Verwenden Sie schließlich im Startcode für Ihre Anwendung die dotenv-Bibliothek, um die Umgebungsvariablen aus der .env-Datei beim Start zu lesen.
import 'dotenv/config'
5 - Implementieren von DefaultAzureCredential in Ihrer Anwendung
Um Azure SDK-Clientobjekte für Azure zu authentifizieren, sollte Ihre Anwendung die DefaultAzureCredential-Klasse aus dem @azure/identity-Paket verwenden. In diesem Szenario werden die Umgebungsvariablen AZURE_TENANT_IDAZURE_CLIENT_IDerkannt und diese Variablen festgelegt und AZURE_CLIENT_SECRET gelesen, DefaultAzureCredential um die Dienstprinzipalinformationen für die Verbindung mit Azure abzurufen.
Fügen Sie zunächst das @azure-/Identitätspaket zu Ihrer Anwendung hinzu.
npm install @azure/identity
Danach sollten Sie für jeden JavaScript-Code, der ein Azure SDK-Clientobjekt in Ihrer App erstellt, Folgendes ausführen:
- Importieren Sie die
DefaultAzureCredential-Klasse aus dem@azure/identity-Modul. - Erstellen eines
DefaultAzureCredential-Objekts - Übergeben Sie das
DefaultAzureCredential-Objekt an den Azure SDK-Clientobjektkonstruktor.
Ein Beispiel dafür wird im folgenden Codeausschnitt gezeigt.
// Azure authentication dependency
import { DefaultAzureCredential } from '@azure/identity';
// Azure resource management dependency
import { SubscriptionClient } from "@azure/arm-subscriptions";
// Acquire credential
const tokenCredential = new DefaultAzureCredential();
async function listSubscriptions() {
try {
// use credential to authenticate with Azure SDKs
const client = new SubscriptionClient(tokenCredential);
// get details of each subscription
for await (const item of client.subscriptions.list()) {
const subscriptionDetails = await client.subscriptions.get(
item.subscriptionId
);
/*
Each item looks like:
{
id: '/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e',
subscriptionId: 'aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e',
displayName: 'YOUR-SUBSCRIPTION-NAME',
state: 'Enabled',
subscriptionPolicies: {
locationPlacementId: 'Internal_2014-09-01',
quotaId: 'Internal_2014-09-01',
spendingLimit: 'Off'
},
authorizationSource: 'RoleBased'
},
*/
console.log(subscriptionDetails);
}
} catch (err) {
console.error(JSON.stringify(err));
}
}
listSubscriptions()
.then(() => {
console.log("done");
})
.catch((ex) => {
console.log(ex);
});
DefaultAzureCredential erkennt automatisch den für die App konfigurierten Authentifizierungsmechanismus und ruft die erforderlichen Token ab, um die App bei Azure zu authentifizieren. Wenn eine Anwendung mehrere SDK-Clients verwendet, kann dasselbe Anmeldeinformationsobjekt mit jedem SDK-Clientobjekt verwendet werden.