Freigeben über

Konfigurieren der Authentifizierung in einer Azure Static Web Apps-Instanz mithilfe von Azure AD B2C

Wichtig

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird erläutert, wie Sie die Authentifizierungsfunktionen von Azure Active Directory B2C (Azure AD B2C) zu einer Azure Static Web Apps-Instanz hinzufügen. Weitere Informationen finden Sie im Artikel Benutzerdefinierte Authentifizierung in Azure Static Web Apps.

Übersicht

OpenID Connect (OIDC) ist ein Authentifizierungsprotokoll, das auf OAuth 2.0 basiert. Verwenden Sie den OIDC, um Benutzer*innen sicher bei einer Azure Static Web Apps-Instanz anzumelden. Der Anmeldeflow umfasst die folgenden Schritte:

  1. Benutzer wechseln zur Azure Static Web Apps-Instanz und wählen Anmelden aus.
  2. Die Azure Static Web Apps-Instanz leitet eine Authentifizierungsanforderung ein und leitet Benutzer*innen zu Azure AD B2C um.
  3. Benutzer registrieren oder melden sich an und setzen das Kennwort zurück. Alternativ können sie sich mit einem Social Media-Konto anmelden.
  4. Nachdem die Benutzer*innen sich erfolgreich angemeldet haben, gibt Azure AD B2C ein ID-Token an die Azure Static Web Apps-Instanz zurück.
  5. Die Azure Static Web Apps-Instanz überprüft das ID-Token, liest die Ansprüche und gibt eine sichere Seite an die Benutzer*innen zurück.

Wenn das ID-Token abgelaufen ist oder die App-Sitzung ungültig wird, initiiert die Azure Static Web Apps-Instanz eine neue Authentifizierungsanforderung und leitet die Benutzer*innen zu Azure AD B2C um. Wenn die Azure AD B2C-SSO-Sitzung aktiv ist, gibt Azure AD B2C ein Zugriffstoken aus, ohne die Benutzer zur erneuten Anmeldung aufzufordern. Wenn die Azure AD B2C-Sitzung abläuft oder ungültig wird, werden die Benutzer aufgefordert, sich erneut anzumelden.

Voraussetzungen

Schritt 1: Konfigurieren Ihres Benutzerflows

Wenn Benutzer versuchen, sich bei Ihrer App anzumelden, startet die App über einen Benutzerflow eine Authentifizierungsanforderung an den Autorisierungsendpunkt. Der Benutzerflow definiert und kontrolliert die Benutzeroberfläche. Nachdem Benutzer den Benutzerflow abgeschlossen haben, generiert Azure AD B2C ein Token und leitet den Benutzer anschließend wieder zurück zu Ihrer Anwendung.

Falls noch nicht geschehen, erstellen Sie einen Benutzerflow oder eine benutzerdefinierte Richtlinie. Wiederholen Sie die Schritte, um drei separate Benutzerflows wie folgt zu erstellen:

  • Kombinierter Benutzerflow für Registrierung und Anmeldung, z. B. susi. Dieser Benutzerflow unterstützt auch die Umgebung Kennwort vergessen.
  • Benutzerflow für die Profilbearbeitung, z. B. edit_profile.
  • Benutzerflow für die Kennwortzurücksetzung, z. B. reset_password.

Azure AD B2C stellt B2C_1_ dem Benutzerflownamen voran. susi wird beispielsweise zu B2C_1_susi.

Schritt 2: Registrieren einer Webanwendung

Damit sich Ihre Anwendung mit Azure AD B2C anmelden kann, müssen Sie Ihre App im Azure AD B2C-Verzeichnis registrieren. Durch die App-Registrierung wird eine Vertrauensstellung zwischen der App und Azure AD B2C eingerichtet.

Bei der App-Registrierung geben Sie einen Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, an den die Benutzer von Azure AD B2C umgeleitet werden, nachdem sie sich mit Azure AD B2C authentifiziert haben. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die auch als Client-ID bezeichnet wird und Ihre App eindeutig identifiziert. Nachdem Ihre App registriert wurde, verwendet Azure AD B2C sowohl die Anwendungs-ID als auch den Umleitungs-URI, um Authentifizierungsanforderungen zu erstellen. Außerdem erstellen Sie einen geheimen Clientschlüssel, der von Ihrer App zum sicheren Abrufen der Token verwendet wird.

Schritt 2.1: Registrieren der App

Führen Sie die folgenden Schritte aus, um Ihre Anwendung zu registrieren:

  1. Melden Sie sich beim Azure-Portal an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C Mandanten zu wechseln.

  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.

  4. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.

  5. Geben Sie unter Name einen Namen für die Anwendung ein (z. B. Meine Azure Static Web Apps-Instanz).

  6. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzern mit Benutzerflows) aus.

  7. Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie https://<YOUR_SITE>/.auth/login/aadb2c/callback in das URL-Feld ein. Ersetzen Sie den <YOUR_SITE> durch den Namen Ihrer Azure Static Web Apps-Instanz. Beispiel: https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c/callback. Wenn Sie eine*n Benutzer*in für die benutzerdefinierten Domänen einer Azure Static Web Apps-Instanz konfiguriert haben, verwenden Sie die benutzerdefinierte Domäne im Umleitungs-URI. Zum Beispiel, https://www.example.com/.auth/login/aadb2c/callback

  8. Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für OpenID- und Offlinezugriffsberechtigungen erteilen.

  9. Wählen Sie Registrieren.

  10. Wählen Sie Übersicht.

  11. Notieren Sie sich die Anwendungs- bzw. Client-ID, die Sie später beim Konfigurieren der Webanwendung verwenden.

    Screenshot: Seite „Übersicht“ der Web-App zum Aufzeichnen Ihrer Webanwendungs-ID.

Schritt 2.2: Erstellen eines geheimen Clientschlüssels

  1. Wählen Sie auf der Seite Azure AD B2C – App-Registrierungen die von Ihnen erstellte Anwendung aus, z. B. Meine Azure Static Web Apps-Instanz.
  2. Wählen Sie im linken Menü unter Verwalten die Option Zertifikate und Geheimnisse aus.
  3. Wählen Sie Neuer geheimer Clientschlüssel.
  4. Geben Sie im Feld Beschreibung eine Beschreibung für das Clientgeheimnis ein. Beispielsweise clientsecret1.
  5. Wählen Sie unter Läuft ab einen Zeitraum aus, für den das Geheimnis gültig ist, und wählen Sie dann Hinzufügen aus.
  6. Notieren Sie sich den Wert des Geheimnisses, das in Ihrem Clientanwendungscode verwendet werden soll. Dieser Geheimniswert kann nach Verlassen dieser Seite nicht erneut angezeigt werden. Sie verwenden diesen Wert als Anwendungsgeheimnis im Code Ihrer Anwendung.

Schritt 3: Konfigurieren der Azure Static Web Apps-Instanz

Sobald die Anwendung bei Azure AD B2C registriert ist, erstellen Sie die folgenden Anwendungsgeheimnisse in den Anwendungseinstellungen der Azure Static Web Apps-Instanz. Sie können Anwendungseinstellungen über das Azure-Portal oder mit der Azure CLI konfigurieren. Weitere Informationen finden Sie im Artikel Konfigurieren der Anwendungseinstellungen für Azure Static Web Apps.

Fügen Sie die folgenden Schlüssel zu den App-Einstellungen hinzu:

Einstellungsname Wert
AADB2C_PROVIDER_CLIENT_ID Die Web-App (Client-ID) aus Schritt 2.1.
AADB2C_PROVIDER_CLIENT_SECRET Der geheime Web App (Client)-Schlüssel aus Schritt 2.2.

Wichtig

Anwendungsgeheimnisse sind vertrauliche Sicherheitsanmeldeinformationen. Teilen Sie dieses Geheimnis mit niemandem, verteilen Sie es in keiner Clientanwendung, und checken Sie es nicht in die Quellcodeverwaltung ein.

3.1 Hinzufügen des OpenID Connect-Identitätsanbieters

Nachdem Sie die App-ID und das Geheimnis hinzugefügt haben, verwenden Sie die folgenden Schritte, um Azure AD B2C als OpenID Connect-Identitätsanbieter hinzuzufügen.

  1. Fügen Sie der auth einen -Abschnitt mit einem Konfigurationsblock für die OIDC-Anbieter und Ihre Anbieterdefinition hinzu.

    {
  "auth": {
    "identityProviders": {
      "customOpenIdConnectProviders": {
        "aadb2c": {
          "registration": {
            "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
            "clientCredential": {
              "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
            },
            "openIdConnectConfiguration": {
              "wellKnownOpenIdConfiguration": "https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
            }
          },
          "login": {
            "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
            "scopes": [],
            "loginParameterNames": []
          }
        }
      }
    }
  }
}

  2. Ersetzen Sie <TENANT_NAME> durch den ersten Teil Ihres Azure AD B2C-Mandantennamens (z. B. https://contoso.b2clogin.com/contoso.onmicrosoft.com).

  3. Ersetzen Sie dann <POLICY_NAME> durch die Benutzerflows oder die benutzerdefinierte Richtlinie, die Sie in Schritt 1 erstellt haben.

Schritt 4: Überprüfen der Azure Static Web Apps-Instanz

  1. Navigieren Sie zu /.auth/login/aadb2c. /.auth/login zeigt auf den Anmeldeendpunkt der Azure Static Web Apps-Instanz. aadb2c verweist auf Ihren OpenID Connect-Identitätsanbieter. Die folgende URL veranschaulicht einen Anmeldeendpunkt für eine Azure Static Web Apps-Instanz: https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c.

  2. Schließen Sie den Registrierungs- oder Anmeldevorgang ab.

  3. Führen Sie im Debugger Ihres Browsers den folgenden JavaScript-Code in der Konsole aus. Der JavaScript-Code stellt Informationen zum Anmeldebenutzer dar.

    async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

await getUserInfo();

Tipp

Wenn Sie den obigen JavaScript-Code in Ihrem Browser nicht ausführen können, navigieren Sie zur folgenden URL: https://<app-name>.azurewebsites.net/.auth/me. Ersetzen Sie den <app-name> durch den Namen Ihrer Azure-Web-App.

Nächste Schritte