Tutorial: Konfigurieren von Azure Active Directory B2C mit der Arkose Labs-Plattform

Von Bedeutung

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 Tutorial erfahren Sie, wie Sie die Azure Active Directory B2C-Authentifizierung (Azure AD B2C) in die Arkose Protect-Plattform von Arkose Labs integrieren. Die Produkte von Arkose Labs helfen Unternehmen vor Bot-Angriffen, Kontoübernahmen und betrügerischen Kontoeröffnungen.

Voraussetzungen

Zunächst benötigen Sie Folgendes:

• Azure-Abonnement
  • Wenn Sie kein Konto haben, können Sie ein kostenloses Azure-Konto erhalten.
• Ein Azure AD B2C-Mandant , der mit Ihrem Azure-Abonnement verknüpft ist
• Ein Konto bei Arkose Labs
  • Gehen Sie zu arkoselabs.com, um eine Demo anzufordern

Szenariobeschreibung

Die Produktintegration von Arkose Labs umfasst die folgenden Komponenten:

• Arkose Protect Platform - Ein Dienst zum Schutz vor Bots und anderem automatisierten Missbrauch
• Benutzerflow für die Azure AD B2C-Registrierung : Die Registrierungsumgebung, die die Arkose Labs-Plattform verwendet
  • Benutzerdefinierte HTML-, JavaScript- und API-Konnektoren lassen sich in die Arkose-Plattform integrieren
• Azure Functions : Ihr gehosteter API-Endpunkt, der mit dem API-Connectors-Feature funktioniert
  • Diese API validiert die Serverseite des Arkose Labs-Sitzungstokens.
  • Weitere Informationen finden Sie in der Übersicht über Azure Functions

Das folgende Diagramm veranschaulicht, wie die Arkose Labs-Plattform in Azure AD B2C integriert wird.

1. Ein Benutzer meldet sich an und erstellt ein Konto. Der Benutzer wählt Senden aus, und eine Durchsetzungsaufforderung von Arkose Labs wird angezeigt.
2. Der Benutzer schließt die Herausforderung ab. Azure AD B2C sendet den Status an Arkose Labs, um ein Token zu generieren.
3. Arkose Labs sendet das Token an Azure AD B2C.
4. Azure AD B2C ruft eine Zwischenweb-API auf, um das Registrierungsformular zu übergeben.
5. Das Anmeldeformular geht zur Token-Verifizierung an Arkose Labs.
6. Arkose Labs sendet die Verifizierungsergebnisse an die zwischengeschaltete Web-API.
7. Die API sendet ein Erfolgs- oder Fehlerergebnis an Azure AD B2C.
8. Wenn die Abfrage erfolgreich ist, wird ein Registrierungsformular an Azure AD B2C gesendet, das die Authentifizierung abschließt.

Fordern Sie eine Demo von Arkose Labs an

1. Gehen Sie zu arkoselabs.com, um eine Demo zu buchen.
2. Erstellen Sie ein Konto.
3. Navigieren Sie zur Anmeldeseite des Arkose-Portals .
4. Navigieren Sie im Dashboard zu den Websiteeinstellungen.
5. Suchen Sie Ihren öffentlichen Schlüssel und Ihren privaten Schlüssel. Sie werden diese Informationen später verwenden.

Hinweis

Die Werte des öffentlichen und des privaten Schlüssels sind ARKOSE_PUBLIC_KEY und .ARKOSE_PRIVATE_KEY Weitere Informationen finden Sie unter Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.

Integration mit Azure AD B2C

Erstellen eines benutzerdefinierten ArkoseSessionToken-Attributs

So erstellen Sie ein benutzerdefiniertes Attribut:

1. Melden Sie sich beim Azure-Portal an, und navigieren Sie dann zu Azure AD B2C.
2. Wählen Sie Benutzerattribute aus.
3. Wählen Sie Hinzufügen aus.
4. Geben Sie ArkoseSessionToken als Attribut Name ein.
5. Wählen Sie "Erstellen" aus.

Weitere Informationen: Definieren von benutzerdefinierten Attributen in Azure Active Directory B2C

Erstellen eines Benutzerablaufs

Der Benutzerflow dient zur Registrierung und Anmeldung oder zur Registrierung. Der Benutzerflow von Arkose Labs wird während der Registrierung angezeigt.

1. Erstellen von Benutzerflüssen und benutzerdefinierten Richtlinien in Azure Active Directory B2C. Wenn Sie einen Benutzerflow verwenden, verwenden Sie Empfohlen.

2. Gehen Sie in den Einstellungen des Benutzerflows zu Benutzerattribute.

3. Wählen Sie den Anspruch ArkoseSessionToken aus.

   

Konfigurieren von benutzerdefiniertem HTML, JavaScript und Seitenlayout

1. Wechseln Sie zu Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
2. Suchen Sie die HTML-Vorlage mit JavaScript-Tags <script> . Diese bewirken drei Dinge:

• Laden Sie das Arkose Labs-Skript, das das Widget rendert und die clientseitige Arkose Labs-Validierung durchführt.

• Blenden Sie das Eingabeelement und die extension_ArkoseSessionToken Beschriftung aus, die dem ArkoseSessionToken benutzerdefinierten Attribut entsprechen.

• Wenn ein Benutzer die Arkose Labs-Abfrage abschließt, wird die Benutzerantwort überprüft und ein Token generiert. Der Callback arkoseCallback im benutzerdefinierten JavaScript legt den Wert von extension_ArkoseSessionToken auf den generierten Tokenwert fest. Dieser Wert wird an den API-Endpunkt übermittelt.

  Hinweis

  Wechseln Sie zu developer.arkoselabs.com, um clientseitige Anweisungen zu erhalten. Führen Sie die Schritte aus, um benutzerdefiniertes HTML und JavaScript für Ihren Benutzerflow zu verwenden.

3. Ändern Sie in Azure-Samples selfAsserted.html Datei so, dass <ARKOSE_PUBLIC_KEY> sie dem Wert entspricht, den Sie für die clientseitige Überprüfung generiert haben.

4. Hosten Sie die HTML-Seite auf einem CORS-fähigen Webendpunkt (Cross-Origin Resource Sharing).

5. Ein Speicherkonto erstellen

6. CORS-Unterstützung für Azure Storage.

   Hinweis

   Wenn Sie über benutzerdefinierten HTML-Code verfügen, kopieren Sie die Elemente und fügen Sie sie <script> in Ihre HTML-Seite ein.

7. Wechseln Sie im Azure-Portal zu Azure AD B2C.

8. Navigieren Sie zu Nutzerflüsse.

9. Wählen Sie Ihren Nutzerfluss aus.

10. Wählen Sie "Seitenlayouts" aus.

11. Wählen Sie Layout der Registrierungsseite für lokales Konto aus.

12. Wählen Sie für Benutzerdefinierten Seiteninhalt verwenden die Option JA aus.

13. Fügen Sie unter Benutzerdefinierten Seiteninhalt verwenden Ihren benutzerdefinierten HTML-URI ein.

14. (Fakultativ) Wenn Sie Identitätsanbieter für soziale Netzwerke verwenden, wiederholen Sie die Schritte für die Registrierungsseite für soziale Netzwerkkonten.

    

15. Wechseln Sie in Ihrem Benutzerflow zu Eigenschaften.

16. Wählen Sie JavaScript aktivieren aus.

Weitere Informationen: Aktivieren von JavaScript- und Seitenlayoutversionen in Azure Active Directory B2C

Erstellen und Bereitstellen Ihrer API

In diesem Abschnitt wird davon ausgegangen, dass Sie Visual Studio Code zum Bereitstellen von Azure Functions verwenden. Sie können die Bereitstellung über das Azure-Portal, das Terminal oder die Eingabeaufforderung durchführen.

Wechseln Sie zum Visual Studio Marketplace, um Azure Functions für Visual Studio Code zu installieren.

Lokales Ausführen der API

1. Wechseln Sie in Visual Studio Code im linken Navigationsbereich zur Azure-Erweiterung.
2. Wählen Sie den Ordner Lokales Projekt für Ihre lokale Azure-Funktion aus.
3. Drücken Sie F5 , oder wählen Sie Debuggen>starten. Mit diesem Befehl wird die von der Azure-Funktion erstellte Debugkonfiguration verwendet.
4. Azure Function generiert Dateien für die lokale Entwicklung, installiert Abhängigkeiten und bei Bedarf die Function Core-Tools.
5. Im Visual Studio Code-Bereich Terminal wird die Ausgabe des Function Core-Tools angezeigt.
6. Wenn der Host gestartet wird, drücken Sie ALT, und klicken Sie in der Ausgabe auf die lokale URL.
7. Der Browser öffnet sich und führt die Funktion aus.
8. Klicken Sie im Azure Functions-Explorer mit der rechten Maustaste auf die Funktion, um die URL der lokal gehosteten Funktion anzuzeigen.

Hinzufügen von Umgebungsvariablen

Das Beispiel in diesem Abschnitt schützt den Web-API-Endpunkt bei Verwendung der HTTP-Standardauthentifizierung. Weitere Informationen finden Sie auf der Seite der Internet Engineering Task Force RFC 7617: Die Basisauthentifizierung.

Benutzername und Kennwort werden als Umgebungsvariablen gespeichert und sind nicht Teil des Repositorys. Weitere Informationen finden Sie unter Lokales Programmieren und Testen von Azure Functions, Datei mit lokalen Einstellungen.

1. Erstellen Sie in Ihrem Stammordner eine local.settings.json Datei.
2. Kopieren Sie den folgenden Code, und fügen Sie ihn in die Datei ein:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "BASIC_AUTH_USERNAME": "<USERNAME>",
    "BASIC_AUTH_PASSWORD": "<PASSWORD>",
    "ARKOSE_PRIVATE_KEY": "<ARKOSE_PRIVATE_KEY>",
    "B2C_EXTENSIONS_APP_ID": "<B2C_EXTENSIONS_APP_ID>"
  }
}

3. Die BASIC_AUTH_USERNAME und BASIC_AUTH_PASSWORD sind die Anmeldeinformationen zum Authentifizieren des API-Aufrufs an Ihre Azure-Funktion. Wählen Sie Werte aus.

• < > ARKOSE_PRIVATE_KEY ist der serverseitige geheime Schlüssel, den Sie auf der Arkose Labs-Plattform generiert haben.
  • Es ruft die serverseitige Validierungs-API von Arkose Labs auf, um den Wert des vom Front-End generierten ArkoseSessionToken zu validieren.
  • Siehe Server-Side Anweisungen.
• < > B2C_EXTENSIONS_APP_ID ist die Anwendungs-ID, die von Azure AD B2C zum Speichern benutzerdefinierter Attribute im Verzeichnis verwendet wird.

4. Navigieren Sie zu App-Registrierungen.

5. Suchen Sie nach „b2c-extensions-app“.

6. Kopieren Sie im Bereich Übersicht die Anwendungs-ID (Client-ID).

7. Entfernen Sie die - Zeichen.

   

Bereitstellen der Anwendung im Web

1. Stellen Sie Ihre Azure-Funktion in der Cloud bereit. Weitere Informationen finden Sie in der Azure Functions-Dokumentation.

2. Kopieren Sie die Endpunkt-Web-URL Ihrer Azure-Funktion.

3. Wählen Sie nach der Bereitstellung die Option Einstellungen hochladen aus.

4. Ihre Umgebungsvariablen werden in die Anwendungseinstellungen des App-Diensts hochgeladen. Erfahren Sie mehr unter Anwendungseinstellungen in Azure.

   Hinweis

   Sie können Ihre Funktions-App verwalten. Weitere Informationen zur Visual Studio Code-Entwicklung für Azure Functions finden Sie unter Bereitstellen von Projektdateien .

Konfigurieren und Aktivieren des API-Konnektors

1. Erstellen Sie einen API-Konnektor. Weitere Informationen finden Sie unter Hinzufügen eines API-Connectors zu einem Benutzerflow für die Registrierung.

2. Aktivieren Sie es für Ihren Benutzerflow.

   

• Endpunkt-URL : Die Funktions-URL, die Sie während der Bereitstellung der Azure-Funktion kopiert haben
• Benutzername - Der Benutzername, den Sie definiert haben
• Passwort - Das Passwort, das Sie definiert haben

3. Wählen Sie in den API-Connector-Einstellungen für Ihren Benutzerflow den API-Connector aus, der unter Vor dem Erstellen des Benutzers aufgerufen werden soll.

4. Die API überprüft den ArkoseSessionToken Wert.

   

Testen des Benutzerflows

1. Öffnen Sie den Azure AD B2C-Mandanten.
2. Wählen Sie unter Richtlinien die Option Benutzerflows aus.
3. Wählen Sie Ihren erstellten Benutzerablauf aus.
4. Wählen Sie Benutzerflow ausführen aus.
5. Wählen Sie für Anwendung die registrierte App aus (z. B. JWT).
6. Wählen Sie für antwort-URL die Umleitungs-URL aus.
7. Wählen Sie Benutzerflow ausführen aus.
8. Führen Sie den Registrierungsablauf aus.
9. Erstellen Sie ein Konto.
10. Melden Sie sich ab.
11. Führen Sie den Anmeldeflow aus.
12. Wählen Sie Weiter aus.
13. Ein Rätsel der Arkose-Labore taucht auf.

Ressourcen

• Azure-Beispiele/active-directory-b2c-node-sign-up-user-flow-arkose
  • Finden Sie den Benutzerflow für die Azure AD B2C-Registrierung
• Übersicht über benutzerdefinierte Azure AD B2C-Richtlinien
• Lernprogramm: Erstellen von Benutzerflüssen und benutzerdefinierten Richtlinien in Azure Active Directory B2C