Microsoft 365 Community Microsoft Teams, 12 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to build a SSO bot using yo teams for Microsoft Teams

Description

In this 11-minute developer focused demo, bot expert Stephan Bisser initiates an SSO-based bot creation project using yo Teams, an Azure bot service instance, and an Azure AD App registration. Step-by-step starting in Azure, add a new OAuth setting (Configuration), select API permissions, and Expose an API. Build your bot using yo teams, update Teams app manifest, etc. This bot starts by authenticating user – token from Azure AD or Teams, then calls Graph for user related information. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on May 12, 2022.

Demo Presenter
• Stephan Bisser (Solvion) | @stephanbisser

Supporting materials
• Tool - Microsoft Teams App Project Generator - #YoTeams | https://github.com/pnp/generator-teams
• Documentation - Single sign-on (SSO) with Microsoft Teams bots | https://docs.microsoft.com/learn/modules/msteams-sso/6-bots-sso
• Training - SSO Teams Bot - Microsoft Teams App | https://github.com/OfficeDev/TrainingContent/tree/master/Teams/80%20Using%20Single%20Sign-On%20with%20Microsoft%20Teams/Demos/02-learn-msteams-sso-bot
• Documentation - Single sign-on (SSO) support for bots | https://docs.microsoft.com/microsoftteams/platform/bots/how-to/authentication/auth-aad-sso-bots

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp

A

I'm gonna do a quick demo on how to build an sso bot using teams, so quick intro. What you'll need before we jump directly into the demo first off you'll need, of course, your teams. So if you haven't check out aka dot, ms forward slash yo teams and then of course, you will need an azure bot service instance. So you will. You will need to go to the azure portal and create one and obviously you'll need to register an azure id app registration in order to make sure that sso is working.

A

But I will skip the slides and jump directly into the demo. So I'm in the azure portal. As of now- and this is my azure bot and I'm directly on the configuration pane, because if you register a new azure bot, all you need to do is basically insert a valid messaging endpoint.

A

So, in my case, it's basically pointing to my ngrok, which is running locally, and the next thing you will need is, you will need to add a new oauth connection setting with the service provider azure ad version 2 and in there you'll basically need to refer to another azure id app registration, which will then may be making sure that your single sign-on will be working and all you need to do in there is enter client id enter the client secret of that azure id app rack.

A

Then you'll need to point the token exchange rule url to whatever you have in inserted in your azure id app and we'll come to that in a second and obviously you will need to refer to the scopes you want to uh include in your azure id of connection setting and the way the azure id app rack looks like is the following. So we have a pretty basic azure id app registration in there.

A

First, off you'll need to make sure that under authentication, the redirect jury for your azure id app is pointing to token.bot framework.com, because otherwise your bot won't be able to sign the users in and you'll need to make sure that you have access tokens and id tokens enabled and then next up, all you need to do is you'll need to select which api permissions you want to include in your azure id app registration. So, for the sake of the demo, we have calendars.read mail.read.

A

um We have offline access, open id profile and so on and so forth, and the next thing- and that's the one of the most important things in here you'll- need to make sure and I'll make sure that the azure mask will be toggled off. You'll need to make sure that you have configured a valid application. Id yuri uri, which is pointing to api, call forward, slash bot id dash and that's basically, the application id of your azure id app registration.

A

And then you need to make sure that you add the scopes in there so that the the azure id app will be taking care of the content and you'll need to make sure that the client applications for teams which is um teams web and desktop and teams mobile will also be added to your uh api exposure, because otherwise you won't be able to use single set on in teams, mobile or teams desktop or web, and in order to build about using your teams.

A

um What you'll need to do basically- and I won't go through the whole um scaffolding of the project- is you need to download your teams via npm install and then you need to execute in your favorite command line.

A

Your teams you'll, need to make sure that you select um a bot as a type for your uh your team's application and give it a name, give it a title uh and select the the other features you want to include in your project and that's mainly it, and then you will be getting a new teams application wherever you have um where you've edited on your on your local disk, um and it will first off basically uh have a dot env file and in that env file, all you need to do is you need to add the microsoft app id and app password for your azure bot, and you also need to make sure that you refer to your sso oauth connection name, which is in my case sso aad, and if I'll switch back to my azure portal for sec, this is the same name.

A

We have configured on our azure port uh oauth connection setting, so that's the name you need to make you need to enter in there and in the manifest you need to uh also add token.framework.com under your valid domains, because otherwise you won't be able to redirect to token.comic.com for authenticating the user, and you need to make sure that the web application info is also set to the resource which is api uh bot id dash. Whatever your microsoft app id is, otherwise it won't be working, and then we basically have our bot uh class in there.

A

So we have a pmt sso bot uh which extends the dialog box. So that's pretty default. All you need to add in there is. You need to make sure that you handle signing events using handle team, signing token exchange and handle teams sign in verified state, because otherwise it won't be able to handle the token exchange between your bot and azure id, and then we obviously- uh and I, before I jump into the demo- I have created a new dialog so within the main dialog.

A

What we basically do is we have a lot of steps in there and for the sake of simplicity, we have added a new case whenever we want to deal or jump into a new dialogue. So mention me get help and who am? I are the default dialogues if you're using a new version of your teams, which are in there by default and I've added a new case for connecting to the graph where I basically just want to make sure to begin.

A

A new dialogue and the new dialog name is user profile dialog and the way this dialog looks like is actually pretty similar to what the main dialogue looks like. But we incorporate first of all, our sso connection name, so we'll be able to use it in a sso of prompt in here. So we basically refer to the env a file and get the connection name from there and then kick off a new sso of prompt within the first step of that dialogue.

A

So, basically, whenever you begin that dialogue, the first step is be to be run. The the oauth step and the of step basically just handles the authentication. So if the user is already been authenticated, this step will be skipped.

A

If the user is not authenticated, the bot will make sure to grab the token from azure id without the user uh needing to input something, and then we get basically go to the next step, which is the last step for this dialog, and within that step we basically connect to the microsoft graph using the microsoft graph client we'll hand.

A

Over the token we got from the previous step, so the azure id bureau token, and then we do a bunch of things within the graph like getting the current user um or getting the most recent emails, and I hope is gonna work with a brand new demo user. So I have a brand new user in here which who has never talked to my bot and for the sake of the demo, I will upload the already pre-built manifest for that bot.

A

So the pnp sso bot, the zip file, contains the manifest as well as the two icons. I will add that to my team's client or team swept client and okay, we see that I have already used that bot somewhere.

A

Doesn't matter, but if I now go ahead and say, for instance, let me check if the bot is working. Mention me I'll see, and I have my bot running on my local host good. Now, it's working. If I not type in graph, we basically go through the main dialog. In there we see. Okay, the user has entered graph, and then we need to jump to the user profile dialog and in there we see. Basically the user doesn't need to authenticate. um So we are already authenticated with that user.

A

We get the user's display name, we get the user's principal name and we also get the user's most recent email and if I now jump back to visual studio code and I've prepared a new send activity to grab also the events for that specific user and then send out the events we'll make sure that the bot has been reloaded on my end and if I now go back to the team's client enter graph again, we will see that we get the same message as before username then we get the most recent emails and we don't get the uh obviously I've, of course not entered any events for this specific user.

A

So I need to switch to another one and there we see we get the username.

A

We get the most recent emails and we get the next events, which is pnp call demo sso bot from directly from graph without me to ever need to log in because that's already done by the bot and handled by the bot automatically, because we are already authenticated in teams and the bot basically just grabs the token from teams or for measure id and reuses that in order to go to the graph and obviously you could then extend that specific scenario to go to any other api you would like to.

A

If you have the azure id token, and if you can exchange the token for something else for that api, you should be good to go and implement sso for either a web application you'd like to, and with that I'd like to point you to at least some resources. um That's the whole thing I've shown you is available under the microsoft learn module which has been done by ac most uh most of the time, so check that out.

A

It's pretty well documented what you need to do on the azure side, as well as on the bot side. So if you just follow the tutorial, you should be good to go and you should have your sso based bot up and running within a couple of minutes, and the same is true for tabs. So if you'd like to do an sso tab, there's also a module or a path for fulfilling that as well and with that back to you, david.

B

Awesome that is excellent, stuff, stephen, very, very cool stuff and uh really shows how speedy you can get a bot up and running immediately. So thank you for presenting that excellent job.