Umbraco OAuth/OIDC Single Sign-On (SSO) with Azure B2C as IDP

Umbraco OAuth/OIDC Single Sign-On (SSO) middleware gives the ability to enable OAuth Single Sign-On for your Umbraco applications. Using Single Sign-On (SSO), you can use only one password to access your Umbraco application and services. Our middleware is compatible with all the OAuth-compliant identity providers such as Cognito, Okta, ADFS, Microsoft365 and many more. Here we will go through a step-by-step guide to configure Single Sign-On (SSO) between Umbraco and AzureAD B2C considering AzureAD B2C as OAuth provider.

Pre-requisites: Download and Installation

• Download the Umbraco OAuth/OIDC middleware.
• For setting up the middleware, extract the umbraco-oauth-oidc-single-sign-on.zip you will find a DLL file called miniorange-oauth-oidc-sso.dll, and a folder called miniOrange-sso-configuration that contains a configuration file called configuration.json.
• Add the miniorange-oauth-oidc-sso.dll reference in your Umbraco application.

• Add the miniOrange-sso-configuration folder to the root folder of your Umbraco application.
• In the Startup.cs file:
• Add the namespace miniOrange.oauth using miniOrange.oauth;
• Update the Umbraco middleware snippet lines in the Startup class, configure method as below: app.UseUmbraco()
    .WithMiddleware(u => {
        u.UseBackOffice();
        u.UseWebsite();
        u.AppBuilder.UseminiOrangeOAuthOIDCSSOMiddleware();
    })
    .WithEndpoints(u => {
        u.UseInstallerEndpoints();
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
});
• Run the Umbraco application when the configuration is done.
• After integration, open your browser and browse the middleware dashboard with the URL below: https://<umbraco-application-base-url>/?ssoaction=config
• If the registration page or login page pops up, you have successfully added the miniOrange Umbraco OAuth/OIDC middleware to your Umbraco application.

Configure Umbraco OAuth Single Sign-On (SSO) using Azure B2C as IDP

1. Configure Azure B2C as IDP

• Copy the Redirect/Callback URL from the plugin and provide it to your OAuth provider to configure it on their side.

• Sign in to Azure portal.
• Go to Home and in the Azure services, select Azure AD B2C.

• Please make sure you are in the Azure AD B2C directory with an active subscription and if not, you can switch to the correct directory.

• In the Essentials tab, you will find the Azure B2C domain name, keep it handy, you will need it later for configuring the Azure B2C tenant name under Umbraco OAuth/OIDC middleware.

  What is a Tenant Name?
  You will need to copy the highlighted domain name portion only as shown in the below screenshot in order to configure the tenant name in the Umbraco OAuth/OIDC middleware.
  Eg. If your domain name is 'exampledomain.onmicrosoft.com', then your tenant name will be 'exampledomain'.



• Now, click on App registrations and then click on the New registration option to create a new Azure B2C application.

• Configure the following options to create a new application.
• Enter a name for your application under the Name text field.
• In supported account types, select 3rd option ‘Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)’
• Select the Web application and enter the Redirect URL from the miniOrange Umbraco OAuth/OIDC middleware and save it under the Redirect URL textbox.
• Click on the Register button to create your application.

• After successful application creation, you will be redirected to the newly created application’s overview page. If not, you can go to the app registrations and search the name of your application and you will find your application in the list.

• Copy your Application ID and keep it handy, you will need it later for configuring the Client ID in Umbraco OAuth/OIDC middleware.

• Now, click on Certificates and secrets and then click on New client secret to generate a client secret. Enter a description and click on the Add button.

• Copy the secret value from certificates & secrets page and keep it handy, you will need it later for configuring the Client Secret under Umbraco OAuth/OIDC middleware.

Step 1.1: Add Users in your Azure B2C application

• In home page, go to the Users tab in the left corner

• Click on New user in the users page

• Select Create Azure AD B2C user. Then, scroll down and click on Email from sign in method and set your password and click create to save the user details to perform test configuration.

Step 1.2: How to create & add Azure B2C Policy

• Go to User Flows tab and then click on New user flow.

• Select a User flow type Sign up and Sign in then click on Create button.

• Fill all the information e.g. Name, Identity providers, etc. Select the User attributes you want to fetch while Signup. Then click on Create button.

• Copy the Policy name this value whenever you need to enter Azure B2C Policy in miniOrange Umbraco OAuth/OIDC middleware.

Step 1.3: Add user claims to your application

• Go to user flows under policies in the left corner. Select the configured policy.

• Select Application claims in settings

• Select the desired attributes to be displayed on the test configuration and save it.

Step 1.4: Configure ID-Token Claims in Azure B2C

• Go to your application in Azure Active Directory and select Token configuration from the left menu.
• Click on Add optional claim and then select ID from the right section.
• Now choose all the attributes you want to fetch while SSO (e.g family_name, given_name, etc) and click on Add button.
• You might see a popup to Turn on the Microsoft Graph profile permission (required for claims to appear in token), enable it, and click on Add button.

You have successfully configured Azure AD B2C as OAuth Provider for achieving user authentication with Umbraco OAuth/OIDC Single Sign-On (SSO) using Azure AD B2C as IDP.

2. Configure Umbraco as SP

• To create a connection between Azure B2C and your Umbraco application, you have to configure Azure B2C as OAuth provider in the middleware.
• Click on the OAuth/OIDC Applications from the navigation bar.
• Click on the Add New Provider button
.
• Select Azure B2C from the Provider List.

• Copy the Redirect/Callback URL from the plugin and provide it to Azure B2C to configure it on their side.

• When you are done configuring AzureAD B2C as OAuth provider, you will get Client ID, Client Secret and all required authentication endpoints.
• Fill the rest acquired details into the corresponding fields.

• Check all the required details and click on Save.

3. Testing OAuth SSO

• After saving the configuration, click on the Test Configuration button to verify if you have configured your AzureAD B2C as OAuth/OIDC provider correctly.
• On successful configuration, you will get attribute names and attribute values on the test configuration window. The below screenshot shows a successful result.

• In case you didn't receive the required details or attributes from your OAuth provider based on the configured scopes, reach out to us at umbracosupport@xecurify.com

4. Select User Login Type

• After the successful test configuration, in the same Provider Settings tab, go to the User Login Type settings.
• Select the User SSO login type based on your requirement, i.e. which type of user is going to perform Single Sign-On login, you may select either BackOffice Login or Member Login and click on Save.

5. Attribute/Role Mapping

• To perform the Single Sign-On login, you need to map the received attribute from the provider to identify the user.
• Go to the Attribute/Role Mapping tab for further configurations.
• In this trial, you would be able to configure the required attributes only, i.e. username and email. Fill in the username and email field with the name of the attribute, you will be receiving. Then, click Save.
• You would also be able to configure the default role for the user. In the same tab, you can select the default role from the dropdown field names Default Role. The options listed in the dropdown menu are based on the SSO Login type you have selected.
• If you are not able to find the list of roles, please check in the Umbraco BackOffice, if you have roles present there or not for the selected SSO Login Type.
• After selecting the roles carefully, click Save.

• Note: This is one of the crucial steps during single sign-on configuration, if you are not able to complete this step or facing any difficulties in understanding the steps, feel free to reach out to us at umbracosupport@xecurify.com.

6. Get the link for SSO and SLO for your Umbraco application

• When all the necessary configuration is completed, you can perform single sign-on through the SSO link.
• You can find the SSO Link in the action dropdown in the application list tab of the middleware.

• Similarly, you can find the single logout (SLO) link in the action dropdown.

You can even configure the Umbraco SAML 2.0 Single Sign-On (SSO) module with any identity provider such as ADFS, Azure AD, Bitium, Centrify, G Suite, JBoss Keycloak, Okta, OneLogin, Salesforce, AWS Cognito, OpenAM, Oracle, PingFederate, PingOne, RSA SecureID, Shibboleth-2, Shibboleth-3, SimpleSAML, WSO2 or even with your own custom identity provider. To check other identity providers, click here.

Additional Resources

• Umbraco SAML Single Sign-On (SSO)
• DNN OAuth Single Sign-On (SSO)
• ASP.NET OAuth Single Sign-On (SSO)
• Frequently Asked Questions (FAQs)