Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / Community Demos / 3 Feb 2022
Microsoft 365 Community / Community Demos / 3 Feb 2022
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: Make a simple bot using Webhooks in Microsoft Teams

Description

In this 10-minute developer focused demo, Lee Ford delivers a simple (request/response capability) Teams bot that gets weather information using an outgoing webhook. A user @ mentions the webhook (@weather) and a location (London) triggering an Azure function, that calls the OpenWeatherMap API for local weather information. An Adaptive Card is returned to the user with weather conditions. Technically, any member of a Team can create this simple webhook solution that side-steps the need to create and register of a full-fledged bot in Azure. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on February 3, 2022.

Demo Presenter: Lee Ford (Symity Ltd) | @lee_ford

Supporting materials:
• Article - Make a bot for simple interactions in Teams using a Webhook | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/make-a-bot-for-simple-interactions-in-teams-using-a-webhook/ba-p/3064378
• Sample - teams-webhook-weatherbot-sample | https://github.com/leeford/teams-webhook-weatherbot-sample

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Today, I'm going to be talking about building a simple team spot using web hooks, and this is something I had to do. I had a demo that I had to do in literally a couple of hours and save going creating a full, fledged bot. I thought okay! Well, let me just kind of use web hooks and it turns out. I could use web hooks, and this is just kind of just a story on why you should use them, why you shouldn't use them and sort of how to get started.

A

So what is a simple team spot? So this is something this isn't a technical term. This is just something that I coined when I was when I was making it and what I would deem a simple uh team spot is just a simple interaction. So you ask the bot question: it gives you an answer so, for example, uh what is the weather in london? Okay, it's cloudy and it's five degrees. You know it could be.

A

uh What is the time in finland or you know, whatever um it's just a simple requesting response: it's it's nothing more than that so um web hooks. Why would you use web hooks, so you can use um outgoing web hooks from inside teams? Actually, this is nothing new.

A

It's been around a long time and the idea of a an outgoing web hook um if you're not familiar, is to when you can at mention the web hook and then it can go off and effectively do a http request to an external service that external service could be within azure. It could be within amazon.

A

It could be anywhere as long as it's obviously accessible from the internet, and the idea here is that in our scenario, we're using a web hook, which is actually some code, that's then going to return a response back into teams, so you you create it with inside a team. You have a security token security token is then used to validate any requests coming from the webhook to then obviously know that it's come from a trusted source, so why would we use a web hook for a bot um that there's this? Ultimately? Is it's simple?

A

So if you, if you don't want to create a really complex part, you've literally just got a very simple use case. So, for example, asking for the weather forecast it's it's perfect for that sort of thing. Where you you don't really need a branching past dialogue and many multiple questions. It's literally question and answer.

A

So that's one reason, but the reason is time constraints, so you want to quickly build something.

A

As I said, I had a couple of hours to build something, and I didn't want to go through the process and to create an app registration and get hold of the people that can grant me access and all that sort of stuff, and this kind of sidesteps a lot of that, and that is also a time saving, but also, even if you had all the time in the world, not in all scenarios, you actually have access to be able to create an app registration or have access to the azure portal in that tenant.

A

And the idea is that any person- that's a member or an owner of a team- can create an outgoing web hook and then they can literally host their their their bot wherever they, wherever they want so you're, not having to rely on administrators to uh to grant you access to uh to create the bot for your tenant.

A

So why would you not use a web hook for a bot um pretty much anything that wasn't in that in that previous slide? But ultimately it's things that are going to be more complicated. So, let's say a branching path or an ongoing dialogue or things where you get a notification through from a bot, something like that: you're not really going to get done with a web hook. It's more just a say, a simple interaction.

A

Another reason is when you're using a web hook. You have it's part of a team, so it's not really used for personal context. So you couldn't ask sensitive questions because, hopefully anyone that's got access to the bot can then see any interactions, not just their own um and then and finally, things like scalability so because the web hook is assigned to a particular team.

A

If you wanted then to assign that to 10 teams, then you have to create 10 outgoing web hooks and manage them and manage the secrets and all that and it just gets really complicated and in that scenario better off having a fully fledged bot.

A

So I've created a very simple solution here, where we're going to get the weather from from an api. In this scenario, it's open weather map api and the the simple interaction is you have a user they're part of a team? They have mentioned the webhook. The webhook then gets called it's an azure function that then queries the weather api and then returns the the weather forecast.

A

If it's found, if it's a valid location, turns the weather forecast back to the teams user in in form of a a bot activity or bot framework activity, um and in this case we're attaching an adaptive card to make it a bit more fancy than just text. So that, ultimately, is the solution, and what I'm going to do now is just do a quick demo of it.

A

So let me just change over to here, so this is teams, I've got it running in an azure function, and if I now, the idea here is that I've created an outgoing web hook. So if I go into my team.

A

Under here I have a one called weather, very imaginative name: it's an outgoing web hook that is then tied to an azure function. Ultimately it could be running anywhere, but in this case it's it's an azure function and now, within this team I can that mention.

A

The bots select the weather, bots and I'm just going to put london and in the uk, and it will then go off and get the weather and then return.

A

It is a consumption-based function, so there is a little bit of a a warm-up going on there, but ultimately it returns the the weather and- and so the idea here is that you can put any location in the world really and as long as there's a matching location in the api, then it returns the uh terms of weather forecast, including any um icons associated to whatever the weather is for that day.

A

So what I'll do now is quickly just go over the code. It's like say it is an azure function. So it's it's effectively a single single file in this scenario, um written in typescript and I'll just quickly, and we've got a massive amount of time to go through line by line, but we'll just quickly go through each.

A

So um what we have here is we have an azure function. The first thing we're doing is getting the authorization header from the request and also making sure there's a body to go along with the request and the reason we need the authorization token is previously. I mentioned that an outgoing web hook has a security token and we then have to validate that. The request is also from that security token and the way teams handles. That is when it sends out an outgoing webhook.

A

It encodes, the uh the body using the security token, creates a hmac and which is then added to the authorization header and basically, what we do here is we restore the security token uh with the function.

A

It then effectively generates the hmac of the token and also the message either body from the from the request and make sure that, and then we effectively make sure that it lines up that it's from from the web hook in teams and not just a random request from something else, once we've validated it. We're then obviously stripping out all the text stripping out any out mentions and just leaving the location name.

A

We then call the weather api um with the location name and obviously the api key. If it's a valid location, we then get some more information, sort of the weather forecast. You know for the next week and um you know what the low and the high is and send the threat chance of rain and whatever else it comes back with. We then collate that date and we put it into an adaptive card and by doing that we have to create a data object and then we've got the adaptive card.

A

I won't go through all of it, but ultimately it's a it's an adaptive card definition for teams. We then create a template. We then insert the card data. We just got all the weather information into the into the template, create a an adaptive card and then send that card along with the message or the activity to teams and obviously, if there's no location, we say that we can't find it otherwise, there's a we throw an error, that's effectively it from the code. It's it's not particularly complicated setup.

A

It's it's pretty pretty straightforward and if I just go back to the deck, I think one more slide, which is just to say that there's a company blog post to go through it sort of in more detail. We've also got a code sample on github and obviously, if you need to read more then yeah reach out or let me know how you found it.

B

Very, very cool lee excellent, thank you so so much and really showing how uh how how quickly you can get a bot up and running and how useful it can be so very, very nice job and there's some questions. I think in the chat I'll. Let you review those as we move on to our next presenter, but thanks again, very very excellent.