Azure AD B2C embedded login

Use this guide to configure the WPO365 plugin to support the Azure AD B2C embedded login experience.

Recently, Microsoft has added a preview feature for embedded sign-up or sign-in experience (see https://learn.microsoft.com/en-us/azure/active-directory-b2c/embedded-login for configuration details). This feature allows for a simpler sign-up or sign-in experience and you avoid redirecting the users to a separate sign-up or sign-in page, or generating a pop-up window, by using an inline frame <iframe> HTML element.

Starting with version 20.x the premium paid extension WPO365 | LOGIN+ supports (and both SYNC and INTRANET bundles support) embedded login for Azure AD B2C and a number of changes have been implemented to support this.

Important Before you continue make sure that you have already configured the WPO365 plugin to support Azure AD B2C based Single Sign-on as explained in this article https://docs.wpo365.com/article/130-azure-ad-b2c-based-single-sign-on-for-wordpress.

Prerequisites

Before you configure your website for Azure AD B2C embedded login, you should have ensured yourself, that you meet the prerequisites summed up by Microsoft.

You are using Custom policies and not the out-of-the-cloud User flows.
You have enabled custom domains for your policies.

Configure Azure AD B2C embedded login

What follows below is an reference implementation of how the WPO365 plugin can be used to implement Azure AD B2C embedded login. There is certainly other possibilities and you should experiment with your website, Azure AD B2C custom policies and your website's user experience in general, to find the optimal solution for your website.

To embed the Azure AD B2C login experience in your own website, you need in total three website pages:

Login page A page where the <iframe> i.e. the Azure AD B2C login experience will be embedded.
Embed page A page that will be the initial source of the <iframe> and that will redirect the user to Azure AD B2C's login experience when it is initially loaded.
Completed page A page that will cause the parent of the <iframe> to load a specific page e.g. the website's home page or the user's account page, once the user successfully authenticated.

Step 1 Custom login domain

Complete the steps below to configure the WPO365 plugin to use a custom login domain for Azure AD B2C.

Enable custom domains for your policies in Azure AD B2C.
Navigate to WP Admin > WPO365 > Single Sign-on and check the option to Use custom domain for B2C login (also see https://docs.wpo365.com/article/167-use-custom-domain-for-b2c-login for further details).

Step 2 Enable support for multiple (custom) policies

Complete the steps below to configure the WPO365 plugin support multiple policies and to be able to configure multiple website buttons for sign-up, sign-in or reset password.

Navigate to WP Admin > WPO365 > Single Sign-on and check the corresponding option to Allow multiple B2C policies (also see https://docs.wpo365.com/article/168-allow-multiple-b2c-policies for further details).

Step 3 Create the Completed page

The Completed page can be created as a simple WordPress post or page and will contain some JavaScript code. This script will cause the top window to load a specific page where the user should be taken after authentication completed successfully.

Simply add a WordPress custom HTML block to a page or post as show below.

<script>
window.top.location.href="https://test1.wpo365.com/"
</script>

Let's assume, for this reference implementation, that this page's URL is https://test1.wpo365.com/oidc-oncomplete/.

Step 4 Create the Embed page

The Embed page can be created as a simple WordPress post or page and is the page that will be configured as the source of the <iframe>. Upon loading this page, it will redirect the user to a specific Azure AD B2C custom policy's end point. For this purpose, the WPO365 plugin makes a simple WordPress short code available [wpo365-b2c-embedded-sc], that takes the following parameters:

Parameter	Description	Example
b2c_policy	The Azure AD custom policy.	B2C_1A_SIGNUP_SIGNIN
redirect_to	The URL where the user should be redirected after authentication was successful.	https://test1.wpo365.com/oidc-oncomplete/
wait	The amount of time in milliseconds the plugin waits before redirecting the user to Azure AD B2C.	400

Simply add a WordPress shortcode block to the page as shown below.

[wpo365-b2c-embedded-sc b2c_policy="B2C_1A_SIGNUP_SIGNIN" redirect_to="https://test1.wpo365.com/oidc-oncomplete/" wait="400"]

Let's assume, for this reference implementation, that this page's URL is https://test1.wpo365.com/oidc-signin-embedded/.

Step 5 Create a login page

The Login page can be created as a simple WordPress post or page and will contain an <iframe> element inside a custom WordPress HTML block where the actual Azure AD B2C login experience will be loaded eventually. Use the Embed page as the source for the <iframe>.

Simply add a WordPress custom HTML block to a page or post as show below.

<iframe id="loginframe" frameborder="0" src="/oidc-signin-embedded/"></iframe>

Step 6 Configure your policy / user-interface

Finally, follow instructions provided by Microsoft to configure your custom policy to support embedded login using https://learn.microsoft.com/en-us/azure/active-directory-b2c/embedded-login.

Test configuration

To test your Azure AD B2C embedded login, simply navigate to the Login page. If you followed the instructions closely, your Azure AD B2C (customized) sign-in experience (or any other experience, depending on the selected custom policy) will be loaded inside the <iframe> element and you should be able to complete your action successfully.