Tutoriel : Configurer Azure Active Directory B2C avec la plateforme Arkose Labs

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Dans ce tutoriel, découvrez comment intégrer l’authentification Azure Active Directory B2C (Azure AD B2C) à la plateforme Arkose Protect d’Arkose Labs . Les produits Arkose Labs aident les organisations à lutter contre les attaques de bots, l’usurpation de compte et les ouvertures de comptes frauduleuses.

Conditions préalables

Avant de commencer, vérifiez que vous disposez des éléments suivants :

• Un abonnement Azure
  • Si vous n’en avez pas, vous pouvez obtenir un compte gratuit Azure
• Un tenant Azure AD B2C lié à votre abonnement Azure
• Un compte Arkose Labs
  • Rendez-vous sur arkoselabs.com pour demander une démo

Description du scénario

L’intégration des produits Arkose Labs comprend les composants suivants :

• Arkose Protect Platform - Un service de protection contre les bots et autres abus automatisés
• Flux d’utilisateurs d’inscription Azure AD B2C : expérience d’inscription qui utilise la plateforme Arkose Labs
  • Les connecteurs HTML, JavaScript et API personnalisés s’intègrent à la plateforme Arkose
• Azure Functions : votre point de terminaison d’API hébergé qui fonctionne avec la fonctionnalité de connecteurs d’API
  • Cette API valide le côté serveur du token de session Arkose Labs
  • Pour en savoir plus, consultez la vue d’ensemble d’Azure Functions

Le diagramme suivant illustre l’intégration de la plateforme Arkose Labs à Azure AD B2C.

1. Un utilisateur s’inscrit et crée un compte. Il sélectionne Envoyer. Un test de mise en application d’Arkose Labs s’affiche.
2. L’utilisateur termine le défi. Azure AD B2C envoie l’état à Arkose Labs pour générer un jeton.
3. Arkose Labs envoie le jeton à Azure AD B2C.
4. Azure AD B2C appelle une API web intermédiaire pour transmettre le formulaire d’inscription.
5. Le formulaire d’inscription est envoyé à Arkose Labs pour vérifier le jeton de sécurité.
6. Arkose Labs envoie les résultats de vérification à l’API web intermédiaire.
7. L’API envoie un résultat de réussite ou d’échec à Azure AD B2C.
8. Si la contestation est réussie, un formulaire d’inscription est envoyé à Azure AD B2C, qui termine l’authentification.

Demander une démo d’Arkose Labs

1. Rendez-vous sur arkoselabs.com pour réserver une démo.
2. Créez un compte.
3. Accédez à la page de connexion du portail Arkose .
4. Dans le tableau de bord, accédez aux paramètres du site.
5. Localisez votre clé publique et votre clé privée. Vous utiliserez ces informations plus tard.

Remarque

Les valeurs de clé publique et privée sont ARKOSE_PUBLIC_KEY et ARKOSE_PRIVATE_KEY. Cf. Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.

Intégrer avec Azure AD B2C

Créer un attribut personnalisé ArkoseSessionToken

Pour créer un attribut personnalisé :

1. Connectez-vous au portail Azure, puis accédez à Azure AD B2C.
2. Sélectionnez Attributs utilisateur.
3. Sélectionnez Ajouter.
4. Entrez ArkoseSessionToken comme nom d’attribut.
5. Cliquez sur Créer.

Informations supplémentaires : Définir des attributs personnalisés dans Azure Active Directory B2C

Créer un flux utilisateur

Le parcours utilisateur concerne soit l'inscription et la connexion, soit uniquement l'inscription. Le flux d’utilisateurs Arkose Labs s’affiche lors de l’inscription.

1. Créez des flux d’utilisateurs et des stratégies personnalisées dans Azure Active Directory B2C. Si vous utilisez un flux d’utilisateurs, utilisez Recommandé.

2. Dans les paramètres de flux d’utilisateurs, accédez à Attributs utilisateur.

3. Sélectionnez la revendication ArkoseSessionToken.

   

Configurer le code HTML, JavaScript et la mise en page personnalisés

1. Accédez à Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
2. Recherchez le modèle HTML avec des balises JavaScript <script> . Ceux-ci font trois choses :

• Chargez le script Arkose Labs, qui affiche leur widget et effectue la validation Arkose Labs côté client.

• Masquez l’élément d’entrée et l’étiquette extension_ArkoseSessionToken , correspondant à l’attribut ArkoseSessionToken personnalisé.

• Lorsqu’un utilisateur relève le défi Arkose Labs, la réponse de l’utilisateur est vérifiée et un jeton est généré. Le rappel arkoseCallback dans le code JavaScript personnalisé définit la valeur de extension_ArkoseSessionToken sur la valeur du jeton généré. Cette valeur est envoyée au point de terminaison de l’API.

  Remarque

  Accédez à developer.arkoselabs.com pour obtenir des instructions côté client. Suivez les étapes pour utiliser le code HTML et JavaScript personnalisés pour votre flux d’utilisateurs.

3. Dans Azure-Samples, modifiez selfAsserted.html fichier afin qu’il corresponde à <ARKOSE_PUBLIC_KEY> la valeur que vous avez générée pour la validation côté client.

4. Hébergez la page HTML sur un point de terminaison Web compatible avec le partage de ressources cross-origin (CORS).

5. Créez un compte de stockage.

6. Ajoutez la prise en charge du partage CORS pour le Stockage Azure.

   Remarque

   Si vous disposez d’un code HTML personnalisé, copiez et collez les <script> éléments sur votre page HTML.

7. Dans le portail Azure, accédez à Azure AD B2C.

8. Accédez à Flux d’utilisateurs.

9. Sélectionnez votre flux d’utilisateurs.

10. Sélectionnez Les mises en page.

11. Sélectionnez Présentation de la page d’inscription au compte local.

12. Pour Utiliser le contenu de la page personnalisée, sélectionnez OUI.

13. Dans Utiliser le contenu de la page personnalisée, collez votre URI HTML personnalisé.

14. (Facultatif) Si vous utilisez des fournisseurs d’identité sociale, répétez les étapes pour la page d’inscription au compte social.

    

15. À partir de votre flux d’utilisateurs, accédez à Propriétés.

16. Sélectionnez Activer JavaScript.

Informations complémentaires : Activer JavaScript et les versions de mise en page dans Azure Active Directory B2C

Créez et déployez votre API

Cette section suppose que vous utilisez Visual Studio Code pour déployer Azure Functions. Vous pouvez utiliser le portail, le terminal ou l’invite de commande Azure pour le déploiement.

Accédez à Visual Studio Marketplace pour installer Azure Functions pour Visual Studio Code.

Exécuter l’API localement

1. Dans Visual Studio code, dans le volet de navigation gauche, accédez à l’extension Azure.
2. Sélectionnez le dossier Projet local pour votre fonction Azure locale.
3. Appuyez sur F5 ou sélectionnez Déboguer>Démarrer le débogage. Cette commande utilise la configuration de débogage créée par Azure Functions.
4. Azure Function génère des fichiers pour le développement local, installe les dépendances et les outils Function Core, si nécessaire.
5. Dans le panneau Terminal de Visual Studio Code, la sortie de l’outil Function Core Tools s’affiche.
6. Lorsque l’hôte démarre, sélectionnez Alt+clic sur l’URL locale dans la sortie.
7. Le navigateur ouvre et exécute la fonction.
8. Dans l’explorateur Azure Functions, cliquez avec le bouton droit sur la fonction pour afficher l’URL de la fonction hébergée localement.

Ajouter des variables d’environnement

L’exemple de cette section protège le point de terminaison de l’API web lors de l’utilisation de l’authentification HTTP Basic. Pour en savoir plus, consultez la page de l’Internet Engineering Task Force RFC 7617 : L’authentification de base.

Le nom d’utilisateur et le mot de passe sont stockés en tant que variables d’environnement et ne font pas partie du référentiel. En savoir plus sur Coder et tester Azure Functions localement, Fichier de paramètres locaux.

1. Dans votre dossier racine, créez un fichier local.settings.json.
2. Copiez et collez le code suivant dans le fichier :

{
  "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. Le BASIC_AUTH_USERNAME et le BASIC_AUTH_PASSWORD sont les informations d’identification permettant d’authentifier l’appel d’API auprès de votre fonction Azure. Sélectionnez des valeurs.

• < > ARKOSE_PRIVATE_KEY’est le secret côté serveur que vous avez généré dans la plateforme Arkose Labs.
  • Il appelle l’API de validation côté serveur d’Arkose Labs pour valider la valeur générée ArkoseSessionToken par le front-end.
  • Voir Server-Side instructions.
• < > B2C_EXTENSIONS_APP_ID’est l’ID d’application utilisé par Azure AD B2C pour stocker les attributs personnalisés dans l’annuaire.

4. Accédez à Inscriptions d’applications.

5. Recherchez b2c-extensions-app.

6. Dans le volet Vue d’ensemble , copiez l’ID de l’application (client).

7. Supprimez les - caractères.

   

Déployer l’application sur le web

1. Déployez votre fonction Azure dans le cloud. Pour en savoir plus, consultez la documentation Azure Functions.

2. Copiez l’URL web du point de terminaison de votre fonction Azure.

3. Après le déploiement, sélectionnez l’option Télécharger les paramètres .

4. Vos variables d’environnement sont téléchargées dans les paramètres de l’application du service d’application. En savoir plus sur Paramètres d’application dans Azure.

   Remarque

   Vous pouvez gérer votre application de fonction. Voir aussi Déployer des fichiers projet pour en savoir plus sur le développement de Visual Studio Code pour Azure Functions.

Configurer et activer le connecteur d’API

1. Créez un connecteur API. Voir Ajouter un connecteur d’API à un flux d’inscription d’utilisateur.

2. Activez-le pour votre flux d’utilisateurs.

   

• URL du point de terminaison : URL de la fonction que vous avez copiée lors du déploiement de la fonction Azure
• Nom d’utilisateur : nom d’utilisateur que vous avez défini
• Mot de passe : mot de passe que vous avez défini

3. Dans les paramètres du connecteur d’API de votre flux d’utilisateurs, sélectionnez le connecteur d’API à appeler avant de créer l’utilisateur.

4. L’API valide la ArkoseSessionToken valeur.

   

Tester le flux utilisateur

1. Ouvrez l'instance Azure AD B2C.
2. Sous Stratégies, sélectionnez Flux utilisateur.
3. Sélectionnez le flux d’utilisateurs que vous avez créé.
4. Sélectionner Exécuter le flux utilisateur.
5. Pour Application , sélectionnez l’application enregistrée (par exemple, JWT).
6. Pour l’URL de réponse, sélectionnez l’URL de redirection.
7. Sélectionner Exécuter le flux utilisateur.
8. Effectuez le processus d'inscription.
9. Créez un compte.
10. Déconnectez-vous.
11. Suivez le flux de connexion.
12. Sélectionnez Continuer.
13. Un puzzle d’Arkose Labs apparaît.

Ressources

• Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose
  • Rechercher le flux d'inscription des utilisateurs Azure AD B2C
• Vue d’ensemble de la stratégie personnalisée Azure AD B2C
• Tutoriel : Créer des flux utilisateur et des stratégies personnalisées dans Azure Active Directory B2C