07 Abr 2022 Integrating Applications with Microsoft Teams Using Graph API Integration

Due to the COVID-19 pandemic, a great deal of our current workload depends on meeting and collaborating with our co-workers via online voice calls or text messages. Graph API has responded quickly to this trend with the implementation of more and more production endpoints for Teams, giving us the real potential to provide our customers with all the key features they need.

This integration includes support for creating and managing channels, sending messages with inline images and a custom format, and much more. All of this is implemented remotely in our custom platform and can easily be plugged into other services as well. Through the power of Graph API, all our customers can have rapid access to Teams without any need to exit the application: the content is in the application just a click away.

Here at ClearPeaks, we can say that this Teams integration is a great opportunity that helps our customers improve their productivity and enhances collaboration across working processes.

Main features:

• Easy to integrate.
• Highly performant.
• Collaborative tools.

What is the Teams Graph API?

Starting with the entire Graph API, Microsoft provides a massive API for all their systems and applications. As we can see in the image below, this system connects different pieces of their software together creating this graph-like structure, hence the name:

Figure 1

Microsoft Teams on the other hand, is a portion of this graph that acts as a hub of meetings, calls and messages with co-workers. Teams is the ultimate hub for teamwork and intelligent communications. Built on the strength and scale of Microsoft 365, Microsoft Teams delivers chat-based collaboration, meetings, calling, and enterprise voice features.

This system allows developers to create API-related applications easily. As we can see in the following image, we can provide our customers with robust software too:

Figure 2

Requirements

Our customer needed to send messages with images with Teams; they already had this functionality with Outlook. Our job here was to integrate the same functionality with Teams.

Other customer requirements were as follows:

• To be able to send text messages to team or chat channels.
• Possibility to attach images to these messages.
• Easy to use and to integrate with new applications.
• Make changes to the existing system easily and performantly.

Solution

In our case we implemented a dedicated frontend web application powered by Angular. This works as a template to facilitate future implementations of the same system in other environments. A diagram of the application behaviour can be seen in the image below:

Figure 3: Teams integration solution diagram

This implementation uses the MSAL platform, provided by the AzureAD GitHub, to identify the user and ask for all the necessary permissions to perform all the requests.

Let’s take a dive into how this works: the first step to interact with the Graph API is to identify the user that is performing the calls. In this step, we will provide the user with a pop-up window that acts as an OAuth service to identify the user in the Microsoft services, as we can see in the image below:

Figure 4: OAuth window.

After we have identified the user, we need to perform actions. To implement all the functionalities that the Graph API provides, we need to test them. This is easier to perform using the Graph Explorer. This is a feature implemented by Microsoft to check any endpoint with test data to see if it works as expected. All the main actions we can perform are described in the next part.

Endpoints

These are the main endpoints implemented in this integration with the Teams Graph API.

Send a Message or Reply to a Teams Channel

Simply send a text message or reply to a Teams channel; you need to provide the content of the message.

POST https://graph.microsoft.com/beta/teams/{team-id}/channels/{channel-id}/messages

Attach to the body:

• The text content of the message as a string.
• The base64 content of the attached images.

Also provide the following permissions with the bearer token:

• Channel.MessageSend

Get the Chats List

Retrieve all the chats from the current user.

GET https://graph.microsoft.com/beta/chats

Nothing to attach to the body.

Also provide the following permissions with the bearer token:

• Chat.Read

Create a New Team

Creates a new Team with the configured parameters.

POST https://graph.microsoft.com/v1.0/teams

Provide in the body:

• Display name.
• Description.
• Visibility.

Also provide the following permissions with the bearer token:

• Team.Create

Load a User’s Profile Info and Image

Get all the basic info about the user and their image:

GET https://graph.microsoft.com/v1.0/users/{user-id}

GET https://graph.microsoft.com/v1.0/users/{user-id}/photo/$value

Nothing to attach to the body.

Also provide the following permissions with the bearer token:

• User.ReadBasic.All
• User.Read

Always remember to attach the bearer token to the request. It is attached automatically if you have added the proper configuration to the MSAL interceptor.

Conclusions

As we can see, this integration is easy and intuitive, facilitating development in a modular and scalable way and encapsulating all the behaviour in a separate component and keeping the rest of the project clean.

That’s how we work at ClearPeaks. Contact us to find out how we can help you!