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

In diesem Tutorial erfahren Sie, wie Sie die Azure AD B2C-Authentifizierung (Azure Active Directory B2C) in die Arkose Protect-Plattform von Arkose Labs integrieren. Arkose Labs-Produkte schützen Organisationen vor Botangriffen, Angriffen mit Kontoübernahmen und betrügerischen Kontoeröffnungen.

Voraussetzungen

Zunächst benötigen Sie Folgendes:

• Ein Azure-Abonnement
  • Wenn Sie über kein Abonnement verfügen, können Sie ein kostenloses Azure-Konto anfordern.
• Einen Azure AD B2C-Mandanten, der mit Ihrem Azure-Abonnement verknüpft ist
• Ein Arkose Labs-Konto
  • Rufen Sie arkoselabs.com auf, um eine Demoversion anzufordern.

Beschreibung des Szenarios

Die Integration von Arkose Labs-Produkten umfasst die folgenden Komponenten:

• Arkose Protect-Plattform: Ein Dienst zum Schutz vor Bots und anderem automatisiertem Missbrauch
• Benutzerflow für die Azure AD B2C-Registrierung: Die Registrierungsoberfläche, die die Arkose Labs-Plattform verwendet
  • Benutzerdefiniertes HTML, JavaScript und API-Connectors können in die Arkose-Plattform integriert werden
• Azure Functions: Der von Ihnen gehostete API-Endpunkt, der mit dem Feature „API-Connectors“ funktioniert
  • Diese API validiert die Serverseite des Arkose Labs-Sitzungstokens
  • Weitere Informationen finden Sie in der Übersicht über Azure Functions.

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

1. Ein Benutzer registriert sich und erstellt ein Konto. Der Benutzer wählt die Option Senden aus, und eine Arkose Labs-Abfrage wird angezeigt.
2. Der Benutzer erfüllt die Abfrage. Azure AD B2C sendet den Status zwecks Generierung eines Tokens an Arkose Labs.
3. Arkose Labs sendet das Token an Azure AD B2C.
4. Azure AD B2C ruft eine zwischengeschaltete Web-API auf, um das Registrierungsformular zu übergeben.
5. Das Registrierungsformular wird zur Tokenüberprüfung an Arkose Labs weitergeleitet.
6. Arkose Labs sendet die Überprüfungsergebnisse an die zwischengeschaltete Web-API.
7. Die API sendet eine Erfolgs- oder Fehlerergebnis an Azure AD B2C.
8. Wenn die Abfrage erfolgreich ist, wird ein Registrierungsformular an Azure AD B2C gesendet, welches die Authentifizierung abschließt.

Anfordern einer Demoversion von Arkose Labs

1. Wechseln Sie zu arkoselabs.com, um eine Demoversion anzufordern.
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 und Ihren privaten Schlüssel. Sie werden diese Informationen später verwenden.

Hinweis

Die Werte für den öffentlichen und den privaten Schlüssel 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 in 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.
4. Geben Sie ArkoseSessionToken als Attributnamen ein.
5. Klicken Sie auf Erstellen.

Weiteren Informationen finden Sie unter Definieren benutzerdefinierter Attribute in Azure Active Directory B2C.

Erstellen eines Benutzerflows

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

1. Erstellen Sie Benutzerflows und benutzerdefinierte Richtlinien in Azure Active Directory B2C. Wenn Sie einen Benutzerflow einsetzen, verwenden Sie Empfohlen.

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

3. Wählen Sie den Anspruch ArkoseSessionToken aus.

   

Konfigurieren von benutzerdefiniertem HTML, JavaScript und Seitenlayouts

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

• Sie laden das Arkose Labs-Skript, mit dem das Widget gerendert und die clientseitige Arkose Labs-Überprüfung durchgeführt wird.

• Sie blenden das dem benutzerdefinierten ArkoseSessionToken-Attribut entsprechende extension_ArkoseSessionToken-Eingabeelement und die Bezeichnung aus.

• Wenn ein Benutzer die Arkose Labs-Abfrage abgeschlossen hat, wird die Benutzerantwort überprüft und ein Token generiert. Der Rückruf arkoseCallback im benutzerdefinierten JavaScript-Code legt den Wert von extension_ArkoseSessionToken auf den Wert des generierten Tokens 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 unter „Azure-Samples“ die Datei selfAsserted.html so, dass <ARKOSE_PUBLIC_KEY> dem Wert entspricht, den Sie für die clientseitige Überprüfung generiert haben.

4. Hosten Sie die HTML-Seite auf einem Webendpunkt, für den die ursprungsübergreifende Ressourcenfreigabe (Cross-Origin Resource Sharing, CORS) aktiviert ist.

5. Informationen zu Azure-Speicherkonten

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

   Hinweis

   Wenn Sie benutzerdefiniertes HTML verwenden, kopieren Sie die <script>-Elemente, und fügen Sie diese auf Ihrer HTML-Seite ein.

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

8. Navigieren Sie zu Benutzerflows.

9. Wählen Sie Ihren Benutzerflow aus.

10. Wählen Sie Seitenlayouts aus.

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

12. Wählen Sie unter Benutzerdefinierten Seiteninhalt verwenden die Option JA aus.

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

14. (Optional) Wenn Sie ein soziales Netzwerk als Identitätsanbieter verwenden, wiederholen Sie die Schritte für Registrierungsseite für Social Media-Konto.

    

15. Navigieren Sie in Ihrem Benutzerflow zu Eigenschaften.

16. Wählen Sie JavaScript aktivieren aus.

Weitere Informationen finden Sie unter 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 zur Bereitstellung von Azure Functions verwenden. Sie können das Azure-Portal, ein Terminal oder die Eingabeaufforderung für die Bereitstellung verwenden.

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>Debuggen starten aus. Dieser Befehl verwendet die von der Azure-Funktion erstellte Debugkonfiguration.
4. Die Azure-Funktion 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 wird geöffnet, und die Funktion wird ausgeführt.
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 RFC 7617: Die Standardauthentifizierung der Internet Engineering Task Force.

Benutzername und Kennwort werden als Umgebungsvariablen und nicht als Teil des Repositorys gespeichert. Weitere Informationen finden Sie unter „Lokales Codieren und Testen von Azure Functions“ im Abschnitt Datei für lokale Einstellungen.

1. Erstellen Sie in Ihrem Stammordner eine Datei „local.settings.json“.
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. Bei BASIC_AUTH_USERNAME und BASIC_AUTH_PASSWORD handelt es sich um die Anmeldeinformationen, die zum Authentifizieren des API-Aufrufs Ihrer Azure Functions-Instanz verwendet werden. Wählen Sie Werte aus.

• <ARKOSE_PRIVATE_KEY> ist das serverseitige Geheimnis, das Sie auf der Arkose Labs-Plattform generiert haben.
  • Damit wird die serverseitige Arkose Labs-Überprüfungs-API aufgerufen, um den Wert des vom Front-End generierten Tokens (ArkoseSessionToken) zu überprüfen.
  • Weitere Informationen finden Sie unter Serverseitige 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 auf der Seite Übersicht die Anwendungs-ID (Client).

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 Webendpunkt-URL Ihrer Azure Functions-App.

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

4. Die Umgebungsvariablen werden in die Anwendungseinstellungen des App-Diensts hochgeladen. Weitere Informationen finden Sie 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-Connectors

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

2. Aktivieren Sie ihn für Ihren Benutzerflow.

   

• Endpunkt-URL: Die Funktions-URL, die Sie zuvor beim Bereitstellen von Azure Functions kopiert haben
• Benutzername: Der von Ihnen definierte Benutzername
• Kennwort: Das von Ihnen definierte Kennwort

3. Wählen Sie in den Einstellungen der API-Connectors 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 Benutzerflow aus.
4. Wählen Sie Benutzerflow ausführen aus.
5. Als Anwendung wählen Sie die registrierte App aus (im Beispiel JWT).
6. Als Antwort-URL wählen Sie die Umleitungs-URL aus.
7. Wählen Sie Benutzerflow ausführen aus.
8. Führen Sie den Registrierungsflow aus.
9. Erstellen Sie ein Konto.
10. Melden Sie sich ab.
11. Führen Sie den Anmeldeflow aus.
12. Wählen Sie Weiter.
13. Ein Arkose Labs-Puzzle wird angezeigt.

Ressourcen

• Azure-Samples/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
• Tutorial: Erstellen von Benutzerflows und benutzerdefinierten Richtlinien in Azure Active Directory B2C