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

Question

I have SPFx webpart where i want to create form which have Outlook locations, meeting rooms, there is one service account which should block meeting room and cancel meeting and edit meeting.

Also, I have registered azure app where i will have microsoft graph permissions but i am not sure how to connect it and use it in spfx webpart.

prachi gupta · Answer

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!!

prachi gupta · Answer

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!!

Aman Gupta · Answer

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: 'room@domain.com' 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.

Swesh S · Answer

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

Swesh S · Answer

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;