Verwalten der Authentifizierung in Static Web Apps
Ihre Web-App für Einkaufslisten benötigt eine Möglichkeit, ihre Benutzer*innen eindeutig zu identifizieren und ihnen einen persönlichen Bereich zum Speichern der Produkte zur Verfügung zu stellen.
Über die Authentifizierung verifizieren Sie die Identität eines Benutzers, der auf ein Informationssystem zugreifen möchte. Wir beschäftigen uns nun mit der Authentifizierung und ihrer Umsetzung in Azure Static Web Apps.
Identitätsanbieter
Mit Azure Static Web Apps wird der Authentifizierungsablauf optimiert, indem die Authentifizierung mit den folgenden Anbietern verwaltet wird:
- Microsoft Entra ID
- GitHub
- X
Alle Authentifizierungsanbieter sind standardmäßig aktiviert. Wir sehen uns später an, wie Sie einen Authentifizierungsanbieter mit einer benutzerdefinierten Routenregel einschränken können.
Systemordner
Der Systemordner /.auth bietet Zugriff auf alle Authentifizierungs-APIs. Sie können mithilfe dieser Endpunkte einen vollständigen Workflow zur Authentifizierung in Ihrer Anwendung implementieren, einschließlich An- und Abmeldung und Zugriff auf Benutzerinformationen.
Anmelden
In der folgenden Tabelle sind die anbieterspezifischen Anmelderouten aufgeführt, die Sie in Ihrer App verwenden können.
| Identitätsanbieter | Anmelderoute |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
Sie können mit dem folgenden Ausschnitt einen Anmeldelink in Ihre Web-App einfügen, um sich beispielsweise bei GitHub anzumelden:
<a href="/.auth/login/github">Login</a>
Wenn ein Benutzer nach der Anmeldung zu einer bestimmten Seite umgeleitet werden soll, können Sie auch eine URL im Parameter post_login_redirect_uri der Abfragezeichenfolge angeben. Beispiel:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Logout
Über die Route /.auth/logout werden Benutzer von der Web-App abgemeldet. Sie können einen Link zu Ihrer Sitenavigation hinzufügen, um dem Benutzer das Abmelden zu ermöglichen. Dies ist im folgenden Beispiel dargestellt.
<a href="/.auth/logout">Log out</a>
Wie bei der Anmeldung können Sie mit dem Parameter post_logout_redirect_uri der Abfragezeichenfolge eine URL angeben, zu der nach der Abmeldung eine Umleitung erfolgen soll:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Zugreifen auf Benutzerinformationen
Sie können auf authentifizierungsbezogene Benutzerinformationen entweder über einen Endpunkt mit Direktzugriff oder einen speziellen Header in API-Funktionen zugreifen.
Wenn Sie eine GET-Anforderung an die Route /.auth/me senden, erhalten Sie ein JSON-Objekt mit den Daten des aktuell angemeldeten Benutzers. Für Anforderungen von nicht authentifizierten Benutzern wird null zurückgegeben.
Es folgt ein Beispiel eines Antwortobjekts:
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
API-Funktionen
Alle in Azure Static Web Apps verfügbaren API-Funktionen haben Zugriff auf die gleichen Benutzerinformationen wie Ihre Clientanwendung. Die Benutzerdaten werden an Funktionen im HTTP-Header x-ms-client-principal weitergegeben. Die Daten werden als JSON-Objekt serialisiert und als Base64 codiert.
Die folgende Beispielfunktion zeigt, wie Benutzerinformationen gelesen und zurückgegeben werden:
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
Nächste Schritte
Als Nächstes implementieren Sie einen vollständigen Authentifizierungsworkflow in Ihre App.