Post Team Chat Messages using Graph API

Question

Not able to post message in teams chat using Graph API in SPFX using Token but able to get chats by using token

Getting error in console Requested API is not supported in application-only context

Given all the permission for delegated type for send and create chats still getting same error

Able to fetch all the request but not able to Post Request with this Access_token

I think token not able to use delegated permission , Is there any other way to get token for delegated permissions

Code for Access_Token in Graph API

$.ajax({
        "async": true,
        "crossDomain": true,
        "url":  "https://howling-crypt-47129.herokuapp.com/https://login.microsoftonline.com/adaptindia.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie  
        "method": "POST",
        "headers": {
            "Authorization": "Bearer",
        "Content-Type": "application/x-www-form-urlencoded"
        },
        "data": {
            "grant_type": "client_credentials",
            "client_id": "", //Provide your app id
             "client_secret": "", //Provide your secret  
             "scope": "https://graph.microsoft.com/.default",     
            
      
        },
        success: (response) =>{
          console.log(response);
          token = response.access_token;
        }
  })

Answer 1

I built a SPFx web part and I was able to both read and post Teams chat messages when I requested ChannelMessage.Read.All and ChannelMessage.Send.

Here are links to the documentation for the Microsoft Graph requests I used.

List channel messages

Send chatMessage in a channel or a chat

Here is the package-solution.json file I used. The webApiPermissionRequests property defines the requests for the ChannelMessage.Read.All and ChannelMessage.Send delegated permissions.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "spfx-teams-chat-client-side-solution",
    "id": "253c0d28-fdd4-4ca0-b5f1-b2b6c8d71449",
    "version": "1.1.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "ChannelMessage.Read.All"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "ChannelMessage.Send"
      }
    ],
    "isDomainIsolated": false,
    "developer": {
      "name": "",
      "websiteUrl": "",
      "privacyUrl": "",
      "termsOfUseUrl": "",
      "mpnId": "Undefined-1.14.0"
    },
    "metadata": {
      "shortDescription": {
        "default": "SpfxTeamsChat description"
      },
      "longDescription": {
        "default": "SpfxTeamsChat description"
      },
      "screenshotPaths": [],
      "videoUrl": "",
      "categories": []
    },
    "features": [
      {
        "title": "spfx-teams-chat Feature",
        "description": "The feature that activates elements of the spfx-teams-chat solution.",
        "id": "50c11104-f9b1-4c99-a5ce-267fdfc0eebe",
        "version": "1.0.0.0"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/spfx-teams-chat.sppkg"
  }
}

Here is the code for the render() method of the web part along with the method it calls to add the messages to the channel. This code uses the MSGraphClient type to make calls to Microsoft Graph. The MSGraphClient handles authentication with Azure AD and retrieving the access token for you.

public render(): void {
  this.domElement.innerHTML = `
  <section class="${styles.spfxTeamsChat} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
    <div>
      <ul id="chatMessagesList">
      </ul>
    </div>
    <div>
      <button type="button" id="addChatMessageButton">Add chat message</button>
    </div>
  </section>`;

  this.context.msGraphClientFactory.getClient()
    .then((client: MSGraphClient): void => {
      let graphChannelMessagesUrl = `https://graph.microsoft.com/v1.0` +
        `/teams/${this.teamId}` +
        `/channels/${this.channelId}` +
        `/messages`;

      client.api(graphChannelMessagesUrl)
        .get((error: any, response: any, rawResponse?: any) => {
          let listContainer = this.domElement.querySelector("#chatMessagesList");
          let messages: MicrosoftGraph.Message[] = response.value;
          messages.forEach((message) => {
            if (message.body && message.body.content && message.body.content.trim().length > 0) {
              listContainer.innerHTML += `<li>${message.body.content}</li>`;
            }
          });

          let webPart: SpfxTeamsChatWebPart = this;
          let button: Element = this.domElement.querySelector("#addChatMessageButton");
          button.addEventListener("click", () => { webPart.addChatMessageButtonClickHandler(); });
        });
    });
}

private addChatMessageButtonClickHandler(): void {
  this.context.msGraphClientFactory.getClient()
    .then((client: MSGraphClient): void => {
      let graphChannelMessagesUrl = `https://graph.microsoft.com/v1.0` +
        `/teams/${this.teamId}` +
        `/channels/${this.channelId}` +
        `/messages`;

      let message: MicrosoftGraph.Message = {
        body: {
          content: "From SPFx"
        }
      };

      client.api(graphChannelMessagesUrl)
        .post(message)
        .then((response: any) => {
          debugger;
          this.render();
        })
        .catch((response: any) => {
          debugger;
        });
    });
}

The supportedHosts property in the manifest for the web part indicates that it may be used as a SharePoint web part, in a Teams tab, or in a Teams personal app.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "370255fa-598b-48ed-8237-6888f84c318c",
  "alias": "SpfxTeamsChatWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
  "supportsThemeVariants": true,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "SpfxTeamsChat" },
    "description": { "default": "SpfxTeamsChat description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "SpfxTeamsChat"
    }
  }]
}

For more information on consuming Microsoft Graph from an SPFx web part, please see: Consume the Microsoft Graph in the SharePoint Framework.

For more information on using an SPFx web part in a Teams tab, please see: Build Microsoft Teams tab using SharePoint Framework - Tutorial