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

Let people try your query in Microsoft Graph Explorer

Microsoft Graph Explorer is a wonderful learning space for the ones who are looking for testing Microsoft Graph APIs and reviewing the responses quickly. It provides the simple authentication where you can login, then see the response preview with your own tenant data. The best part of Microsoft Graph Explorer is its user-friendly design that makes it practical and easy to understand how to benefit the most out of it. Even better, it continues evolving with new releases all the time!

Today, we will explore one of the most practical features of Graph Explorer: “Share Query“. Let’s say that you are working with advanced queries ($filter, $search, $orderby etc.) in the Graph Explorer. After getting the required results, you would like to let people try your current query. We can easily do that in 2 steps:

  • Step 1: Click on Share button on the right side of the Response preview section.
  • Step 2: Copy your query and share with other people.
  • Result: Others can paste this shared link to any browser, then they will be directed to your pre-populated query in Microsoft Graph Explorer. They can click on Run Query button to see the response preview.

Here is a sample query, feel free to copy and paste it in any browser to see the results in the Graph Explorer:

https://developer.microsoft.com/en-us/graph/graph-explorer?request=groups?$filter=startswith(displayName,’all’)&method=GET&version=v1.0&GraphUrl=https://graph.microsoft.com&requestBody=IiI=

Feel free to ask you questions and share your experience in the comment window.

Cheers.

Microsoft Graph Toolkit: where to get started?

If you are a starter and willing to learn more about Microsoft Graph Toolkit, you are in the right place! Before we jump into a long run project, we will discover Microsoft Graph Toolkit and find answers to the following questions:

  • What is Microsoft Graph Toolkit?
  • What is in Microsoft Graph Toolkit?
  • Where to get started?

Today, our focus will be understanding the basics. But, If you are interested in building an overall solution, check out this post: Microsoft Graph Toolkit: gather together your Office 365 in one app.

What is Microsoft Graph Toolkit?

It is a powerful collection of reusable web components and providers that enables accessing Microsoft 365 data. It makes Microsoft Graph easy to use in your application. For instance, we can implement login and tasks with just two lines of code by using Login and Tasks components.

Microsoft Graph Toolkit Playground: mgt.dev

The Microsoft Graph Toolkit is great for developers of all experience levels. All components work fluently with all modern browsers and web frameworks (React, Angular, Vue, etc.).

What is in Microsoft Graph Toolkit?

Components: a collection of web components powered by Microsoft Graph APIs

Note: The components work best when used with a provider.

ComponentHTML
Login<mgt-login></mgt-login>
Person<mgt-person person-query=”me” view=”twoLines”></mgt-person>
People<mgt-people show-max=”5″></mgt-people>
Agenda<mgt-agenda></mgt-agenda>
Tasks<mgt-tasks></mgt-tasks>
People picker<mgt-people-picker></mgt-people-picker>
Person card<mgt-person person-query=”me” view=”twoLines” person-card=”hover”></mgt-person>
  <div class=”note”>
    (Hover on person to view Person Card)
  </div>
Get<mgt-get resource=”/me/messages” version=”beta” scopes=”mail.read” max-pages=”2″>
    <template>….</template>
 </mgt-get>
Channel picker<mgt-teams-channel-picker></mgt-teams-channel-picker>
Providers: enable authentication and provide the implementation to get the access tokens for consuming Microsoft Graph APIs
ProvidersHTML
MsalSign in users and acquire tokens to use with Microsoft Graph.
SharePointAuthenticates and provides Microsoft Graph access to components inside of SharePoint web parts.
TeamsAuthenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs.
ProxyAllows the use of backend authentication by routing all calls to Microsoft Graph through your backend.
CustomCreate a custom provider to enable authentication and access to Microsoft Graph with your application’s existing authentication code.

Where to get started?

1. The Playground

Microsoft Graph Toolkit Playground is definitely a great tool for starters who wants to try out components and learn more about the capabilities of each component. It is quite helpful for discovering the components edge to edge before trying them out in a custom application. Highlights of the Playground:

  • Canvas is the place for testing the components, checking the visual results and customizing UI as our wishes.
  • Docs is the place where we can check the attributes, properties, events, css and stories for each component.
  • Finally, don’t forget to check Samples in the Playground, there are many templates available and ready to use!
2. Repository

Microsoft Graph Toolkit provides a rich repository with Angular, ASP.NET Core, React and many more other samples available. If you are looking for some sample solutions, Microsoft Graph Toolkit Repository is the great place to start exploring.

3. Docs

Here is the official documentation of the Microsoft Graph Toolkit.

Let me know about your experience with Microsoft Graph Toolkit. Furthermore, If you would like to build a solution from scratch with the power of Microsoft Graph Toolkit, check out this post: Microsoft Graph Toolkit: gather together your Office 365 in one app.

Cheers!

Build PowerApps in a couple of minutes to impress friends and family!

Yesterday, my friends were coming over for dinner. I wanted to make it very special for them, so I planned to cook amazing Turkish dishes that they have never tried before. Let me be very honest with you, cooking 5 different dishes was not easy at all. Then, why not go one step further and create a dinner menu for them, so they taste the complete Turkish Restaurant vibe 🙂 (Such a great excuse to deep dive into PowerApps!)

If you are searching for quick ways to build a mobile/tablet app, PowerApps is the answer! I spent only couple of minutes to build this dinner menu app and everyone was so surprised, loved it, felt very special! I shared all the details about how to build a Power App in couple of minutes to impress friends and family. Try and let me know about the results.

Build PowerApps with no code

Go to PowerApps website and create Canvas app from blank.

Give a name to your app and choose Phone as a format.

Welcome Page

Let’s rename Screen1 as Welcome Page.

Start designing the page by choosing required properties under Insert tab. I will insert below items:

  • Text Label: Welcome message
  • Text Label: Description for the guests
  • Button: Navigation to the Menu Page
  • Text Label: My name as a footer

Click on the first Text Label and edit settings from the panel on the right side. You can rename Label1 as Welcome Label by clicking edit icon on the right side.

  • Text (Double-click to edit on the panel): Hoşgeldiniz (Welcome in Turkish)
  • Font: Dancing Script
  • Font size: 50
  • Font wight: Bold
  • Text alignment: Align Center
  • Size Width: 560
  • Size Height: 90
  • Color: Custom (Hex: D4AF37)

Then, the second Text Label and edit settings from the panel on the right side. You can rename Label2 as Description Label by clicking edit icon on the right side.

  • Text (Double-click to edit on the panel): Welcome my lovely friends! :)Get ready for a wonderful …..
  • Font: Open Sans
  • Font size: 26
  • Font weight: Normal
  • Text alignment: Align Center
  • Position X: 40
  • Position Y: 160
  • Size Width: 560
  • Size Height: 775
  • Color: Dark Grey
  • Border style: Solid
  • Border thickness: 2
  • Border Color: Custom (Hex: D4AF37)

Next, go to Button and edit settings from the panel on the right side. You can rename Button1 as Menu Button by clicking edit icon on the right side.

  • Text: View Menu
  • Position X: 180
  • Position Y: 895
  • Size Width: 280
  • Size Height: 70
  • Color: White
  • Color Fill: Custom (Hex: D4AF37)

Finally, the third Text Label and edit settings from the panel on the right side. You can rename Label3 as Footer Label by clicking edit icon on the right side.

  • Text: Chef: Ayça Baş
  • Font: Dancing Script
  • Font size: 30
  • Font weight: Bold
  • Text alignment: Align Center
  • Position X: 40
  • Position Y: 995
  • Size Width: 560
  • Size Height: 125
  • Color: Custom (Hex: D4AF37)
Menu Page

Let’s create a new screen for the menu. Choose Blank template and rename it as Menu Page.

Before we start designing the Menu Page, let’s create the navigation from Welcome Page Menu Button.

Click on View Menu button and go to Advanced tab. To enable navigation, insert below script under OnSelect action:
Navigate(‘Menu Page’)

Design the page by choosing required properties under Insert tab. I will insert below items.

  • Back Arrow: Navigation to the Welcome Page
  • Text Label: Title
  • Text Label: Header
  • Text Label: Description

First of all, click on Back arrow and edit properties from the panel on the right side. You can rename Arrow1 as Back Button by clicking edit icon on the right side.

  • Position X: 40
  • Position Y: 25
  • Size Width: 65
  • Size Height: 65

For the navigation, go to Advanced tab and insert below script under OnSelect action:
Navigate(‘Welcome Page’)

Secondly, click on the first Text Label and edit settings from the panel on the right side. You can rename Label4 as Menu Title Label by clicking edit icon on the right side.

  • Text: Menu
  • Font: Dancing Script
  • Font size: 50
  • Font wight: Bold
  • Text alignment: Align Center
  • Position X: 0
  • Position Y: 0
  • Size Width: 640
  • Size Height: 120
  • Color: White
  • Color Fill: Custom (Hex: D4AF37)

Then, the second Text Label and edit settings from the panel on the right side. You can rename Label5 as Header Label by clicking edit icon on the right side.

  • Text: Appetizers
  • Font: Dancing Script
  • Font Size: 40
  • Font Weight: Bold
  • Font Style: Underline
  • Text alignment: Align Center
  • Position X: 0
  • Position Y: 195
  • Size Width: 640
  • Size Height: 65
  • Color: Dark Grey

Finally, the third Text Label and edit settings from the panel on the right side. You can rename Label6 as Dish Description Label by clicking edit icon on the right side.

  • Text: Zeytinyağlı Biber Dolması
  • Font: Open Sans
  • Font Size: 25
  • Font weight: Normal
  • Text alignment: Align Center
  • Position X: 0
  • Position Y: 270
  • Size Width: 640
  • Size Height: 45
  • Color: Dark Grey

Go to Advanced tab and insert below script under OnSelect action to enable redirect link: Launch(“https://en.wikipedia.org/wiki/Dolma&#8221;)

Add couple of more header labels and dish description labels. Repeat the same steps on above until you build the complete menu.

For both pages, click on any empty space of the page and go to Properties tab on the right side. You can either change the background color or add a background image. I will choose one of images on my desktop for the final look of my app and choose Image Position as Fill.

Don’t forget to save and publish your app. You can also share your app with friends, family and colleagues via e-mail. Let me know if your guests like it! 🙂

Finally, our app is ready! PowerApps is always the quick solution for such scenarios. If you are interested in learning more about Power Platform, check out the related posts.

Cheers!

Build AI-powered virtual assistant for healthcare with almost no code!

Have you ever heard about the Microsoft Healthcare Bot service that provides AI-based virtual assistance to support healthcare organizations? If yes, you already knew how easy it is to build and deploy the service with minor customization to adapt in your organization. In fact there is no doubt, it was the rescue for many scenarios during Covid-19 outbreak where many of us still benefit from it when we need quick answers to our questions about our health conditions. Well, If you never heard of Microsoft Healthcare Bot service before, I am here to take you through the hints that you would take a look before you go ahead and try the service.

  1. What is the Microsoft Healthcare Bot service exactly?
    It’s a chatbot which has built-in healthcare intelligence with a language understanding model based in medical terminology. Let’s drill down a little bit! It means that we don’t need to build the entire medical content in AI service, it comes with an industry knowledge which can serve millions of users at once.
  2. How can I build the conversation flow the way I want?
    Healthcare Bot Service provides a Management Portal where you can build your conversations with “no code”. You can create new dialogs, drag and drop to the editor to build the dialog flow and customize it however you want!

    undefined
  3. Where can I start?
    Visit Azure Portal and Create your first the Healthcare Bot.

    undefined

    Check out Healthcare Bot Service Management Portal and build your first scenario by using drag and drop scenario editor.

    undefined

Go ahead and try the service in couple of minutes and share your experience with the community! Feel free to ask your questions under the post. Let’s discuss what went well, what didn’t go well.