How to consume ms graph apis in SPFx using Azure Registered App ??

Hi Prachi,

1. how to use service accpunt as only service accpunt will have access to read outlook properties (read locations, block meeting rooms)

follow this MS article to authenticate a particular user - https://learn.microsoft.com/en-us/graph/auth-v2-user?tabs=http 

to get read only access to the outlook meeting rooms - https://learn.microsoft.com/en-us/exchange/recipients/room-mailboxes?view=exchserver-2019

Permissions lists in general - https://learn.microsoft.com/en-us/graph/permissions-reference

2.   how to connect app to spfx

actually Aman has provided a code sample below, for your ready to use I am attaching a couple of code snippets for ease of your use

Web Part Code (React Example)

src/webparts/myGraphWebPart/MyGraphWebPart.ts

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { MSGraphClient } from '@microsoft/sp-http';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { IMyGraphWebPartProps } from './IMyGraphWebPartProps';
import MyGraphWebPartComponent from './components/MyGraphWebPartComponent';

export default class MyGraphWebPart extends BaseClientSideWebPart {

  public render(): void {
    const element: React.ReactElement = React.createElement(
      MyGraphWebPartComponent,
      {
        graphClient: this.context.msGraphClientFactory.getClient()
      }
    );

    ReactDom.render(element, this.domElement);
  }
}

src/webparts/myGraphWebPart/components/MyGraphWebPartComponent.tsx

import * as React from 'react';
import { MSGraphClient } from '@microsoft/sp-http';

export interface IMyGraphWebPartComponentProps {
  graphClient: Promise;
}

export interface IMyGraphWebPartComponentState {
  userDisplayName: string;
}

class MyGraphWebPartComponent extends React.Component {

  constructor(props: IMyGraphWebPartComponentProps) {
    super(props);
    this.state = {
      userDisplayName: ''
    };
  }

  public componentDidMount(): void {
    this.props.graphClient.then(client => {
      client
        .api('/me')
        .get((error, response: any, rawResponse?: any) => {
          if (response) {
            this.setState({
              userDisplayName: response.displayName
            });
          }
        });
    });
  }

  public render(): React.ReactElement {
    return (
      

        
Welcome, {this.state.userDisplayName}
      
    );
  }
}

export default MyGraphWebPartComponent;

Hi Swesh,

Thank you for helping here!
 

Can you Please suggest how to connect this azure registered app in spfx, i already tried MS Graph explorer to test these apis but i want to know how to connect app to spfx and how to use service accpunt as only service accpunt will have access to read outlook properties (read locations, block meeting rooms)

 

Than you in advance for help!!

Hi Aman,

Thank you for posting reply!

I have two queries regarding the same.

1. In step 2, Regarding APi permissions, do we need to have them in organizational level,??? I have only User. Read.all permissions under api access in organizational level and when i try to use msgraphclientv3 to send permissions it does not get displayed in sharepoint admin center.

2. I want to block meeting room fetch locations on behalf of service account as we can not give permissions to all users to access outlook, how can i use this in spfx. How to connect azure app in spfx, where to add app id, secret?? How to use service account instead of current ligged in user context,???

Thank you in advance!!

Hi Prachi,

To connect your SPFx (SharePoint Framework) web part with Microsoft Graph and manage Outlook locations, meeting rooms, and meeting operations (block, cancel, edit), follow these steps:

1. Set Up Microsoft Graph Permissions

• You've already registered an Azure AD app. Make sure it has the necessary Microsoft Graph API permissions, such as:
  • Calendars.ReadWrite (to read and modify calendars, including meetings)
  • User.ReadBasic.All (to read user profiles, needed for accessing locations/rooms)
  • MailboxSettings.ReadWrite (to access mailbox settings, if required)

These can be delegated (for user-based permissions) or application permissions (for service account scenarios).

2. Add Azure AD App to SharePoint

• Go to Azure AD App Registration for your Azure app.
• Note down the Client ID, Tenant ID, and Client Secret.
• In your SharePoint Admin Center, go to API Access.
• Add the API permissions for Microsoft Graph that you require. This ensures that the SPFx web part will have access to those permissions.

3. Install Required NPM Packages
You'll need the following packages in your SPFx solution:

npm install @pnp/sp @pnp/graph @pnp/logging @pnp/common @pnp/odata @microsoft/microsoft-graph-types --save

• @pnp/sp and @pnp/graph handle interaction with SharePoint and Microsoft Graph.
• @microsoft/microsoft-graph-types provides TypeScript types for Microsoft Graph.

4. Configure Microsoft Graph Client
In your SPFx web part, you need to configure the Microsoft Graph client. The @pnp/graph package helps with this.

Example to get started:

import { graph } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/calendars";
import { MSGraphClient } from '@microsoft/sp-http';

public async getOutlookLocations(): Promise {
    // Make sure you have a valid MSGraphClient context
    this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void => {
            client.api("/me/findRooms")
                .get((error, response: any) => {
                    if (error) {
                        console.error(error);
                        return;
                    }

                    console.log("Available rooms: ", response.value);
                });
        });
}

• The getOutlookLocations method fetches available meeting rooms using the Microsoft Graph /me/findRooms endpoint.
• You can modify this to fetch other meeting details like edit or cancel meeting using the calendar API.

5. Blocking/Managing Meeting Rooms and Events

Use Microsoft Graph API's Calendar endpoint to block rooms or manage meetings:

• To create/edit a meeting in a specific room, use:

client.api('/me/events').post({
  subject: 'Your Meeting',
  body: {
    contentType: 'HTML',
    content: 'Meeting Content'
  },
  start: {
    dateTime: '2024-09-20T14:00:00',
    timeZone: 'Pacific Standard Time'
  },
  end: {
    dateTime: '2024-09-20T15:00:00',
    timeZone: 'Pacific Standard Time'
  },
  location: {
    displayName: 'Conference Room'
  },
  attendees: [{
    emailAddress: {
      address: '[email protected]',
      name: 'Conference Room'
    },
    type: 'required'
  }]
});

• To cancel a meeting, you would perform a DELETE request on the event's /id.

6. Handling Authentication in SPFx
If you're using delegated permissions (i.e., the service account), you must authenticate the user.

• Use AADHttpClient for automatic handling of OAuth tokens in your SPFx environment:

this.context.aadHttpClientFactory
  .getClient('https://graph.microsoft.com')
  .then((client: AadHttpClient) => {
    client
      .get('https://graph.microsoft.com/v1.0/me/events', AadHttpClient.configurations.v1)
      .then(response => response.json())
      .then(events => console.log(events));
  });

Note: This code examples are taken from my exisiting code project, you can change it according to your requirments.

Hi Prachi,

You are looking for a whole solution, cut this into pieces

1. Register an app in Azure for MS Graph, follow these steps

https://learn.microsoft.com/en-us/graph/auth-register-app-v2 

2. Once the app is registered, you would be able to get access token for an account following these steps

https://learn.microsoft.com/en-us/graph/auth-v2-user?tabs=http

3. You need to create meetings / book meeting rooms based on outlook locations pre-built or configured using service account following the steps below

https://learn.microsoft.com/en-us/graph/api/resources/onlinemeeting?view=graph-rest-1.0

https://learn.microsoft.com/en-us/graph/choose-online-meeting-api

4. Try api tools like POSTMAN with the access token generated using step 2 and see how if it succeeds.

https://learn.microsoft.com/en-us/graph/use-postman

Once all done, you can use the regular method of building the logic in spfx webpart.

 

Hope this helps

Thanks

Swesh