Integrating Microsoft Teams in Custom Apps

The post today is focusing on how integrate Microsoft Teams in custom applications. You may need to create a meeting from your web site, make your CRM system create meetings and send invites to your customers or even incorporate Teams in a custom mobile application you are developing.

To understand what is possible today and what is coming let’s separate the problem in two pieces:

  1. Creating the meeting/join links
  2. Embedding Teams into custom apps

Creating the Meeting

To create the meeting we can use Microsoft Graph. Microsoft Graph exposes REST APIs for multiple Microsoft services, including Teams. We are specially interested in a set of REST APIs related to “onlineMeeting” resource type. They are all documented here.

As documented in create online meeting page we can POST a specific JSON request containing subject, start date and end date and receive a response from the Graph API with all the information we need to allow participants to join the meeting we just created. That is the first step to integrate an application that needs to create meetings in Teams.

If you analyze the documentation you will see that in the production version (1.0) we provide a way to create those meetings only using delegated authentication. That is, your application will need to authenticate with an Azure AD user credential to post requests and receive responses in the API. 

The documentation for the beta API version presents the ability to use application authentication instead, but the sample code I’m showing below uses the explicit user authentication to access the API. The difference is important when integrating the ability to create meetings in custom applications that do not provide the flexibility to perform OAUTH delegated authentication in an easy way.

To understand my sample code below you need some reading. Basically it is required to understand a few Microsoft Graph authentication and authorization concepts, as well as know to register an application in Azure AD and collect information required to perform authentication and authorization.

My example is a single page app (html) using JavaScript. The steps to have the sample code working are:

  • Go to https://portal.azure.com, authenticate as an administrator and create a new App Registration. Assign at least the user.read and onlineMeetings.ReadWrite graph permissions and consent the access. Take a note of the client ID. Open the config.js and update the clientId value.

Annotation 2020-06-05 141618

  • The redirect Uri is important for my sample code as well. It will coordinate the redirection during the authentication process back to the app. I’m using “npx http-server -c –1” to host my app at the 8080 port. If you are using other http server or platform to host your app, change the value accordingly.

There are no additional steps to make the code work. The createMeeting function inside graph.js will generate the JSON request with the current datetime as the start for the meeting and will calculate a 30 mins offset to use as the end (I’m printing both to the console just for debugging purposes). There is also a counter to create multiple meetings sequentially. I then call the Graph API posting the request. With the result I update the app page with information about the meeting, including two links to join using the teams client and the browser.

Annotation 2020-06-05 142549

The code is available for your reference on my GitHub repository here https://github.com/cristianoag/JSCreateMeetingsSample.

Here are a few screenshots of the authentication process and the meeting creation.

Annotation 2020-06-05 152722Annotation 2020-06-05 152848Annotation 2020-06-05 153049

Embedding Teams into your Custom App

In the sample code I’m providing users can just click on the web link and have the browser opening the meeting directly, without prompting to download the teams client. At this moment there is no way to embed that window and the user will have another browser tab/windows dedicated to conduct the Teams meeting.

For iPhones/IOS and Android, out product group is working in a specific SDK that will allow to embed Teams into custom applications. At this moment they are hosting a TAP program and giving access to selected customers. If you have that need, please drop me a message or contact your assigned Customer Success Manager, we will direct you to the right contacts internally in Microsoft.

–Cristiano.

Disclaimer – The information contained in this blog post doesn’t represent the official Microsoft guidance or best practices. It is just the view of the author on current alternatives, implementations and workarounds for common issues and/or business needs. Please refer to official Microsoft documentation and evaluate carefully any steps, code or procedures documented herein. The author doesn’t offer any warranty. Use this information at your own risk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s