Microsoft 365 Community Community Demos, 8 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Configure Teams Applications with Azure App Configuration and Azure Key Vault

Description

In this 16-minute developer-focused demo, Markus Möller uses the Action Config in Azure configuration extension to configure Microsoft Teams apps hosted in Azure App Service to leverage Azure App Configuration, Azure Key Vault (credential/secrets storage), and authenticate against Microsoft Graph via SSO. The example - configure an action-based document review messaging extension retrieves and controls access to retrieved documents. Sample extension in repository. Walk through block architecture, code and slides. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 8, 2021.

Demo Presenter - Markus Möller (Avanade) | @Moeller2_0

Supporting materials:
• Sample – Microsoft Graph Action Configuration extension | https://github.com/pnp/teams-dev-samples/tree/main/samples/msgext-graph-action-config
• Blog post - Configure Teams Applications with Azure App Configuration (nodeJS)| https://mmsharepoint.wordpress.com/2021/05/17/configure-teams-applications-with-azure-app-configuration-nodejs/
• Documentation - Azure App Configuration documentation | https://docs.microsoft.com/en-us/azure/azure-app-configuration/
• Documentation - Azure Key Vault Developer's Guide | https://docs.microsoft.com/en-us/azure/key-vault/general/developers-guide
• Blog post - Microsoft Teams Tabs SSO and Microsoft Graph - the 'on-behalf-of' blog post | https://www.wictorwilen.se/blog/microsoft-teams-tabs-sso-and-microsoft-graph-the-on-behalf-of-blog-post/
• Blog post - Query SharePoint items with Microsoft Graph and Search | https://mmsharepoint.wordpress.com/2021/06/16/query-sharepoint-items-with-microsoft-graph-and-search/
• Sample - Document Review Msg Extension Action - Microsoft Teams App | https://github.com/mmsharepoint/teams-dev-samples/tree/contribspfx/samples/msgext-graph-action-docreview

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 want to talk about how to configure microsoft teams applications um with azure app configuration and azure keyword, quick introduction on myself uh who, for those who don't know me, um marco smiler, I'm a microsoft, 365, developer expert and I work for abernath in germany, and you can reach me on twitter or where my blog posts, so let's quickly jump into the demo.

A

First, I want to show you a small teams, messaging extension, which posts a selected file to a message channel, and then we will have a look into the azure resources that are helping us to configure that on an enterprise-ready level.

A

We have a quick, uh simple messaging extension here and when we kick this off, um there are several samples, uh also provided not only by me but also by me on this or that scenario, and here I do it really really simple in that case, so um we retrieve a bunch of files uh from a specific location and once we pick one, we can post this to the message channel and we can do further stuff with that. We could also implement it more and that's not the real important thing for today.

A

The question now is first from: where do we get these files and how does our application know that- and the second thing of course, is nearly always in enterprise applications.

A

How do we authorize to access those files or any other kind of resources, so to configure that teams messaging extensions provide an option to enable configuration, and once this is enabled you can reach it while a secondary mouse click on the icon, for instance, and then we click on settings and once we do that a custom configuration page gets rendered, which we are responsible for implementing that, in my case, um I did it uh with two travel options: on the one hand, you can provide a site and a list id to get a specific library being responsible for serving the files, and the alternative would be to say, hey.

A

We want to go with such and retrieve the files with search instead and all these things once we press, ok, will be configured in the background and then the sample can run again. This is all to show here. So how does this look like in in area in edward?

A

First, we have uh the so-called ad configuration resource, and this is uh this is the alternative for the classic app settings or web.config yeah, and the benefits are here, of course, that here a user would be able to write to it and also you could share configuration values across several applications.

A

In my case, I'm using the mm team's action config and here we can quickly run into the configuration explorer, and here we see that we have a list id. We have a site id. We also have a value about how to use, search or the search query which uh I just showed in the ui yeah.

A

um Of course, as you can also see from here, it would be a better practice to not use that short names but more to use some kind of a namespace, because here, in this case I'm really sharing uh the configuration resource for in between different applications and for this not just demo, for instance, it's much better to be detected.

A

The second thing is what we are using, of course, is uh the authentication and the also authorization in the background, um and therefore we regularly use things like app ids or application secrets and those you would not store mainly in a simple azure app configuration. But here azure keyword is the way to go, and this is here but slightly the same resource, or at least it looks like, and in this case we have several options to store. We can store keys, we can store secrets or certificates.

A

In my case, I have some secrets here in that case, it's uh two for this uh tool for this uh application. Here we have the graph application secret and one secret for the microsoft ad path. This is the connection to the bot channel. In the background, how does uh now the app service use that or access it? Yeah? Here's my app service where my application is hosted and once I click on that, I can first see a quick notation for the keyword.

A

When I go to my classic application configuration here. I give you one example where the microsoft app password refers to the microsoft keyboard. I will show you that in a bit better mode come on here. This is a notation how you can directly access the keyboard from your app service yeah there. You know no piece of code for that yeah, but I will also show you code uh when you delete code, and I will show you that in two three minutes.

A

And the last thing I want to quickly give an introduction and explain a bit later: is the authentication from this app service to the resources like uh keyword and app configuration, and this takes place on behalf of microsoft via managed identity. And here you have nothing else to do then.

A

On the one hand, click on the identity, tab of the service was consuming, something um enable the managed identity and once you do that, you have an object inside your azure active directory, which you can then grant access to on the keyword or on the app configuration file, and this is what you do here in the access control, and this is uh from the demo side, just a simple wrap up as an architecture. What we are doing um so we have our.

A

We have our web application here, which is in fact a whole teams application, and this one is hosted in our azure app service and the configuration takes mainly takes place in the azure app configuration resource and the secrets and credentials are stored inside azure keyboard and last not leaked with that. What we can do is we can authenticate and get our data from microsoft graph and the whole microsoft 365 echo system, if it's sharepoint onedrive outlook, whatever we need.

A

So how does this work now in code? In the opposite? The first thing is: how does teams handle the requests in terms of the configuration?

A

This is the middleware of my team's messaging extension and once I right click on the app icon and request the settings page, which I did here, the on query settings url from this function is called, and in that case now I retrieve my config and use that conflict to render the team's team's task module, and this is what I return as an as an url here.

A

If the task module submits the configuration back to teams, the on settings, function is called, and here then I persist my config. So how does this then look in detail? So we have put this to a utilities class, and we will go now into the details for that in the utilities class he has first a retrieve conflict function. This first needs to establish a client yeah.

A

This client is about to grant access to the resource, and once we have the access, we can simply retrieve our values with the get configuration setting and providing a name for that, and then we have an object where the value is the main interest which we will use in this case here we use the site id and the list id and so on, and so forth thing would be how to establish this client, and here I commented out the easy way.

A

Yeah the easy way would simply be to establish a so-called default azure credential and, together with a connection string, instantiate, the app configuration client- and this is the easy way and behind the scenes, um this default error credential handles the different cases you could have, because you can have your uh app running in azure, but you can also have it running locally in debug mode or something and those two options. I show here in the code in detail below yeah.

A

If I'm running locally, I would have an azure client secret here in my environment variables, and then I will establish an environment credential, and with that I get my app configuration client and in azure, where I don't have this client secret and client id corresponding.

A

Then I simply get a so-called managed identity, credential, nothing else and establish the same that it's as easy as that.

A

So the short explanation how this works um to visualize once again is: if you have any kind of resource you regularly need credentials to access them and how to store them. You would regularly put this to a credential storage. You do this on your laptop as well with keypass or something similar, and to compare this with your laptop on your laptop on your local desktop. You now need a password to access this yeah, but is this a solution because then we would have a chain and again and again and to cut off the chain.

A

Here we have the managed identity and the managed identity has no real password, because it's taking place inside the same azure subscription. um It's able to authenticate itself against the um and against the resource to consume, so the app configuration store or the key azure keyword last, not least, um the opposite of get a configuration value. Of course, in this case, would be the safe configuration value but yeah. This is uh quite the same as we've already seen here.

A

We already have seen how to establish a client, and then we will use the set configuration setting, and here we do not only need the name, but we also need the value to store. That's the only opposite. The rest is the same as already seen for this was for azure app configuration and for azure keyboard. It's also quite the same as only one uh difference and it's the client yeah.

A

So what's the same, the same is uh we have to establish a client, and then um we have to get a value by providing a name, it's more or less the same, and only the client is different, because this is so it's not an app called erased line anymore. In this case, um it's not a keyboard client. There are different lines for the different resources.

A

In my case, I'm using only it for secrets, so I use the secret client if I would use certificates or so that would be an uh corresponding certificate client, but the authentication once again runs uh quite the same and here's once again. This is a short version establishing a default, azure, credential and then getting the client and of course, we also need a connection string for that. This is uh this simply the resource url, which you can grab from your azure resource.

A

So where do I use that in action?

A

I use that in action in my uh backend servers, where I'm getting the files- and here I'm getting my files and first I retrieve my configuration and once I have that I get an access token to come to that back later, and then I will check if I use search and then I will use my search query and then I will kick off the method for that and the other option would be to provide the whole configuration object to my get files by site method, where, in the background, I'm simply constructing a url from site id this id blah blah blah.

A

What you've seen. Interestingly, to jump there is the exchange for token, because when we come to that function,.

A

I put it here. um This is the on behalf flow, which I'm running here and therefore I need my ad secret to create my token, and this is what I'm receiving here first and then I will hand this over to my url and post. It get my access token.

A

On behalf and with that access token, I can go on and run the methods which you have seen here, um get files by search with the access token or that one last bonus slide not really relating to the topic, but as it's quite new and not that much used and documented, it's also to show how I retrieve the files by search.

A

This is the following: endpoint from microsoft, graph, the search query endpoint and in the request body. I provide in my case that I want to have list items not drive items, because I'm using the metadata, then I hand over a search query and I'm asking for several fields to be returned and last or least very important in this case, although I retrieve only, I have to post all that stuff against microsoft graph, that's it for my site, as always some resources.

A

This azure app configuration sample is documented in a blog post on my site. I also provided this as a pmp sample just two or three weeks ago. um Yeah. I did some updates to that promise to submit another pr for that.

A

So the search query, for instance, is not in that yet, but I will publish this soon takes a while, always for me um yeah, then some documentation on azure app configuration and also how to treat this and not js, because it is unfortunately not directly linked, um azure keyboard, documented and then the sso topic um described by victor a while ago. I know he's already working on a yeah simplification of that he demonstrated this. I think it was uh one or two weeks ago.

A

I hope to visit soon and put the pieces together and last, not least, also a post as a side note for my site on how to use this search with microsoft group yeah, that's it for my site. Thank you very much.

A