请求：基于SharePoint构建O365组自助管理应用的Graph API资料

Great question! Building a self-service SharePoint tool for users to browse and manage their membership in public O365 Groups is totally feasible with Microsoft Graph API. Let’s break down the key steps, API calls, and implementation examples to get you up and running:

First, you’ll need to register an app in Azure AD and grant the following delegated permissions (since users will be acting on their own behalf):

• Group.Read.All: Lets the app search all public O365 Groups
• GroupMember.ReadWrite.All: Allows users to join or exit public groups

Note: For enterprise deployments, have your admin grant admin consent for these permissions so individual users don’t have to approve access each time.

These are the essential API endpoints you’ll use to power the self-service functionality:

2.1 Search for Public Groups #

Filter groups to only return public ones using the visibility property:

GET https://graph.microsoft.com/v1.0/groups?$filter=visibility eq 'Public'&$select=id,displayName,description,mail,visibility

The $select parameter ensures you only fetch the fields needed for your UI (name, description, email, etc.).

2.2 Check User’s Current Membership Status #

Before showing "Join" or "Leave" buttons, verify if the user is already in the group:

GET https://graph.microsoft.com/v1.0/groups/{groupId}/members/{userId}/$ref

• Returns a 200 OK if the user is a member
• Returns 404 Not Found if they’re not

2.3 Join a Public Group #

No approval is needed for public groups—users can join directly:

POST https://graph.microsoft.com/v1.0/groups/{groupId}/members/$ref
Content-Type: application/json

{
  "@odata.id": "https://graph.microsoft.com/v1.0/users/{userId}"
}

2.4 Leave a Group #

Let users exit any public group they’re part of:

DELETE https://graph.microsoft.com/v1.0/groups/{groupId}/members/{userId}/$ref

The most seamless way to integrate this into SharePoint is using an SPFx web part. Here’s a simplified TypeScript snippet to get you started:

Fetch Current User ID #

import { MSGraphClient } from '@microsoft/sp-http';

// Get the current logged-in user's ID
this.context.msGraphClientFactory.getClient().then((client: MSGraphClient) => {
  client.api('/me').get((error, response: any) => {
    const currentUserId = response.id;
    this.loadPublicGroups(currentUserId);
  });
});

Load Public Groups #

private loadPublicGroups(userId: string): void {
  this.context.msGraphClientFactory.getClient().then((client: MSGraphClient) => {
    client.api('/groups')
      .filter("visibility eq 'Public'")
      .select('id,displayName,description,mail')
      .get((error, groupsResponse: any) => {
        if (groupsResponse?.value) {
          // For each group, check if user is a member
          groupsResponse.value.forEach(async (group: any) => {
            try {
              await client.api(`/groups/${group.id}/members/${userId}/$ref`).get();
              group.isMember = true;
            } catch {
              group.isMember = false;
            }
          });
          // Update your web part's state with the groups data
          this.setState({ groups: groupsResponse.value });
        }
      });
  });
}

Join/Leave Group Functions #

private async joinGroup(groupId: string, userId: string): Promise<void> {
  const client = await this.context.msGraphClientFactory.getClient();
  await client.api(`/groups/${groupId}/members/$ref`)
    .post({ "@odata.id": `https://graph.microsoft.com/v1.0/users/${userId}` });
  // Refresh group list to update membership status
  this.loadPublicGroups(userId);
}

private async leaveGroup(groupId: string, userId: string): Promise<void> {
  const client = await this.context.msGraphClientFactory.getClient();
  await client.api(`/groups/${groupId}/members/${userId}/$ref`).delete();
  // Refresh group list to update membership status
  this.loadPublicGroups(userId);
}

• Dynamic UI: Swap button text between "Join Group" and "Leave Group" based on the user’s membership status
• Error Handling: Add alerts for cases like network failures or unexpected permission issues
• Pagination: If you have hundreds of public groups, handle Graph API’s pagination using the @odata.nextLink property to load more results
• Least Privilege: Stick to the delegated permissions listed earlier—avoid over-authorizing your app

内容的提问来源于stack exchange，提问作者AXA240778