Configuring Power Pages Entra ID B2B Authentication | Extranet User Manager (2024)

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 multi-factor 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 anything 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 Center 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 Center, 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 dropdown menu. Ensure that the local provider is disabled if you only want to use Entra ID as the underlying provider.

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 center for your site.
2. Navigate to the Entra ID portal for the tenant and locate the Application Registration that corresponds to the Application ID.
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
4. Under Authentication, ensure that the correct redirect URLs are specified for your application as Access tokens options 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.

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 replacing the from Step 2, with your Entra ID tenant ID and with the redirect URL 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 ecosystem. 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.