Tutoriel : Configuration d’Azure Active Directory B2C avec la plateforme Arkose Labs

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, les prises de contrôle de comptes et les ouvertures de comptes frauduleuses.

Prérequis

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

• Un abonnement Azure
  • Si vous n’en avez pas déjà un, vous pouvez obtenir un compte Azure gratuit.
• Un locataire Azure AD B2C lié à votre abonnement Azure
• Un compte Arkose Labs
  • Accédez à arkoselabs.com pour demander une démonstration.

Description du scénario

L’intégration aux produits Arkose Labs inclut les composants suivants :

• Plateforme Arkose Protect : un service de protection contre les bots et autres abus automatisés.
• Flux utilisateur d’inscription Azure AD B2C : l’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é et compatible avec la fonctionnalité de connecteurs d’API.
  • Cette API valide le côté serveur du jeton de session Arkose Labs.
  • Pour plus d’informations, consultez Vue d’ensemble d’Azure Functions.

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

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 passe le test. 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 la vérification des jetons.
6. Arkose Labs envoie les résultats de la 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 le test réussit, un formulaire d’inscription est envoyé à Azure AD B2C, qui exécute l’authentification.

Demande de démonstration auprès d’Arkose Labs

1. Accédez à arkoselabs.com pour réserver une démonstration.
2. Créez un compte.
3. Accédez à la page de connexion du Portail Arkose.
4. Sur le tableau de bord, accédez aux paramètres du site.
5. Recherchez votre clé publique et votre clé privée. Vous utiliserez ces informations ultérieurement.

Notes

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éation d’un attribut personnalisé ArkoseSessionToken

Pour créer un attribut personnalisé, procédez comme suit :

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

Pour plus d’informations, consultez Définition d’attributs personnalisés dans Azure Active Directory B2C.

Créer un flux utilisateur

Le flux utilisateur est destiné à l’inscription et à la connexion, ou à l’inscription. Le flux utilisateur Arkose Labs s’affiche lors de l’inscription.

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

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

3. Sélectionnez la revendication ArkoseSessionToken.

   

Configuration du code HTML et JavaScript, et de la mise en page

1. Accédez à Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
2. Recherchez le modèle HTML comportant des balises JavaScript <script>. Celles-ci effectuent trois opérations :

• Elles chargent le script Arkose Labs qui affiche son widget et effectue la validation Arkose Labs côté client.

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

• Lorsqu’un utilisateur effectue le test Arkose Labs, sa réponse est vérifiée, et un jeton 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 d’API.

  Notes

  Accédez à developer.arkoselabs.com pour obtenir des instructions côté client. Suivez la procédure indiquée afin d’utiliser le code HTML et JavaScript personnalisé pour votre flux utilisateur.

3. Dans Azure-Samples, modifiez le fichier selfAsserted.html de sorte que <ARKOSE_PUBLIC_KEY> corresponde à la valeur 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 CORS (Cross-Origin Resource Sharing).

5. Créer un compte de stockage.

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

   Notes

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

7. Sur le Portail Azure, accédez à Azure AD B2C.

8. Accédez à Flux utilisateur.

9. Sélectionnez votre flux utilisateur.

10. Sélectionnez Mises en page.

11. Sélectionnez Mise en page de la page d’inscription de compte local.

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

13. Dans Utiliser le contenu de page personnalisé, collez l’URI de votre code HTML personnalisé.

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

    

15. Dans votre flux utilisateur, accédez à Propriétés.

16. Sélectionnez Activer JavaScript.

Pour plus d’informations, consultez Activation de JavaScript et des versions de mise en page dans Azure Active Directory B2C.

Création et déploiement de l’API

Il est supposé dans cette section que vous utilisez Visual Studio Code pour déployer Azure Functions. Vous pouvez vous servir du Portail Azure, d’un terminal ou d’une invite de commandes pour le déploiement.

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

Exécuter l’API localement

1. Dans la barre de navigation de gauche de Visual Studio Code, accédez à l’extension Azure.
2. Sélectionnez le dossier Projet local de votre fonction Azure locale.
3. Appuyez sur F5 ou sélectionnez Déboguer>Commencer le débogage. Cette commande utilise la configuration de débogage créée par Azure Functions.
4. Azure Functions génère des fichiers pour le développement local, et si nécessaire installe les dépendances et les outils Function Core.
5. Dans le volet Terminal de Visual Studio Code, la sortie de l’outil Function Core s’affiche.
6. Lorsque l’hôte démarre, sélectionnez Alt+clic sur l’URL locale dans la sortie.
7. Le navigateur s’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 les variables d’environnement

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

Le nom d’utilisateur et le mot de passe sont stockés sous la forme de variables d’environnement et non dans le référentiel. Pour plus d’informations, consultez Code et tests locaux d’Azure Functions, 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. Les informations d’identification BASIC_AUTH_USERNAME et BASIC_AUTH_PASSWORD permettent d’authentifier l’appel d’API à votre fonction Azure. Sélectionnez des valeurs.

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

4. Accédez à Inscriptions d’applications.

5. Recherchez b2c-extensions-app.

6. Sur la page Vue d’ensemble, copiez l’ID d’application (client).

7. Supprimez les caractères -.

   

Déployer l’application sur le web

1. Déployez votre fonction Azure dans le cloud. Pour plus d’informations, consultez Documentation d’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 Charger les paramètres.

4. Vos variables d’environnement sont chargées dans les paramètres d’application du service d’application. Pour plus d’informations, consultez Paramètres d’application dans Azure.

   Notes

   Vous pouvez gérer votre application de fonction. Pour plus d’informations sur le développement Visual Studio Code pour Azure Functions, consultez Déploiement de fichiers projet.

Configurer et activer le connecteur d’API

1. Créez un connecteur d’API. Cf. Ajout d’un connecteur d’API à un flux utilisateur d’inscription.

2. Activez-le pour votre flux utilisateur.

   

• URL du point de terminaison : l’URL de la fonction que vous avez copiée quand vous avez déployé votre fonction Azure.
• Nom d’utilisateur : le nom d’utilisateur que vous avez défini.
• Mot de passe : le mot de passe que vous avez défini.

3. Dans les paramètres Connecteur d’API de votre flux utilisateur, sélectionnez le connecteur d’API à appeler à l’étape Avant la création de l’utilisateur.

4. L’API valide la valeur ArkoseSessionToken.

   

Tester le flux utilisateur

1. Ouvrez le locataire Azure AD B2C.
2. Sous Stratégies, sélectionnez Flux utilisateur.
3. Sélectionnez le flux utilisateur que vous avez créé.
4. Sélectionnez Exécuter le flux utilisateur.
5. Pour Application, sélectionnez l’application inscrite (JWT dans cet exemple).
6. Pour URL de réponse, sélectionnez l’URL de redirection.
7. Sélectionnez Exécuter le flux utilisateur.
8. Suivez le flux d’inscription.
9. Créez un compte.
10. Déconnectez-vous.
11. Suivez le flux de connexion.
12. Sélectionnez Continuer.
13. Une énigme Arkose Labs apparaît.

Ressources

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