Configuring Power Pages Entra ID B2B Authentication

|
Published

Microsoft Power Pages is a low-code development platform designed to help users create, host, and manage business websites with ease, integrating seamlessly with other Microsoft Power Platform tools. Microsoft Entra ID, formerly known as Azure Active Directory (Azure AD), is a comprehensive identity and access management solution used to secure access to applications and resources within an organization. Setting up Entra ID for managing portal authentication is crucial because it provides robust security features, including multifactor authentication and single sign-on, ensuring that only authorized users can access the portal, thus protecting sensitive business data and enhancing user experience.

While it’s essential to manage portal authentication with Entra ID, and fairly easy to do, this approach doesn’t allow one to call any of the Microsoft 365 resources because the security token that gets created as part of that login is unique to Power Pages and can only be used in Power Pages. There might be some parts that you can add through Power Pages, but if you want to do your own customizations, or if you need to do something more creative, you must get to the Graph yourself. This article explains how to do so.

Before digging in, one needs to understand the three management scenarios for Power Pages. The Microsoft Power Pages Admin Centre is a centralized hub for administrators to oversee and manage all aspects of Power Pages sites, including settings, configurations, and site provisioning. The Power Pages Management Portal is a dedicated interface where users can design, customize, and manage their Power Pages sites, allowing for real-time updates and content management. The Power Pages Platform Admin Centre, on the other hand, provides a broader administrative scope, enabling administrators to manage and monitor platform-wide settings, performance metrics, and compliance across multiple Power Pages environments, ensuring optimal functionality and governance.


Step 1 – Configure Azure B2B as an Identity Provider in Power Pages

To set up Azure B2B as an identity provider in Power Pages, you need to take the following steps:

  1. In the Power Pages portal, create and publish your web pages in Power Pages.
  2. Navigate to Security, then Identity Providers and ensure the Azure Active Directory is enabled and set to default by utilizing the “...” to display the drop-down menu. Ensure that the local provider is disabled if you only want to use Entra ID as the underlying provider.
Power Pages Menu Power Pages Identity Providers

Step 2 – Assign Additional Permissions to Client ID

  1. Locate the Application ID provisioned as part of the Power Pages app by navigating to the Power Pages Admin centre for your site.
    Power Pages Site Details
  2. Navigate to the Entra ID portal for the tenant and locate the Application Registration that corresponds to the Application ID.
    Entra ID App Registration
  3. Grant the necessary API permissions required for your integration as the signed-in user. In the example below, email and Sites.Read.All permissions were granted.
    Entra ID Application API Permissions
  4. Under Authentication, ensure that the correct Redirect URLs are specified for your application, and the Access tokens option is selected under Implicit grant and hybrid flows. Depending on your use case, you may need to add your redirect URLs to a single-page application instead of the web platform.
    Entra ID Application Tokens and Redirect URIs configuration


Step 3 – Configuring MSAL to use within Power Pages

  1. Add reference to the MSAL library to your page either by referencing a CDN or local.
  2. Configure the MSAL object by adding the following JavaScript to the page or within a file, and replacing the Application ID, Tenant ID, and Redirect URL with the values you entered in Step 2.


const msalConfig = {
    auth: {
        // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        clientId: "3a7445b8-d4d9-484e-a0c6-d3e00312c32f",
        // Full directory URL, in the form of https://login.microsoftonline.com/
      authority: "https://login.microsoftonline.com/64a54bf1-8d0d-4741-a2ae-36eb0bfa4c58",
      // Full redirect URL, in form of http://localhost:3000
      redirectUri: "https://entraidb2b.powerappsportals.com/directory",
    },
      cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
      system: {
        loggerOptions: {
        loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }
      switch (level) {		
                    case msal.LogLevel.Error:
      console.error(message);
      return;
      case msal.LogLevel.Info:
      console.info(message);
      return;
      case msal.LogLevel.Verbose:
      console.debug(message);
      return;
      case msal.LogLevel.Warning:
      console.warn(message);
      return;		
                }	
            }	
        }	
    }
};

function selectAccount() {
    /**
      * See here for more info on account retrieval:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
      */

    const currentAccounts = myMSALObj.getAllAccounts();
      if (currentAccounts.length === 0) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add choose account code here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
      showWelcomeMessage(username);
    }
}

function getTokenPopup(request) {
    /**
      * See here for more info on account retrieval:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
      */
			
    // request.account = myMSALObj.getAccountByUsername(username);

    return myMSALObj.acquireTokenSilent(request)
        .catch(error => {
            console.warn("silent token acquisition fails. acquiring token using popup");
            if (error) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenPopup(request)
                    .then(tokenResponse => {
                        console.log(tokenResponse);
                        return tokenResponse;
                    }).catch(error => {
                        console.error(error);
                    });
            } else {
                console.warn(error);
            }
        });
}

var tokenResponse;
const myMSALObj = new msal.PublicClientApplication(msalConfig);


In this case, we’re trying to acquire a token silently, but if that fails, it launches a popup window to complete the sign-in process. You can refer to the GitHub documentation for additional methods and usage.


Step 4 – Requesting the Entra ID Token and Making the Request for Content 

  1. Acquire the delegated user token to call the Microsoft Graph from Entra ID utilizing the configuration and functions in Step 3.
  2. Pass the token acquired above to the request as an Authorization header and specify Bearer as the type.

This sample function retrieves all files from a SharePoint library within the General/Committee Documents folder through the Microsoft Graph API.


Summary

Extranet User Manager (EUM) and Microsoft Power Pages work well together to ensure clients are getting the most from their investment with Microsoft. The solutions can combine to create a powerful approach for managing content and data within the Dynamics 365 and Power Platform ecosystems. By leveraging Power Pages' low-code platform and EUM's expertise in secure, seamless user management, clients can maximize their Microsoft investment through simplified website creation, enhanced security, and seamless integration.

The steps outlined above will help you to configure Power Pages so that you can maintain portal authentication with Entra ID, while also unlocking the benefits of a broader set of M365 resources. For key use cases, EUM can help you take even greater advantage of your Microsoft licenses.

Latest Articles