Search code examples
javascriptazureoutlookmicrosoft-graph-apiazure-ad-b2c

How to implement user consent in applications multitenant registered with Azure AD B2 with microsoft graph to access Microsoft Calendar API?

I have tried registering the application on Azure AD B2C by selecting the option "Accounts in any identity provider or organizational directory (for authenticating users with user flows)". I chose this option so that all personal accounts or work accounts from any tenant can log in.

However, selecting this option creates Delegated permissions on Microsoft Graph when adding API permissions only has the option for openid, as in the image below. VIEW IMAGE: Request API Permissions - Microsoft Graph - Delegated permissions type

therefore, I added calendars.read with application permissions type. VIEW IMAGE: Request API Permissions - Microsoft Graph - Application permissions type

The API permission has also been granted admin permission. VIEW IMAGE: Grant admin consent

enter image description here

the dependencies I use are "@azure/msal-browser": "^2.16.1"

and here's how I implemented it into my javascript code:

const msalConfig = {
  auth: {
    clientId: envconfig.REACT_APP_MICROSOFT, //Application (client) ID
    redirectUri: envconfig.REACT_APP_BASE_URL,
    postLogoutRedirectUri: envconfig.REACT_APP_BASE_URL,
  },
  cache: {
    cacheLocation: "localStorage",
  },
};

const msalRequest = { scopes: ["user.read", "calendars.read"] };
const msalClient = new msal.PublicClientApplication(msalConfig);

async function MsalLogin() {
  try {
    const authResult = await msalClient.loginPopup({
      scopes: msalRequest.scopes,
      prompt: "select_account",
    });

    localStorage.setItem("_microsoftAccount", authResult.account.username);

    return authResult;
  } catch (error) {
    console.error("MsalLogin error:", error);
    throw error;
  }
}`

with the configuration above, when I as a user who is a member of a different tenant (Azure AD) tries to enter the application, and displays Need admin approval in the popup. VIEW IMAGE: Need admin approval - error

Question:

What configurations are appropriate to do in an Azure AD B2C environment and how to implement them in JavaScript coding, so that users with work or personal accounts from any tenant can connect their calendars to my application with consent by the user or if possible without requiring approval from any party . So that admins from the user's organization don't have to approve logging into my app?

If anyone understands this, please help. Let me know if there is any other information I should share.

What i have tried:

  • I have tried registering a new application by selecting "Accounts in any organizational directory (Any Microsoft Entra ID tenant – Multitenant)". With this option, delegated permissions have the option to add more api permissions, including calendars.read. After I apply it, it still displays Need admin approval.
  • I have tried to find out about verified publisher to solve this problem, but I am not sure because Azure AD B2C does not have this feature
  • i have tried adding a user flow with type signupsignin, but i don't understand how to implement it, and whether this way will solve my problem.
  • I have tried changing the Admin consent settings by changing to Yes in the Users can request admin consent to apps they are unable to consent to option, but it doesn't work

What i expected :

I want my application to be accessible by any tenant and with personal Microsoft accounts or work accounts. And also I want to use the graph API and make the permissions must be approved from the user's side, so that the admin doesn't need to give permission first so that the popup doesn't appear Need admin approval.

Screenshot of settings in my azure:

Option for add API Permission - User

Solution

  • Note that: Any user singing in will authenticate against their home tenant settings not the application residing tenant. If you are making use of common or organizations to authenticate the user, then make sure the user residing tenant have the proper settings.

    I created an application in Azure B2C tenant by selecting "Accounts in any organizational directory (Any Microsoft Entra ID tenant – Multitenant)" option:

    enter image description here

    Granted below API permissions:

    enter image description here

    The user consent settings the B2C tenant (where the app resides) is set like below:

    enter image description here

    In another directory, I added the user like below:

    enter image description here

    When I tried to sign in with another directory user, I got the same error:

    enter image description here

    Hence to resolve the error, you have to change the user consent settings in the directory where the user resides like below:

    Set Admin consent requests to YES:

    enter image description here

    The user must request for the access:

    enter image description here

    Once the request is approved, the user will be able to sign in successfully

    Otherwise, Grant tenant wide admin consent by signing in as Global administrator (Global Admin of user residing tenant):

    https://login.microsoftonline.com/organizations/v2.0/adminconsent ?client_id=ClientIDofB2CApp&scope=User.Read Calendars.Read&redirect_uri=https://jwt.ms &state=12345

    The user will be able to successfully login:

    enter image description here

    Reference:

    flutter - Azure AAD Need admin approval - Stack Overflow by junnas