Data from Microsoft Entra to Web Page

Question

Hello,

I created an application on Microsoft Entra and granted it the necessary permissions. I would like to display users on a web page with their first name, last name, email addresses, etc.

I have all the access of the application (access token, tenant id...)

I'd like to have a display like this (like the contacts in Sharepoint) on my Web Page if it's possible.

Could you please tell me how I can do that?

Thank you

Answer 1

Hi @MOUSSAOUI Mohammed , have you used the Graph API? It's a good way to accomplish this. You can follow the linked document for detailed instructions, but the following is a sample code snippet:

// Initialize the MSAL library
const msalConfig = {
  auth: {
    clientId: 'YOUR_CLIENT_ID',
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    redirectUri: 'http://localhost:3000'
  }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);

// Authenticate the user and obtain an access token
const loginRequest = {
  scopes: ['User.Read.All']
};
msalInstance.loginPopup(loginRequest).then(response => {
  const accessToken = response.accessToken;

  // Call the Microsoft Graph API to retrieve a list of users
  const usersEndpoint = 'https://graph.microsoft.com/v1.0/users';
  const usersRequest = new Request(usersEndpoint, {
    headers: new Headers({
      'Authorization': `Bearer ${accessToken}`
    })
  });
  fetch(usersRequest).then(response => {
    return response.json();
  }).then(data => {
    // Parse the JSON response and display the user data on your web page
    const users = data.value;
    users.forEach(user => {
      const firstName = user.givenName;
      const lastName = user.surname;
      const email = user.mail;
      // Display the user data on your web page using HTML and JavaScript
    });

Please let me know if you have any questions and I can help you further.

If this answer helps you please mark "Accept Answer" so other users can reference it.

Thank you,

James