Getting started with azure-active-directory

Remarks#

This section provides an overview of what azure-active-directory is, and why a developer might want to use it.

It should also mention any large subjects within azure-active-directory, and link out to the related topics. Since the Documentation for azure-active-directory is new, you may need to create initial versions of those related topics.

Installation or Setup

Detailed instructions on getting azure-active-directory set up or installed.

Azure Active Directory B2C - Setup

1. Create an Azure AD B2C Directory

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

2. Register your 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 https://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. Create a sign-up or sign-in policy

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

4. Create a password reset policy

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

Customize the Azure AD B2C user interface

The Azure AD B2C login screen can be customized to suit our branding. Refer Customizing the UI

Refer https://github.com/NewtonJoshua/Azure-ADB2C-Angularjs-sample

In this sample we have two customized UI screens,

• AD B2C Sign in ansd Sign up page: adCustomPages/unified.html
• AD B2C Password reset page: adCustomPages/resetpassword.html

In adCustomPages/unified.html, at line 442 and 445, enter your tenantName, password-reset-policy and clientId

The pages should be uploaded in a blob and their url should be referred in the Azure AD B2C policies.

• Create a storage account as mentioned in Upload the sample content to Azure Blob Storage
• Upload the sample AD Pages in the container and note down their url.
• For the created Blob service Storage account create a CORS rule with ’*’ as ALLOWED ORIGINS. Select all in ALLOWED METHODS. Enter * for ALLOWED HEADERS and EXPOSED HEADERS as well.
• Customize your policy

Now in your application you can see the customized UI.