Premiers pas avec azure-active-directory

Installation ou configuration

Instructions détaillées sur la configuration ou l’installation d’azure-active-directory.

Azure Active Directory B2C - Configuration

  1. Créer un répertoire Azure AD B2C

    Note the Domain name, it’ll be used as the tenantName.

  2. Enregistrer votre application Follow the instructions to create an application and enable both Web App and Native client. Refer Register a web application and Register a mobile/native application

    Enter the Reply URL as http://localhost:8100 or any port from wher you’ll be serving your app.

    In Application Claims, select Email Addresses too.

    Note the Application ID . It’ll be used as the clientId.

  3. [Créer une politique d’inscription ou de connexion](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-policies#create-a -politique d’inscription ou de connexion)

    Note the name of the policy. It’ll be used as policy.

  4. [Créer une politique de réinitialisation de mot de passe](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-policies#create-a-password-reset- politique)

    Note the name of the policy. It’ll be used as the password-reset-policy

Personnaliser l’interface utilisateur Azure AD B2C

L’écran de connexion Azure AD B2C peut être personnalisé en fonction de notre image de marque. Reportez-vous à Personnalisation de l’interface utilisateur

Reportez-vous à https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

Dans cet exemple, nous avons deux écrans d’interface utilisateur personnalisés,

  • AD B2C Connexion et page d’inscription : adCustomPages/unified.html
  • Page de réinitialisation du mot de passe AD B2C : adCustomPages/resetpassword.html

Dans adCustomPages/unified.html, aux lignes 442 et 445, entrez votre tenantName, password-reset-policy et clientId

Les pages doivent être chargées dans un blob et leur URL doit être référencée dans les stratégies Azure AD B2C.

  • Créez un compte de stockage comme mentionné dans [Télécharger l’exemple de contenu sur Azure Blob Storage](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui -customization-helper-tool#upload-the-sample-content-to-azure-blob-storage)
  • Téléchargez les exemples de pages AD dans le conteneur et notez leur URL.
  • Pour le compte de stockage du service Blob créé, créez une règle CORS avec ‘*’ comme ORIGINES AUTORISÉES. Sélectionnez tout dans MÉTHODES AUTORISÉES. Entrez * pour les EN-TÊTES AUTORISÉS et les EN-TÊTES EXPOSÉS également.
  • Personnalisez votre politique

Maintenant, dans votre application, vous pouvez voir l’interface utilisateur personnalisée.

Implémentation d'Azure Active Directory B2C avec Hello.js →