Facing Issue while generating Graph API token in JS/Ajax in Look and feel section of Confluence

Hi Team ,

we are doing some customization in local confluence DC —> in the look and feel section in the general configuration.
we are trying to generate a token for Microsoft Graph API so that we can do searching of users in azure AD with our customisation

In 2 ways we have tried:

(Method 1)

This is the below JS code that was working fine in local VS code to generate the token.

const msal = require("@azure/msal-node");
const clientID = "xxxxxx";
const clientSecret = "xxxxxx";
const tenantID = "xxxxxx";
const config = {
  auth: {
    clientId: clientID,
    clientSecret: clientSecret,
    authority: `https://login.microsoftonline.com/$\{tenantID}`,
  },
};
const cca = new msal.ConfidentialClientApplication(config);
const scope = ["https://graph.microsoft.com/.default"];
cca
  .acquireTokenByClientCredential({
    scopes: scope,
  })
  .then((result) => {
    console.log(result.accessToken);
  })
  .catch((error) => {
    console.log(error);
  });

but in look and feel section it is not working , we tried importing the msal package but it is not happening.

Can you suggest some way or any workaround by which we can make this happen?

(Method 2)

we tried using the AJAX function as well.

const clientId = 'xxxxxx';
const tenantId = 'xxxxxxxx';
const clientSecret = 'xxxx';

 const tokenEndpoint = `https://login.microsoftonline.com/$\{tenantId}/oauth2/v2.0/token`;
$.ajax({
  url: tokenEndpoint,
  method: "POST",
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/x-www-form-urlencoded",
  },
  data: {
    grant_type: "client_credentials",
    client_id: clientId,
    client_secret: clientSecret,
    scope: "https://graph.microsoft.com/.default",
  },
  success: function (response) {
    // The token is in the response.access_token property
    const accessToken = response.access_token;
    console.log(accessToken);
    // Make another AJAX request to use the token
    $.ajax({
      url: graphEndpoint,
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Access-Control-Allow-Origin": corsPolicy,
      },
      success: function (data) {
        // Handle the Graph API response data
        console.log(data);
      },
    });
  },
});

In this method we are getting Cors policy error as mentioned below.
changed “Access-Control-Allow-Origin”: “*” parameter with local confluence localhost:8092 url value as well.

Access to XMLHttpRequest at ‘Sign in to your account’ from origin ‘http://localhost:8092’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Please suggest some workaround or any other way to bypass the cors policy error.