Authentication in Teams tabs using Microsoft Graph Toolkit

If you are looking for ways to build easy authentication for Microsoft Teams custom tab developmentMicrosoft Graph Toolkit Login component provides a button and flyout control to facilitate Microsoft identity platform authentication with couple of lines of code.

How to build a tab with straightforward authentication flow?

  1. Enable Microsoft Teams Toolkit extension for Visual Studio Code
  2. Build Microsoft Teams tab
  3. Implement Microsoft Graph Toolkit:
  4. Setup ngrok for tunneling
  5. Register your app in Azure Active Directory
  6. Import your app manifest to Microsoft Teams App Studio for testing

Enable Microsoft Teams Toolkit extension for Visual Studio Code

Install Microsoft Teams Toolkit from the Extensions tab on the left side bar in Visual Studio Code. For more information, Microsoft Teams Toolkit: Setup and Overview.

Microsoft Teams Toolkit Extension for Visual Studio Code

Build Microsoft Teams tab

  • Select Microsoft Teams icon on the left side bar in Visual Studio Code and Sign in.
Microsoft Teams Toolkit Extension for Visual Studio Code
  • Select Create a new Teams app,
    • Give a name for the app
    • Choose Tab for the capability
    • Select Next
Microsoft Teams Toolkit Extension for Visual Studio Code
  • Select Personal tab
  • Select Finish
Microsoft Teams Toolkit Extension for Visual Studio Code
  • Open Terminal and run:
    npm install
    npm start

Implement Microsoft Graph Toolkit

Add a new file under src folder and name it as Auth.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { Provider, themes } from '@fluentui/react-northstar' //https://fluentsite.z22.web.core.windows.net/quick-start

ReactDOM.render(
    <Provider theme={themes.teams}>
        <App />
    </Provider>, document.getElementById('auth')
);

Add a new file under public folder and name as auth.htmlCTRL+SPACE for adding HTML Sample. Add below code in <body></body>

<div id="auth"></div>
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
  mgt.TeamsProvider.handleAuth();
</script>

Add below code in index.html <body></body>

 <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
 <mgt-teams-provider client-id="YOUR-CLIENT-ID" auth-popup-url="YOUR-NGROK-URL/auth.html"></mgt-teams-provider> 
 <mgt-login></mgt-login>
 <mgt-agenda></mgt-agenda>

Setup ngrok for tunneling

npm start

  • Go to ngrok website and login.
  • Complete the setup and installation guide.
  • Save Authtoken in the default configuration file C:\Users\[user name]\.ngrok:

ngrok authtoken <YOUR_AUTHTOKEN>

ngrok http https://localhost:3000

Ngrok Setup
Ngrok Setup
Ngrok Setup
  • Go to your project public > index.html, replace YOUR-NGROK-URL with ngrok url https://xxxxxxxxxxxx.ngrok.io in mgt-teams-provider > auth-popup-url.
Ngrok Setup

Register your app in Azure Active Directory

  • Go to Azure Portal, then Azure Active Directory > App Registration and select New Registration.
Ngrok Setup
  • Fill the details to register an app:
    • give a name to your application
    • select Accounts in any organizational directory as an access level
    • place auth-popup-url as the redirect url https://xxxxxxxxxxxx.ngrok.io/auth.html
    • select Register
Ngrok Setup
  • Go to Authentication tab and enable Implicit grant by selecting Access tokens and ID tokens
Ngrok Setup
  • Go to API permissions tab, select Add a permission > Microsoft Graph > Delegated permissions and add Calendar.ReadCalendar.ReadWrite.
  • Then, select Grant admin consent.
Ngrok Setup
  • Go to Overview tab and copy Application (client) ID
  • Then go to your project public > index.html, replace YOUR-CLIENT-ID with Application (client) ID in mgt-teams-provider > auth-popup-url.
Ngrok Setup
Ngrok Setup

Import your app manifest to Microsoft Teams App Studio for testing

  • Go to Microsoft Teams, open App Studio > Manifest Editor and select Import an existing app.
Ngrok Setup
  • Select Development.zip under your project folder > .publish.
Ngrok Setup
  • Scroll down and select Test and distribute, then click Install and Add your app.
Ngrok Setup
Ngrok Setup
  • Click on Sign in for the authentication and give consent to AAD registered app you created.
Ngrok Setup
  • Your profile information e-mailname and calendar should appear in your tab after the successful authentication.
Ngrok Setup
Solution repository is available here: https://github.com/aycabas/TeamsApp

Microsoft Teams Toolkit: Setup and Overview

Recently, an amazing Visual Studio Code extension Microsoft Teams Toolkit has been released for developers who are willing to build apps for Microsoft Teams. It is easier and faster to build bots, tabs or messaging extensions with Microsoft Teams Toolkit that provides developers to create, debug and deploy Teams apps directly from Visual Studio Code.

Microsoft Teams Toolkit Extension

If you are interested in building apps for Microsoft Teams, simply you can go to Visual Studio Code Extensions tab, and install Microsoft Teams Toolkit extension.

After a successful installation of Microsoft Teams Toolkit extension, Microsoft Teams icon will appear in the activity bar.

When you click on Microsoft Teams icon in the activity bar, you can direct to Open Microsoft Teams Toolkit for getting a guidance and documentation about setting up your environment, building an app or publishing your app to Microsoft Teams. Each step redirects to the related official documentation.

To create a new Teams app, click on Create a new Teams app, give a name to your project and choose the capability you wish to create.

Microsoft Teams Toolkit provides Tabs, Bots and Messaging Extensions as types of Teams apps.

After creating any type of Teams app, our project is ready for development, debugging and publishing. ( .publish folder will be generated automatically under the project folder and manifest.json will be available for testing on Microsoft Teams App Studio. )

In addition to creating Teams apps from scratch, we can also import a current app package and edit app package from Visual Studio Code.

Microsoft Teams Toolkit is a very practical extension that helps us avoiding multiple manual steps while building applications for Microsoft Teams. Next, we will be exploring how to build Teams apps and run it on Microsoft Teams.

Feel free to share your thoughts about Microsoft Teams Toolkit extension in the comment window.

Cheers!