Skip to main content

Secure a Web App Using Azure AD B2C

About 3 min

Enable SSO and Granular Access Control For A Header-Based Web App with Microsoft Azure Active Directory (AD) B2C

Preview

We'll be delving into how to leverage the Datawiza Access Proxy (DAP) to incorporate Single Sign On (SSO), Multi-Factor Authentication (MFA), and granular access control into a web application using Azure AD B2C. This tutorial is designed specifically to cater to two primary scenarios:

  1. You are planning to migrate your header-based authentiaiton (also known as pre-authentication or pre-auth) apps from established identity providers including but not limited to: CA SiteMinder, IBM Security Access Manager (ISAM) or IBM Tivoli Access Manager, Oracle Access Manager, NetIQ, ForgeRock, Ping Identity, RSA, Okta, and Auth0, towards Azure AD B2C.

  2. You are in search of a low-code or no-code solution for efficiently integrating Azure AD B2C into your web applications, unconstrained by the language they're built in, be it ASP .Net, JAVA, Python, PHP, Node.js, or Golang.

In this tutorial, we will use DAP's sidecar deployment mode (DAP supports gateway mode as well), which means DAP and this app are running on the same server.

  • The application will run on localhost:3001.
  • The DAP will run on localhost:9772, which means the traffic to the app will reach DAP (running on port 9772) first and then be proxied to the application (running on port 3001).
  • We will provide the docker images for the DAP and this header-based application.

Part I: Azure AD B2C Configuration

You will need to register a Web application and configure a Sign up and sign in user flow in Azure management portal and get the following values:

  • B2C Domain
  • Tenant ID
  • User Flow Name
  • Application (client) ID
  • Client Secret

These values will later be used to set up Datawiza Access Proxy (DAP) in the Datawiza Cloud Management Console (DCMC). Follow IdP Configuration Guide: Microsoft Azure AD B2C for instructions on how to obtain those keys/values.

Part II: Create Application on Datawiza Cloud Management Console (DCMC)

You need to create an application and generate a key pair of (PROVISIONING_KEY, PROVISIONING_SECRET) for this app on the DCMC.

Follow Step2 : Datawiza Cloud Management Console to configure.

For Azure AD B2C, the IdP configuration should be: Web App Azure AD B2C SSO | Azure AD B2C DCMC IdP configuration

Part III: Run DAP With a Header-Based Application

You can use either Docker or Kubernetes to run DAP. The following is an example docker-compose.yml file. You may need to login to our container registry to download the images of DAP and the header-based app. See Step3 : Configure DAP and SSO Integration for more details or Deploy DAP with Kubernetes for Kubernetes-specific instructions.

version: '3'

services:
  datawiza-access-proxy:
    image: registry.gitlab.com/datawiza/access-proxy
    container_name: datawiza-access-proxy
    restart: always
    ports:
      - "9772:9772"
    environment:
      PROVISIONING_KEY: #############################
      PROVISIONING_SECRET: #############################

  header-based-app:
    image: registry.gitlab.com/datawiza/header-based-app
    container_name: ab-demo-header-app
    restart: always
    environment:
      CONNECTOR: B2C
    ports:
      - "3001:3001"

After executing docker-compose -f docker-compose.yml up, the header-based app should have SSO enabled with Azure AD B2C. Open a browser and type in http://localhost:9772/. You should see the Azure AD B2C login page as follows: Web App Azure AD B2C SSO | DAP with Azure AD B2C

Part IV: Sign Up and Sign in

Click Sign up now, input the needed information. Then click Send Verification Code: Web App Azure AD B2C SSO | Azure AD B2C Sign Up and Sign In Note down the verification code in your email: Web App Azure AD B2C SSO | Azure AD B2C Sign Up and Sign In Input the verification code and click Verify code: Web App Azure AD B2C SSO | Azure AD B2C Sign Up and Sign In Click Create after verification success: Web App Azure AD B2C SSO | Azure AD B2C Sign Up and Sign In Then, you will be redirected to proxied application as the user just created: Web App Azure AD B2C SSO | Azure AD B2C Sign Up and Sign In

Part V: Pass User Attributes to the Header-Based App

DAP gets user attributes from IdP and can pass the user attributes to the application via header or cookie.

Follow the instructions of Step4 : Pass User Attributes to pass the user attributes to the header-based app, which is expecting:

  • email
  • firstname
  • lastname

After successfully configuring the user attributes, you should see the green check sign for each of the user attributes as follows: Web App Azure AD B2C SSO | Azure AD B2C with DCMC attributes