A Microsoft Teams Messaging Extension with Authentication and access to Microsoft Graph I

I recently started to deep-dive in Microsoft Teams development and I believe it will become a big thing especially around “integration”. But what’s one of the main points when it comes to integrate systems, it’s all about authentication. This is missing in the very basic starter documentation and that’s for reasons. Outside the SPFx world it’s not one of the easiest tasks.

My use case scenario is:
Assume you have some documents out there that need a review from time to time and those that are “due” you wanna share inside Microsoft Teams. So a user can select inside his channel from all retrieved due documents to post them as a card into the current channel. From there you can view them and even confirm the review.

Search Based Messaging Extension to review documents

• Part I – Introduction and setup
• Part I.I – SharePoint content setup
• Part II – Implementation Authentication and Graph access
• Part III – Search parameters
• Part IV – Configuration
• Part V – The action based variant
• (Inofficial) Part VI – The SPFx variant

This is a little series. In this first part we will setup the project and create / connect the used assets such as app registration, Bot channel and so on.

I started to use the Microsoft Teams App Yeoman generator and was most interested in the concept of Messaging extensions. I learned the basics on authentication from the following three posts:

• Microsoft Teams messaging extensions: User authentication, OAuth and Microsoft Graph (@vrdmn)
• Bot Framework Teams Messaging Extensions Walkthrough (@stephanbisser)
• Microsoft BotBuilder Sample 52 (teams-messaging-extensions-search-auth-config)

According to that we have to do some stuff for a good start. At first we create a solution with the yeoman teams generator. For the moment we will use a search based messaging extension. The rest are mostly names and up to you. BotID or Url we can create and insert afterwards.

yo teams – Create a search based messaging extension

Next as typically in projects around Microsoft Graph we need an app registration. We go to our Azure Active Directory via Office 365 Admin portal and register an app registration. We add a client secret and note that down together with the app id. Finally we grant the following delegated permissions. We will mainly use Sites.ReadWrite.All. To retrieve our documents but also to mark them as reviewed and set the next review date.

Graph access app registration – Api permissions

Next we would need to create our Bot. Therefore we go to our Azure portal and Bot Services and create a new “Bot Channels Registration”. A display name of our choice and a temporary “Messaging endpoint” need to be set.

Under “Channels” we need to add “Microsoft Teams” channel. Next to “Microsoft App ID” we click “Manage” and here we can create a secret which we note down for later inserting it into the .env file. And finally we need to set up our OAuth settings, therefore we click on “Add Setting” at the bottom.

Teams Bot OAuth Settings

We insert our created App ID from above together with the corresponding client secret, our tenant ID as well as the scope. https://graph.microsoft.com/.default means we want exactly the same scope we previously granted permissions to that app id.

Teams Bot – Test OAuth connection

Now we are done with configuration of our assets. It’s time to make them usable in our project. Therefore we have the .env file where we need to store our Bot Microsoft App ID, it’s corresponding secret (not to be mixed up with the OAuth settings, here it’s that one we created before via “Manage”) and also the connection name:

# App Id and App Password for the Bot Framework bot
MICROSOFT_APP_ID=0a0ef668-f759-42fa-9cf0-fc4d21fbf286
MICROSOFT_APP_PASSWORD=

# Bot connection
ConnectionName=CustomGraphConnection

To better understand the difference, there is the Bot App ID (MICROSOFT_APP_ID in .env) which is used for the Teams app to communicate with the bot, a necessary operation in any case of a Messaging extension. While the OAuth settings are used that the Bot can communicate with Microsoft Graph and create an on behalf token.

One final thing we also have to adjust in our Teams manifest although most of it is driven by the .env for the moment. One additional valid domain at least is needed as this will be a signInLink we use in Part II.

"validDomains": [
    "{{HOSTNAME}}",
    "*.botframework.com"
  ],

The former step is already ready and we are able to test our app as per the Readme documentation while for the latter step we need some additional implementation. We need to create some content basis in SharePoint and and the authentication code. This will come in the next 2 parts. Meanwhile you can also refer to my github repository.

Markus is a SharePoint architect and technical consultant with focus on latest technology stack in Microsoft 365 Development. He loves SharePoint Framework but also has a passion for Microsoft Graph and Teams Development. He works for Avanade as an expert for Microsoft 365 Dev and is based in Munich. In 2021 he received his first Microsoft MVP award in Office Development for his continuous community contributions. Although if partially inspired by his daily work opinions are always personal.

• Allgemein