Home

Awesome

DNN Azure Active Directory B2C provider

Latest release Build Status

Contents

<a name="requirements"></a>

Requirements

<a name="overview"></a>

Overview

The DNN Azure Active Directory B2C Provider is an Authentication provider for DNN Platform, which uses Azure Active Directory B2C authentication to authorize users.

Sign-in with Azure AD B2C Sign-in with Azure AD B2C

This provider can also retrieve all personal information stored in the user attributes in Azure B2C, so that the DNN account is synchronized with that data. All that information is sent as claims during the login process.

<a name="features"></a>

Features

<a name="installation-and-configuration-guide"></a>

Installation and configuration guide

To setup the provider, you need to complete three steps:

  1. How to setup Azure Active Directory B2C
  2. How to setup the Azure Active Directory application to support role and profile synchronization
  3. How to install the authorization provider in our DNN deployment and how to setup the AD B2C parameters we created before

Following this two steps, you will give access to all your Azure AD B2C users to register and sign-in into your DNN application.

<a name="AADB2C-setup"></a>

Step 1: Azure Active Directory B2C setup

The following are links to official Microsoft documentation for configuring your Azure AD B2C tenant. Once you have completed all these steps, your B2C tenant will be ready to work with your DNN site:

  1. Create an Azure Active Directory B2C tenant
  2. Register an application in Azure Active Directory B2C
    Define the following return urls for your site (i.e https://mysite.com):
    • .../login (and localized urls, e.g. ../en-us/login)
    • .../userprofile (and localized urls, e.g. ../en-us/userprofile)
  3. Create user flows in Azure Active Directory B2C. For the time being only the following user flows are supported:
  4. Optional: Add identity providers to your applications in Azure Active Directory B2C

IMPORTANT: when creating the policies (user flows), ensure the following claims are returned: "given_name", "family_name", "emails", "sub". If not specified, an authorization error will occur when redirected back to the DNN site after login. To do that, on Azure Portal, go to your B2C Directory then click User flows (policies) on the left menu and select your policy. Then click on Application claims and make sure that Given Name, Surname, Email Addresses and User's Object ID are checked.

<a name="AAD-setup"></a>

Step 2: How to setup the Azure Active Directory application to support role and profile synchronization

To support the role and profile synchronization by internally using the Microsoft Graph API, a service principal is needed to call the API. To setup the service principal:

  1. Go to https://portal.azure.com to setup the required applications on your Azure Active Directory. You need to use the user credentials of a user with at least "Service Admin" role. Note that this application is different from the one created previously on the B2C section, is a regular application on the Azure AD, not a B2C application.

  2. In the left-hand navigation pane, click the Azure Active Directory service, click App registrations (Legacy), and click New application registration.

  3. When the Create page appears, enter your application's registration information:

    • Name: Enter a meaningful application name. This can be any name you want and is simply how you will identify the application in your Azure Active Directory (i.e. "My DNN MS Graph Application").
    • Application type: Select "Web app / API" (notice that Web Applications and Web API’s are considered the same type of application as far as Azure AD is concerned)
    • Sign-On URL: This is the URL where user can sign in and use your app. In a typical DNN site, this should be something like "http://mysite.com/Login". You can change this URL later.

  4. <a name="applicationid"></a> When finished, click Create. Azure AD assigns a unique Application ID to your application, and you're taken to your application's main registration page.

  5. Click on the name of the app we've just created and then on "All settings" > "API permissions" > "Microsoft Graph". Ensure that the app has, at least the following API Permissions over the MS Graph API:

    • Delegated
      • offline_access
      • openid
    • Application
      • Application.Read.All
      • Group.Read.All
      • GroupMember.Read.All
      • User.Read.All

    If you want to use the User Management module, to manage B2C users from the DNN UI, you should also setup these other permissions:

    • Application
      • Group.ReadWrite.All
      • GroupMember.ReadWrite.All
      • User.ReadWrite.All

  6. Click on the Grant permissions button and then click on "Yes" to grant the permissions in all the accounts in the current directory.

  7. <a name="getaadkey"></a> Now on the Settings page, under the keys section, create a new key with the desired expiration. Click on Save and then copy the key to a secure location. IMPORTANT: you won't be able to copy this key later, so copy it now or generate a new one when needed.

  8. To support resetting passwords for users thought the User Management module, this application needs permissions to manage the users' passwords. To allow that, on the Azure Portal go to Azure Active Directory > Roles and administrators > Click on 'User administrator' > click on '+ Add assignment' to add your Application ID.

<a name="provider-configuration"></a>

Step 3: DNN provider installation and configuration

It's important to remember that, if you want to use this module, you need a DNN deployment with version 9.3.0 or later.

  1. Download the DNN Azure AD provider from the Releases folder (i.e. AzureAdB2CProvider_01.00.00_Install.zip) https://github.com/intelequia/dnn.azureadb2cprovider/releases
  2. Login into your DNN Platform website as a host user and install the provider from the Host > Extensions page
  3. Use the Install Extension Wizard to upload and install the file you downloaded in step 1. Once installed, you can setup the provider from the new settings page, under the section Azure AD B2C in the Persona Bar:

AAD B2C settings

The settings page is divided into general and advanced settings.

  1. GENERAL SETTINGS

To start, you can simply fill up the general settings:

AAD B2C settings

  1. ADVANCED SETTINGS

For advanced scenarios, check the advanced settings:

AAD B2C advanced settings

  1. MAPPINGS

In this section you can customize the claim mappings between Azure AD B2C claims and DNN properties and attributes:

AAD B2C mappings

<a name="step-4-setup-user-management-module"></a>

Step 4. (Optional) Setup the User Management module

If you want to manage the B2C users directly from the DNN portal, with operations such as creating/modifying/deleting users, changing their B2C roles, or even forcing the password reset, you can use the new Azure AD B2C User Management module. The module needs that the Microsoft Graph Advanced settings have been setup:

AAD B2C User Management module

If everything is setup correctly, the current list of users appears, allowing to add new ones. Note that if the "portalId" claim mapping (user mappings tab) is specified, the list of users will be filtered by the current portal Id.

AAD B2C User Management module

<a name="samples"></a>

Samples

Under the "samples" directory, you will find some samples that will show some integration scenarios, like integration mobile apps with DNN by using Azure AD B2C JWT auth tokens:

For more samples, check:

<a name="building"></a>

Building the solution

Requirements

Install package dependencies

From the command line, enter the <RepoRoot>\DotNetNuke.Authentication.Azure.B2C\AzureADB2C.Web and run the following commands:

  npm install -g webpack
  npm install -g webpack-cli
  npm install -g webpack-dev-server --force
  npm install --force

Debug the client side app

To debug the client side, build the module in debug mode and copy the .dll and .pdb files into your site /bin folder (you can tweak the post build event for such purpose). That will try to load the persona bar bundle script from https://localhost:8080.

The second step is to start the local webpack dev server. To do it, From the command line, enter the <RepoRoot>\DotNetNuke.Authentication.Azure\AzureADB2C.Web and run the following commands:

  webpack-dev-server

Build the module

Now you can build the solution by opening the file DotNetNuke.Authentication.Azure.B2C.sln in Visual Studio. Building the solution in "Release", will generate the React bundle and package it all together with the installation zip file, created under the "\releases" folder.

Additional information

Additional information regarding this sample can be found in Microsoft documentation:

Questions & Issues

Please file any questions or problems with the sample as a github issue. You can also post on StackOverflow with the tag azure-ad-b2c.