4/6/2022

B2c Single Sign On

95
  1. B2c Single Sign Online
  2. B2c Single Sign On Aol
-->

WordPress Login with Azure (Azure SSO) plugin allows you Login(Single Sign-On) to your WordPress site using your Azure(Azure AD / Azure B2C / Office 365 ) account credentials. This plugin uses OAuth/OpenID Connect protocol to achieve Single Sign.

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:

Azure B2C Single Sign On (SSO) for Your Application miniOrange provides a ready to use solution for Your application. This solution ensures that you are ready to roll out secure access to your application using. Single Sign-On (SSO) enables users to enter their credentials once to sign in and establish a session which can be reused across multiple applications without requiring to authenticate again. Azure Active Directory Synchronize on-premises directories and enable single sign-on; Azure SQL Managed, always up-to-date SQL instance in the cloud; Azure DevOps Services for teams to share. Customers Expect SSO. Today’s customers expect SSO. They might not be able to articulate this.

  • 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.

  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.

Sign

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.

Single

What about calling the API?

Single

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:

  • 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

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

So, you’re considering a single sign-on deployment using Microsoft Azure AD B2C, but how far will the out-of-the-box user flows take you, versus the more functionally rich (but harder to configure) custom polices? In this blog we explore the differences between the two (and the, surprisingly, wide range of scenarios you can address with the built-in flows).

Microsoft Azure AD B2C is a comprehensive platform for single sign-on (SSO), offering state-of-the-art security, standards-based social login, and much more.

When you integrate an application with B2C, you normally invoke B2C user flows (also called ‘user journeys’ and ‘policies’) to take control from the application while the user completes an authentication-related experience, e.g. sign in, sign up or password reset.

These user flows provide a completely custom look and feel, while running in the context of B2C and benefiting from Microsoft’s security-hardened infrastructure.

(NB: All information is correct at time of writing in February 2019, but may change over time.)

Ready-made or truly tailored?

User flows come in two flavours:

Capabilities of built-in flows

Although limited, built-in flows provide a fully-customisable (in terms of look and feel) end-to-end experience which will suit many use cases.

Types of flow available are:

As the screenshot from the Azure Portal shows below, using the Portal you can edit various aspects of built-in flows, including choice of identity providers, attributes collected and passed to the application, and page layouts.

Connecting your application to B2C to run a flow or policy is the same in both cases, and requires very few lines of code (apart from the supplied code libraries). You can work in a number of languages on the application side. In the case of C#.Net, Microsoft provides a sample application on their website. You can use this as a basis for your application, if you’re starting from scratch. More often, organisations will cannibalise this sample app and make use of the code libraries.

Making changes to the look and feel is one of the simplest changes you can make. The template selection looks as follows – as you can see, the admin user has a drop down selection:

Once you have made your selection, you can run the policy to see your change. Here’s the “ocean blue”:

…and here’s the “slate gray”:

…but of course you can fully customise the page look and feel using your own HTML, CSS and JavaScript.

Capabilities of custom policies

B2c Single Sign Online

Custom polices are programmable, so in theory offer unlimited options for customisation of not only the user interface but the logic employed in the authentication experience.

Here are some examples of what you can achieve with custom policies (in addition to all of the above types of built-in flows):

Editing a custom policy isn’t easy. They do not have the same point-and-click interface as the built-in flows; logic is created by building XML into a custom policy XML document, which is then uploaded into the Azure Portal.

However, using the concept of “Journey Steps”, you can add any number of steps (for example, if you wanted to capture the user’s acceptance of your terms of service before they finish registering, you can do that).

This gives you a flexible authentication experience within the secure framework of Microsoft’s B2C service.

Conclusion

Built-in flows offer entry-level functionality, but can present an equivalent experience to custom policies in terms of look and feel, and can therefore provide an industrial-strength ‘minimum viable product’ with all the benefits of single sign-on and world-beating security measures.

For organisations contemplating more complex authentication journeys, it helps to start with custom policies, as these can then be enhanced as requirements become more complex.

Single sign-on configuration b2c

B2c Single Sign On Aol

To find out more about Azure AD B2C, download our free e-Guide to delve into its security benefits.