B2c Single Sign On

WordPress - Azure B2c Setup Guide WordPress SAML SP Single Sign-On plugin gives the ability to enable SAML Single Sign-On for your WordPress sites. Our plugin is compatible with all the SAML compliant. In this video series, Azure Active Directory Program Manager Stuart Kwan explains the inner workings of authentication using web single-sign on.

In this sample tutorial, learn how to integrate Azure Active Directory (AD) B2C with Strata's Maverics Identity Orchestrator.Maverics Identity Orchestrator extends Azure AD B2C to protect on-premises applications. It connects to any identity system, transparently migrates users and credentials, synchronizes policies and configurations, and abstracts authentication and session management. Using Strata enterprises can quickly transition from legacy to Azure AD B2C without rewriting applications. The solution has the following benefits:

• Customer Single Sign-On (SSO) to on-premises hybrid apps: Azure AD B2C supports customer SSO with Maverics Identity Orchestrator. Users sign in with their accounts that are hosted in Azure AD B2C or social Identity provider (IdP). Maverics extends SSO to apps that have been historically secured by legacy identity systems like Symantec SiteMinder.

• Extend standards-based SSO to apps without rewriting them: Use Azure AD B2C to manage user access and enable SSO with Maverics Identity Orchestrator SAML or OIDC Connectors.

• Easy configuration: Azure AD B2C provides a simple step-by-step user interface for connecting Maverics Identity Orchestrator SAML or OIDC connectors to Azure AD B2C.

Prerequisites

To get started, you'll need:

• An Azure AD subscription. If you don't have a subscription, you can get a free account.

• An Azure AD B2C tenant that's linked to your Azure subscription.

• An instance of Azure Key Vault to store secrets that are used by Maverics Identity Orchestrator. It's used to connect to Azure AD B2C or other attribute providers such as a Lightweight Directory Access Protocol (LDAP) directory or database.

• An instance of Maverics Identity Orchestrator that is installed and running in an Azure virtual machine or the on-premises server of your choice. For information about how to get the software and access to the installation and configuration documentation, contact Strata

• An on-premises application that you'll transition from a legacy identity system to Azure AD B2C.

Scenario description

Strata's Maverics integration includes the following components:

• Azure AD B2C: The authorization server that's responsible for verifying the user's credentials. Authenticated users may access on-premises apps using a local account stored in the Azure AD B2C directory.

• An external social or enterprise IdP: Could be any OpenID Connect provider, Facebook, Google, or GitHub. See information on using external IdPs with Azure AD B2C.

• Strata's Maverics Identity Orchestrator: The service that orchestrates user sign-on and transparently passes identity to apps through HTTP headers.

The following architecture diagram shows the implementation.

Get Maverics Identity Orchestrator

To get the software you'll use to integrate your legacy on-premises app with Azure AD B2C, contact Strata. After you get the software, follow the steps below to determine Orchestrator-specific prerequisites and perform the required installation and configuration steps.

Configure your Azure AD B2C tenant

1. Register your application

   a. Register the Orchestrator as an application in Azure AD B2C tenant.

   Note

   You'll need the tenant name and identifier, client ID, client secret, configured claims, and redirect URI later when you configure your Orchestrator instance.

   b. Grant Microsoft MS Graph API permissions to your applications. Your application will need the following permissions: offline_access, openid.

   c. Add a redirect URI for your application. This URI will match the oauthRedirectURL parameter of your Orchestrator's Azure AD B2C connector configuration, for example, https://example.com/oidc-endpoint.

2. Create a user flow: Create a sign-up and sign-in user flow.

3. Add an IdP: Choose to sign in your user with either a local account or a social or enterprise IdP.

4. Define user attributes: Define the attributes to be collected during sign-up.

5. Specify application claims: Specify the attributes to be returned to the application via your Orchestrator instance. The Orchestrator consumes attributes from claims returned by Azure AD B2C and can retrieve additional attributes from other connected identity systems such as LDAP directories and databases. Those attributes are set in HTTP headers and sent to the upstream on-premises application.

Configure Maverics Identity Orchestrator

In the following sections, we'll walk you through the steps required to configure your Orchestrator instance. For additional support and documentation, contact Strata.

Maverics Identity Orchestrator server requirements

You can run your Orchestrator instance on any server, whether on-premises or in a public cloud infrastructure by provider such as Azure, AWS, or GCP.

• OS: REHL 7.7 or higher, CentOS 7+

• Disk: 10 GB (small)

• Memory: 16 GB

• Ports: 22 (SSH/SCP), 443, 80

• Root access for install/administrative tasks

• Maverics Identity Orchestrator runs as user maverics under systemd

• Network egress from the server hosting Maverics Identity Orchestrator with the ability to reach your Azure AD tenant.

Install Maverics Identity Orchestrator

1. Obtain the latest Maverics RPM package. Place the package on the system on which you'd like to install Maverics. If you're copying the file to a remote host, SCP is a useful tool.

2. To install the Maverics package, run the following command replacing your filename in place of maverics.rpm.

   sudo rpm -Uvf maverics.rpm

   By default, Maverics is installed in the /usr/local/bin directory.

3. After installing Maverics, it will run as a service under systemd. To verify Maverics service is running, run the following command:

   sudo service maverics status

If the Orchestrator installation was successful, you should see a message similar to this:

4. If the Maverics service fails to start, execute the following command to investigate the problem:

   journalctl --unit=maverics.service --reverse

   The most recent log entry will appear at the beginning of the output.

After installing Maverics, the default maverics.yaml file is created in the /etc/maverics directory.

Configure your Orchestrator to protect the application. Integrate with Azure AD B2C, store, and retrieve secrets from Azure Key Vault. Define the location where the Orchestrator should read its configuration from.

Supply configuration using environment variables

Provide config to your Orchestrator instances through environment variables.

MAVERICS_CONFIG

This environment variable tells the Orchestrator instance which YAML configuration files to use and where to find them during startup or restarts. Set the environment variable in /etc/maverics/maverics.env.

Create the Orchestrator's TLS configuration

The tls field in your maverics.yaml declares the transport layer security configurations your Orchestrator instance will use. Connectors can use TLS objects and the Orchestrator server.

The maverics key is reserved for the Orchestrator server. All other keys are available and can be used to inject a TLS object into a given connector.

Configure the Azure AD B2C Connector

Orchestrators use Connectors to integrate with authentication and attribute providers. In this case, this Orchestrators App Gateway uses the Azure AD B2C connector as both an authentication and attribute provider. Azure AD B2C uses the social IdP for authentication and then acts as an attribute provider to the Orchestrator, passing attributes in claims set in HTTP headers.

This Connector's configuration corresponds to the app registered in the Azure AD B2C tenant.

1. Copy the client ID, secret, and redirect URI from your app config in your tenant.

2. Give your Connector a name, shown here as azureADB2C, and set the connector type to be azure. Take note of the Connector name as this value is used in other configuration parameters below.

3. For this integration, the authType should be set to oidc.

4. Set the client ID you copied in step 1 as the value for the oauthClientID parameter.

5. Set the client secret you copied in step 1 as the value for the oauthClientSecret parameter.

6. Set the redirect URI you copied in step 1 as the value for the oauthRedirectURL parameter.

7. The Azure AD B2C OIDC Connector uses the well-known OIDC endpoint to discover metadata, including URLs and signing keys. Set the value of oidcWellKnownURL to your tenant's endpoint.

Define Azure AD B2C as your authentication provider

An authentication provider determines how to do authentication for a user who has not presented a valid session as part of the app resource request. Configuration in your Azure AD B2C tenant determines how to challenge a user for credentials and apply additional authentication policies. For example, to require a second factor to complete the authentication process and decide which claims should be returned to the Orchestrator App Gateway after authentication succeeds.

The value for the authProvider must match your Connector's name value.

Protect your on-premises app with an Orchestrator App Gateway

The Orchestrator's App Gateway configuration declares how Azure AD B2C should protect your application and how users should access the app.

1. Create a name for your App gateway. You can use a friendly name or fully qualified hostname as an identifier for your app.

2. Set the location. The example here uses the app's root /, however, can be any URL path of your application.

3. Define the protected application in upstream using the host:port convention: https://example.com:8080.

4. Set the values for error and unauthorized pages.

5. Define the HTTP header names and attribute values that must be provided to the application to establish authentication and control access to the app. Header names are arbitrary and typically correspond to the configuration of the app. Attribute values are namespaced by the Connector that supplies them. In the example below, the values returned from Azure AD B2C are prefixed with the Connector name azureADB2C where the suffix is the name of the attribute that contains the required value, for example given_name.

6. Set the policies to be evaluated and enforced. Three actions are defined: allowUnauthenticated, allowAnyAuthenticated, and allowIfAny. Each action is associated to a resource and the policy is evaluated for that resource.

Note

Both headers and policies use JavaScript or GoLang service extensions to implement arbitrary logic that significantly enhances the default capabilities.

Use Azure Key Vault as your secrets provider

It's important to secure the secrets your Orchestrator uses to connect to Azure AD B2C and any other identity system. Maverics will default to loading secrets in plain text out of maverics.yaml, however, in this tutorial, you'll use Azure Key Vault as the secrets provider.

Follow the instructions to create a new Key Vault that your Orchestrator instance will use as a secrets provider. Add your secrets to your vault and take note of the SECRET NAME given to each secret. For example, AzureADB2CClientSecret.

To declare a value as a secret in a maverics.yaml config file, wrap the secret with angle brackets:

The value specified within the angle brackets must correspond to the SECRET NAME given to secret in your Azure Key Vault.

To load secrets from Azure Key Vault, set the environment variable MAVERICS_SECRET_PROVIDER in the file /etc/maverics/maverics.env, with the credentials found in the azure-credentials.json file, using the following pattern:

MAVERICS_SECRET_PROVIDER='azurekeyvault://<KEYVAULT NAME>.vault.azure.net?clientID=<APPID>&clientSecret=<PASSWORD>&tenantID=<TENANT>'

Put everything together

Here is how the Orchestrator's configuration will appear when you complete the configurations outlined above.

Test the flow

1. Navigate to the on-premises application url, https://example.com/sonar/dashboard.

2. The Orchestrator should redirect to the page you configured in your user flow.

3. Select the IdP from the list on the page.

4. Once you're redirected to the IdP, supply your credentials as requested, including an MFA token if required by that IdP.

5. After successfully authenticating, you should be redirected to Azure AD B2C, which forwards the app request to the Orchestrator redirect URI.

6. The Orchestrator evaluates policies, calculates headers, and sends the user to the upstream application.

7. You should see the requested application.

Next steps

For additional information, review the following articles:

This tutorial shows you how to use Azure Active Directory B2C (Azure AD B2C) to sign up and sign in users in a single-page application (SPA) using either:

• OAuth 2.0 authorization code flow (using MSAL.js 2.x)
• OAuth 2.0 implicit grant flow (using MSAL.js 1.x)

In this tutorial, the first in a two-part series:

• Add a reply URL to an application registered in your Azure AD B2C tenant
• Download a code sample from GitHub
• Modify the sample application's code to work with your tenant
• Sign up using your sign-up/sign-in user flow

The next tutorial in the series enables the web API portion of the code sample.

If you don't have an Azure subscription, create a free account before you begin.

Prerequisites

You need the following Azure AD B2C resources in place before continuing with the steps in this tutorial:

• Application registered in your tenant
• User flows created in your tenant

Additionally, you need the following in your local development environment:

• Visual Studio Code or another code editor

Update the application

In the second tutorial that you completed as part of the prerequisites, you registered a single-page application in Azure AD B2C. To enable communication with the code sample in this tutorial, add a reply URL (also called a redirect URI) to the application registration.

To update an application in your Azure AD B2C tenant, you can use our new unified App registrations experience or our legacy Applications (Legacy) experience. Learn more about the new experience.

1. Sign in to the Azure portal.
2. Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
3. In the left menu, select Azure AD B2C. Or, select All services and search for and select Azure AD B2C.
4. Select App registrations, select the Owned applications tab, and then select the spaapp1 application.
5. Under Single-page Application, select the Add URI link, then enter http://localhost:6420.
6. Select Save.
7. Select Overview.
8. Record the Application (client) ID for use in a later step when you update the code in the single-page web application.

1. Sign in to the Azure portal.
2. Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
3. In the left menu, select Azure AD B2C. Or, select All services and search for and select Azure AD B2C.
4. Select App registrations, select the Owned applications tab, and then select the spaapp1 application.
5. Under Single-page Application, select the Add URI link, then enter http://localhost:6420.
6. Under Implicit Grant, select the checkboxes for Access Tokens and ID Tokens if not already selected and then select Save.
7. Select Overview.
8. Record the Application (client) ID for use in a later step when you update the code in the single-page web application.

1. Sign in to the Azure portal.
2. Make sure you're using the directory that contains your Azure AD B2C tenant by selecting the Directory + subscription filter in the top menu and choosing the directory that contains your tenant.
3. Select All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.
4. Select Applications (Legacy), and then select the spaapp1 application.
5. Under Reply URL, add http://localhost:6420.
6. Select Save.
7. On the properties page, record the Application ID. You use the app ID in a later step when you update the code in the single-page web application.

Get the sample code

In this tutorial, you configure a code sample that you download from GitHub to work with your B2C tenant. The sample demonstrates how a single-page application can use Azure AD B2C for user sign-up and sign-in, and to call a protected web API (you enable the web API in the next tutorial in the series).

• MSAL.js 2.x authorization code flow sample:

  Download a zip file or clone the sample from GitHub:

• MSAL.js 1.x implicit flow sample:

  Download a zip file or clone the sample from GitHub:

Update the sample

Now that you've obtained the sample, update the code with your Azure AD B2C tenant name and the application ID you recorded in an earlier step.

1. Open the authConfig.js file inside the App folder.
2. In the msalConfig object, find the assignment for clientId and replace it with the Application (client) ID you recorded in an earlier step.
3. Open the policies.js file.
4. Find the entries under names and replace their assignment with the name of the user-flows you created in an earlier step, for example B2C_1_signupsignin1.
5. Find the entries under authorities and replace them as appropriate with the names of the user-flows you created in an earlier step, for example https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
6. Find the assignment for authorityDomain and replace it with <your-tenant-name>.b2clogin.com.
7. Open the apiConfig.js file.
8. Find the assignment for b2cScopes and replace the URL with the scope URL you created for the Web API, for example b2cScopes: ['https://<your-tenant-name>.onmicrosoft.com/helloapi/demo.read'].
9. Find the assignment for webApi and replace the current URL with the URL where you deployed your Web API in Step 4, for example webApi: http://localhost:5000/hello.

1. Open the authConfig.js file inside the JavaScriptSPA folder.
2. In the msalConfig object, find the assignment for clientId and replace it with the Application (client) ID you recorded in an earlier step.
3. Open the policies.js file.
4. Find the entries under names and replace their assignment with the name of the user-flows you created in an earlier step, for example B2C_1_signupsignin1.
5. Find the entries under authorities and replace them as appropriate with the names of the user-flows you created in an earlier step, for example https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
6. Open the apiConfig.js file.
7. Find the assignment for b2cScopes and replace the URL with the scope URL you created for the Web API, for example b2cScopes: ['https://<your-tenant-name>.onmicrosoft.com/helloapi/demo.read'].
8. Find the assignment for webApi and replace the current URL with the URL where you deployed your Web API in Step 4, for example webApi: http://localhost:5000/hello.

Your resulting code should look similar to following:

authConfig.js:

policies.js:

apiConfig.js:

authConfig.js:

policies.js:

apiConfig.js:

Run the sample

1. Open a console window and navigate to the directory containing the sample.

   • For MSAL.js 2.x authorization code flow sample:

   • For MSAL.js 1.x implicit flow sample:

2. Run the following commands:

   The console window displays the port number of the locally running Node.js server:

3. Browse to http://localhost:6420 to view the web application running on your local machine.

Sign up using an email address

This sample application supports sign up, sign in, and password reset. In this tutorial, you sign up using an email address.

Azure B2c Single Sign On Configuration

1. Select Sign In to initiate the B2C_1_signupsignin1 user flow you specified in an earlier step.

2. Azure AD B2C presents a sign-in page that includes a sign up link. Since you don't yet have an account, select the Sign up now link.

3. The sign up workflow presents a page to collect and verify the user's identity using an email address. The sign up workflow also collects the user's password and the requested attributes defined in the user flow.

   Use a valid email address and validate using the verification code. Set a password. Enter values for the requested attributes.

4. Select Create to create a local account in the Azure AD B2C directory.

When you select Create, the application shows the name of the signed in user.

If you'd like to test sign-in, select the Sign Out button, then select Sign In and sign in with the email address and password you entered when you signed up.

What about calling the API?

If you select the Call API button after signing in, you're presented with the sign-up/sign-in user flow page instead of the results of the API call. This is expected because you haven't yet configured the API portion of the application to communicate with a web API application registered in your Azure AD B2C tenant.

At this point, the application is still trying to communicate with the API registered in the demo tenant (fabrikamb2c.onmicrosoft.com), and because you're not authenticated with that tenant, the sign-up/sign-in page is displayed.

Move on to the next tutorial in the series in to enable the protected API (see the Next steps section).

Next steps

In this tutorial, you configured a single-page application to work with a user flow in your Azure AD B2C tenant to provide sign up and sign in capability. You completed these steps:

B2c Single Sign On Aol

• Added a reply URL to an application registered in your Azure AD B2C tenant
• Downloaded a code sample from GitHub
• Modified the sample application's code to work with your tenant
• Signed up using your sign-up/sign-in user flow

Single Sign-on Configuration B2c

Now move on to the next tutorial in the series to grant access to a protected web API from the SPA: