Microsoft 365 Community Teams, 24 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams community call-November 2020

Description

This month's call covered topics including Microsoft identity platform integration for the Teams Toolkit, updates on SSO for Bots and a community demo by CloudSpark Labs of their Microsoft Teams Content Explorer app.

Speakers: Karthig Balendran, Allen Snow, Ojasvi Choudhary, Tatiana Cristea
CloudSpark Labs: Nooriz Khamis, Jose Louis

Resources:
Teams Toolkit blog details https://aka.ms/AAaexlb
SSO for Bots Docs https://aka.ms/AAaeizy
Content Explorer App on GitHub https://aka.ms/AAaexl3

To join future calls, please download the series at https://aka.ms/microsoftteamscommunitycall

Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

A

Welcome to the microsoft teams community call. For november we have a great lineup. Today my name is dana. We can. I help organize community calls across the teams and microsoft 365 platform. Today we have guest cloud spark labs, who will be demoing, microsoft teams, content explorer app, and then we have some information around identity platform, integration for the teams toolkit and last we'll follow up with the bot's ssoga information.

A

So we will go forward with maurice and jose from cloudsparklabs.

B

Okay, great nice, to see everybody here, so my name is nurez kamis. I am vp technology at cloudspark labs. We develop teams, apps or many organizations, one of the ones that we've developed for our customers is the content explorer app, which we've actually open sourced um for everybody to use for free.

B

Let me just give you guys quick spiel. We only have about 10 minutes, so I actually want to get into the demo of the app and jose on the line. Is our one of our senior developers on the product is actually going to demo it for you and go through some of the source code as well? So let me just quickly start by talking about why we developed it.

B

So as we go on our project site in the consulting side of the business called creo spark, we deal with a lot of customers now and especially during the pandemic, we're finding that it's very important that we keep microsoft teams top of mind when we're developing an information architecture right. So, whatever you're doing in terms of document management collaboration, you know sharepoint, you know: site collections, modern site collections, classic you name it.

B

You should have teams top of mind because that's where everybody is working 70 to 90 percent of the time we're finding and going from a browser to teams and to a different apps, it's really frustrating for users to switch contacts. So that's kind of one of the reasons we created the content explorer because document management and collaboration within sharepoint may not always reflect the way. Your organization and your teams are structured and, as we know, when you create a team, there is a sharepoint site created on the back end.

B

It doesn't mean your files are going to be stored there, especially if you guys are already a structured and organized in your in the way your company works from a document management standpoint. We don't want to restrict the users and the organization to leverage the sharepoint site, that's backed by the team they want.

B

We want them to be able to point to any of their document management site collections on sharepoint online or sharepoint on-prem, um so we wanna and that's gonna, really help from a use, end user productivity standpoint, because some organizations have already created this whole information architecture, a site structure, a navigation structure, all of the stuff, that's important as part of information architecture. We want them to leverage what they've created and to be able to use the teams that might not correlate to those site collections.

B

There's a lot of capabilities that microsoft has given you with teams out of the box which are going to help you from a productivity standpoint. So things like being able to expose your document, libraries within the tabs of your teams to use the add cloud storage capability with the files.

B

What we did was create this content explorer to be able to point to any site collection in your sharepoint online sites that you have and being able to show all of the libraries and the lists and all of the capabilities there uh in a security trimmed manner, so that you only see what you have access to within a tab within any team. And now not only you. Can you point to any site collection that has sub sites.

B

That has you know all your library structure and you can view it in a flat manner or you can view it in a hierarchical manner. So all of if you're not on modern. Yet you could point to a classic base site and it'll show you all the sub sites and such you can browse through them or if you're already on modern, then you can actually point to a hub site and it will show you all the hub attached sites that you have as well. So you know either a flat or high hierarchical manner.

B

So that's a really cool app that we built that our customers seem to love and one of the main reasons we built.

B

It was so that it would work with on-prem, because there's a lot of hybrid companies out there that are on a hybrid environment where they're still pointing they're using an on-premise version of sharepoint and they've already have their structure they spent years and years on, developing that site structure in the information architecture and their team structure, which is online, may not directly reflect how they've done their document management so kind of the premium version of what were what we created connects to the on-premise environment.

B

The free version which jose is going to show you now is actually available for everybody to download and we've given that for free, and you can enhance it and that's where I'm now going to pass it off to jose. To give you a quick demo.

C

All right, thanks rez, so um what I'd like to do is show a few different things, the first of which is a quick demonstration of the content explorer in action. I know you've seen some screenshots, but we'll go kind of walk through it.

C

Just so, you can see firsthand how the app works as a teams tab and then, after a brief demo, we can explore the in-app settings available that allow us to configure the view presented to the end user and, lastly, with a better understanding of how the app works, then we can take a look at the code base.

C

So, let's begin by navigating over to our content explorer tab after loading. The first thing we're going to see are the lists and document libraries for a given site. In our case, we are looking at the about site collection. We can see this site collection in sharepoint right over here, and so I have a couple of document: libraries, company, info, uh etc.

C

Some of them are right out of the box. So importantly, this site collection is a hub site. Now we can select a given library and navigate to its contents. This now links us directly to the library in sharepoint. So what we're seeing now is a sharepoint page for the contents of the chosen document library.

C

If we wanted to open a file, we can go ahead and click on it to open up a new window in sharepoint for file editing.

C

So let's close this down and let's go back to our content explorer screen now, the strength of the solution is not so much that we can display a site's lists and libraries within teams. I think that's pretty fundamental, but actually that we can now allow the user to find content that they will need when that content is spread across different hub sites and associated hub sites. For that we can use our drop down to see a listing not only of our about site but its associated hub sites. So here we have resources and faqs.

C

If I click on resources, we can see now the view kind of uploads. It shows the listen libraries for our resources site collection. So this is the true benefit of the functionality that we've coded here. But before we take a look at the code itself, maybe we could spend a little bit of time looking at the tab settings that are available, so I'm going to go ahead and click on our tab and click on settings.

C

We can see that our content explorer requires a given site collection url to function. This is where I'm pointing it to we direct all our service calls to retrieve the lists in libraries from this endpoint.

C

Additionally, we have the ability to show or hide the types of sharepoint lists and libraries. Perhaps the user doesn't care, maybe about site pages or style library, and we can deselect that and we'll that will hide them in the view, in addition to hub sites, we also have the ability to display the contents of a subsite of a given site collection and finally, we can alter the kind of layout that a user can see for the hub site and its associated sites.

C

Right now we have selected a flat presentation of our sites, but we can change this to grouped and go ahead and apply.

C

So now we see our sites are grouped together by the hub site with which they are associated, so I can go ahead and obviously use the the functionality that comes right out of the box with fluency ui.

C

So now that we have an idea of what the app does and how we can configure it. Let's turn our attention to how this was coded.

C

So I'm going to head into visual studio code to see our source files.

C

Minimize these just to give you a better idea of our structure layout.

C

So as an overview, we see, we have a web part file, but we have also divided our app into components: constants helpers to prepare the data being sent to an api or coming back from an api, our interfaces for our tight data and our api services.

C

Importantly, as we've already seen, we're leveraging microsoft's fluency ui component library to get the look and feel and functionality to match microsoft services, but first, let's take a look at our web part file, which we're already in here here is where we set our rendered component. In our case, it's the my list app and we pass in all our web part properties that we need. We saw these in the settings panel for our web part. Now. This is foundational to spfx teams, tab development, so I'm going to skip ahead to our side of the code.

C

So, as mentioned, we are rendering the mylis app component. So let's go take a look at this component.

C

All right, so I'm going to head down to the render method, because we see there's nothing really fancy going on here. We're displaying a site selection drop down, we're displaying a details list, and this happens when the user has a flat layout. So when it's not equal to grouped and alternatively, we just display a grouped list, which is our own custom component when they select grouped so our site selection component is really our drop down. Now this is sensitive to whether we're displaying normal site collections or a hub site with a hope associated sites.

C

Now, based on what site we select in the site, selection drop-down, we call our sharepoint api to get the lists and libraries to be displayed in our fluency ui detail list, and for this we just call the sharepoint api to get sharepoint lists and libraries. This type of call is pretty fundamental to the sharepoint api. So again, I won't be spending time on this.

C

Instead, let's focus on how we get our site selection component to get a list of hub sites and their associated sites. So, let's turn to the site. Selection component.

C

So our work here is really done in our services. Call which we'll see shortly, but our site selection component here is the first thing is that it mounts um and it tries to load up all of the sites that it can get and our load sites here, as we can see, is we want to first get some site information in particular.

C

That's going to be important to us is: is this site a hub site if it isn't a hub site, then we're just displaying a normal site collection, and then we go and get the lists in libraries if it is a hub site, however, then we have our magic call to get our associated hub sites.

C

So let's take a look at our get associated hub sites in our service call here. This call is pretty important in that it's not using a sharepoint api or the normal sharepoint api endpoint. To get this information, we are actually first having to get our a hub api token from the sharepoint home api.

C

So here we get an api token from our sharepoint home service api and from this token, that we get from calling the sharepoint home service, we are able to retrieve a secondary sharepoint home service api endpoint, which allows us to then retrieve all of the associated hub sites with a given hub site id, and this will then retrieve all of our hub sites, all of the child or associated hub sites, as well as their sub sites. So this is where kind of the magic happens and then they're kind of retrieved in no particular order.

C

So I have a helper function that prepares this data in the structure that I need. I have hub sites as kind of the root, and then I have associated hub sites underneath those and then sub sites underneath those. So that's the crux of of the functionality here to get our associated hub sites. Once we've finished this portion, then it's just a straight call to get lists in libraries from the sharepoint api.

C

So that's my brief overview of the code base and the functionality for the content explorer.

B

Yeah jose, do you mind um clicking on the link that you go posted on the chat so that everybody could see where to get this source code?.

C

Yeah, absolutely perfect, and so here we have a link to our source files, and so we should have the exact same structure. As we just noted. We have our components, constants interfaces and the last thing I showed you was our sharepoint service calls here. So this is all available to download for you to test.

A

B

Thank you so much brother, thank you, everyone and then we'll pass it back to you. Dana.

A

Awesome, thank you so much for that demo. If any of you continue to have questions, please go ahead and type them in the imchat and um and we can get to those either through the chat or at the end, and when we have some q a at the end of the call.

A

Next up, we have alan and karthik to talk about the team's toolkit.

D

Hey folks, I'm karthik, I'm a pm on the team's platform, developer, lifecycle team and I'm joined by alan as well.

A

Hello, everyone. I would turn on my video, but let me see.

D

Let's see I'm having video.

A

D

You're still stuck in the matrix.

A

D

B

A

To turn that off, so I don't give anybody a headache, but I guess so sounds good.

A

D

A

D

And I'm going to turn off my video as well. There are a few people on the call. I want to make sure that we use our bandwidth efficiently here.

D

So alan and I in case uh you haven't, checked out the tool before we worked on and released the microsoft teams toolkit for visual studio, visual studio code and we'll be walking through an upcoming update to the toolkit.

D

This is an update that you'll be able to download, hopefully sometime this week, and what it will enable you to do is that it's going to enable you to create a tab based teams, app that performs single sign-on authentication and then does a subsequent call to graph to retrieve your user profile photo and displays it in our basic hello world, app that you get from creating a uh an app with a microsoft teams toolkit.

D

uh So for those of you don't know, this is the you can use it to create scaffolds that serve as the foundation for your teams app I've already logged into this extension for visual studio code. So now I'm just going to start creating an app. So I hit create a new teams.

D

App- and this is going to be a tab and let's call it uh my dev community app- and this is a personal tab and this tab is going to require single sign-on, authentication, perfect and if you've built an app that does sso before you already know that you need to go to the azure portal and provision an app registration and configure about six pages. There are about 20-ish steps.

D

uh We figured out that all you really need to do to get up and running with sso and graph is tell us the domain name where your app's going to be hosted, and we can pretty much provision the app for you and help you get up and running with just this piece of information.

D

I've already reserved this ngrok url, if you're not using ngrok, it's a tunneling service that gives you a domain name perfect, and now we are just going to go and provision our aed app registration, as you can see, we're getting back a client id and app by the uri direct uri using the domain name that I just provided and a secret everything's going to be flushed after the skull. So you can't use any of this.

D

I'm going to hit finish now, I'm just going to now select where this gets saved, and hopefully there is the project here we go now. The first thing I'm going to do is start installing the libraries, because it takes a little bit of time and there are actually two project folders that get created with an sso project. The api server package, all right, oops harder than that. Okay npm start, and there is another project that is contained in the source folder.

D

So the api server has one project you need to install and the source folder has another, and this contains the source. Folder contains the the server logic that serves your uh front end and it is a react, scripts app and uh it's super super minimal, and while that loads, I'm also going to open up a third terminal window and run ngrok, and I think I might have.

D

Oops, I meant to type grep.

D

No okay, I'm gonna have to do this. Http.

D

So what I'm doing now is running angry and pointing and grok to my local host oops, three thousand okay and the subdomain will be team flicks and, as you can see, perfect team flick starting to my localhost server, I port 3000.

D

This is still installing that is installed and the server is running at port 5000 and uh before we begin I'm going to do one thing: our launch.json script, which launches the app when you're ready launches in chrome by default, I'm going to change this to edge, and I have the edge debugger for visual studio code already installed on my machine and the reason I'm doing this is because we have it admin policies that require us to open teams. The web client in edge, not chrome at microsoft. So that's why I'm doing it.

D

uh You may not have to do this, but something I have to do and when you run this app when you hit f5, uh what happens is the app gets launched in the team's web? Client and tab is already installed. The tab. Front-End packages have been already installed and I just hit npm install again, which is not what I meant to do. I meant to hit npm start.

D

So let's do this. Let's wait for this to finish. I don't want to stop it now, and what I'm going to do is start walking through the code.

D

Okay, if you open up your source directory and then components most of the logic that you need to pay attention to is going to be in this tab, dot, js file, I'm going to assume that most people here are already familiar with react. I'm not going to use this as an opportunity to go over react. Oh perfect, never mind! This is all done sooner rather than.

E

D

And once this project is once this extensions update is available for you and you try, it decide to try it out. What I recommend is just starting with the tab.js file and just walking through the code top to bottom. We've added a lot of comments in here so that you can just walk through this one file here and it should walk you through everything. You need to know to understand how tab sso works and I'm going to start doing that right now for you.

D

So the first thing you want to look at is this component did mount function. This is a react, lifecycle method that gets called every time. There is a change to the underlying data or your uh the dom initially gets mounted and before we render any of the html content, this function will fire now. What we're doing here is we are a initializing, the teams sdk and we're getting the context for the session, and once we get the context we're setting it to state now the teams context object contains some basic information.

D

Like your upn, your email address your username, but it doesn't give you anything super rich. That is stored in graph like, for example, your profile photo, and the objective with this exercise is to go and retrieve your profile photo and display it in your team's app okay, so we've set this date next.

D

What we want to do is perform single sign-on authentication and what we're going to do first is create a request object and this object will contain two callback methods, one that will execute if the sso get auth token function here succeeds and one if it fails, and if the get auth token call succeeds, we're going to execute sso login success.

D

Okay, so I'm going to hit pause now and we'll resume with sso login success after I run this app because app is now running, the server is running and ngrok is running and also before actually I'll get into that later. Let's just run this.

D

Okay, I'm going to open the debugger hit, run.

D

Live coding makes me nervous, but so far so good, okay, so edge is now launched and we can see that teams is loading.

D

Now we should see the app install dialog appear any second.

D

Now any second now.

D

Hey I'll have some knock-knock jokes prepared ahead of time. Next time.

D

Okay- and here we go- that's a good sign that we're getting ready to see the app install dialog and I'm going to install the app.

D

So as you can see, the app has uh side loaded into the team's web client and uh I've already hit the install button. You're not missing much there, but what you're seeing now is the single sign-on speed bump we're asking the user to consent to performing sso, and you should only need to do this once.

D

Okay, I've consented.

D

D

Perfect, we've got the sso token, and now we are going to consent to graph, because this app actually does two things. It performs sso and then exchanges the sso token for graph access token, so that uh this app can retrieve the user profile photo and display it in the teams app, which is what we're doing and that's not something you can do without calling graph.

D

So how do we do all this? Now? Let's go back to the code and see what's going on great and I believe we left off at the sso login success function and if you recall, we had to consent twice once we had to consent to sso and that happens immediately after we perform this get off token call, and you shouldn't have to do that again until your token expires, and afterwards we have to consent to graph, and that happens afterwards, so get sso, ssl login success. What happens after ssl login success?

D

We get the result, which is the token, and we are saving it to state in the sso token field on this component and once we've set it.

D

We execute this call called exchange client token for server token, and what this is going to do is it's going to take your sso token and attempt to exchange it for a graph access token, so that you can use that graph access token to make a call to graph and get your user profile photo.

D

As you can see, we are calling this api called get graph access token and we're passing ssl token, and this is something you're, just calling your own back-end server and it's going to have the same url as the app is running from, and even though the api server is a separate project. That's running in a separate port, we're able to use the exact same url, because in this package.json we're specifying that localhost 5000 is going to be a a proxy server.

D

So that's just the technicality of react apps and you can look up how that works later if you're interested, but it just works now. What we're going to do is check after we call the server.

D

Let's look into what happens: I'm going to open up the server code server.js and we're getting the tenant id from the sso token that the front end passed to the back end and this where this is the access token endpoint, to retrieve your graph access token and I'm going to skip over this part here.

D

This is just the details of querying graph, but what's interesting is here now, if you recall, I had to con actually consent to graph, and you should only have to do that once and this code here will show you the next time you access the app you're. You do not need to consent, and this code here will show you why you need to consent.

D

So we already queried using this fetch call your graph access endpoint, and we got the data object back from that endpoint. Now we're going to check the response happened.

D

Okay, so this line here is checking to see if we received an invalid grant error or an interaction required error back from the graph access point, and this error means either you. It means you haven't, consented to the app and you need to consent to this app. You need to con send to this app because either your admin hasn't pre-consented to this app, which is very, very common or your. It admin requires that you perform multi-factor, authentication anytime. You are accessing this data, which is also a very common use case.

D

So if we catch either of these errors, we're going to send back a 403 with this consent required error message and the client will handle that or if everything's okay for the most part, we're just going to send the graph access token back as the data object, and if there's an unknown error, we're just going to throw a 500.. Now, let's get back to the client code, okay, so what you guys saw was we returned a consent required error back and we're going to handle it.

D

So if we require consent, we're going to set consent required to true and we're going to show the consent dialogue and when we show the consent dialogue, we are just simply calling the authenticate method from the microsoft teams sdk, which pops open that default.

D

Azure authentication experience that you saw and if the user consents the consent, success method is fired and we are going to set the result, which is more, which is just your graph access token into the graph access token field and then once that's set and we're going to say that consent has already been provided now, since we're making a change to state that triggers a life cycle update and the component did update method is fired.

D

Now, we're going to check to see if the previous state did not have a graph access token, but we now do and if we do we're going to say call graph from the client.

D

Okay, now we're going to call graph from the client and we're going to use the graph graph access token that we've saved in state to retrieve our profile photo and we're going to take the blob data. That's returned from that call to graph convert it to a photo, save it to the photo state object and, during the render method, we're going to return the photo.

D

So that's it in a nutshell.

D

Alan should have the azure app registration that was created when we did all of this and by the provision is the right word to uh describe what what occurred and we can quickly take a look at what happened under the hood to show that none of this was really any special magic, we're just provisioning an azure, app registration on your behalf and also, let me show you a couple of things here, so if you will notice in the env files that are in your server code and your client code, we've pasted all of the information that is relevant to displaying your uh your project into the in the files.

D

Now these are the fields that get created that are part of your azure app registration. I'm going to stop sharing my screen so that you can okay there we go okay. Where do you want me? Click first, oh! No! This is perfect. So, as you can see, we created this sso app registration on the back end, and this is powering the teams app that you just saw so all of the client ids are here. If you lose it they'll redirect your eyes.

D

One thing to note is that, at the very beginning you are asked to provide the domain name where your app is going to be hosted from we. uh The one we used was teamflix.nroc.io.

D

If you see the application id uri field under in the essentials section of this app registration, you can see teamflix.io if you don't have a paid subscription to ngrok or if you're, just changing your domain name. A lot you're gonna have to come here and update that field, as well as the redirect uri every single time. You update it. So it's good to have a fixed domain name that you don't have to update all the time. If you're going to be doing this alan, would you mind clicking on api permissions.

D

By default, you'll get user.read, we've already added some here just for fun at another point, but if you would like to request more permissions, what you need to do is come to this page hit. Add permissions, hit microsoft graph hit delegated permissions, and you can just select the permissions that you'd like, but if you notice on the right-hand column, where it says admin consent required, none of these require admin, consent, meaning the end user can consent to the app themselves. However, alan would find clicking on something there.

D

You go admin unit read all if you were to, for example, request this permission, the end user, a standard user will not be able to install the teams app and actually use it. They can install it, but they'll be greeted with a message that says your admin must pre-consent to this app or your admin must consent to this app.

D

So, if you're building apps for the team store, you may want to avoid using these permissions unless you have a way to access those admins and ask them to pre-consent to your app if you're, building lob apps, there should not be a problem because generally admins will be pre-consenting to your app or you'll know who they are, so they can do that if you're building, 3p apps generally you'd want you want to stick with permissions that don't require admin consent.

D

So for each of these permissions you can just copy and paste them, and I'm going to go back to sharing my screen. Now you can copy and paste those permissions into the env file in the api server project and just separate them with the space, and that's how you request more permissions and the next time that a user tries to load up your app they'll, be greeted with the consent dialogue again asking to consent to those permissions, and that is this feature in a nutshell.

D

Please look out for the update later this week. Try it out if you find any bugs. If you hate it, please let us know and we'll fix it. We're.

A

A

The bot sso is coming soon also.

D

uh Samples for that I don't know if card that you mentioned that I just I haven't so this is tab. Sso uh bot sso is on the horizon and uh we're excited to get that out to you as well.

A

Which also leads us to who's next up with oh joss fee and tatiana ojaspi I'll. Let you go ahead and take over.

E

Thanks dana thanks um karthik and alan hey folks, oh, I am ajasvi and I'm the program manager for bots and teams and I'm joined by tatyana, who is the senior software engineering manager for bots and teams, and today you know we're excited to talk about single sign-on for bots, which is generally available now.

E

So let me start by just giving uh an overview of like the odd story for bots today prior to uh prior to single sign-on. Obviously, so why exactly? Would you require authentication inside a board? Well, typically, it would be that you know to a user might send you a request, or you understand that, in order to complete certain workflows, you need access to certain privileged information uh of or from a particular user. It could be uh their email address. It could be uh some other protected part of their microsoft graph token.

E

You want to access a particular file, a calendar event or a meeting on their behalf. So in order to enable all of these like these more complex and advanced scenarios, you need to authenticate the user and then be authorized to access the user's token and credentials on their behalf. So, in order to do that, you need some sort of authentication.

E

So, typically, what that involves in teams is, uh if you've done this before there are some things called sign-in cards. So the way this flow will typically work is a user will send a message to your bot. At that point, your bot determines okay to complete this particular workflow. I actually do need the user to sign in maybe it's asking for some level of privileged information or org charts or something like that, and then you send a sign-in card back.

E

Then uh the user sees the sign-in cards. You know the messages stand amount to something like hey in order to proceed. Further, please sign in the user. Goes ahead, clicks the sign-in button. You know you. We just saw karthik's example, there's a little sso pop-up and then that takes us to the azure a80 uh sign-in. So it's very similar from there from this point on to for bots as well, whether it's spots or tabs and uh we take- we take the user through the auth provider.

E

They do the necessary checks, then they approve, they verify the authentic uh identity of the user and the return are taken back to us and the bot can then take this token grab the necessary information such as that email address or like some other information like chart in our previous example, and render whatever is necessary to take that information and like complete the workflow and render the necessary information back to the user.

E

Now all this is well like one, for example, it works right and there are two key pieces over here: the sign-in card, and then you haven't registered your application with azure active directory, the silent card being a means to authenticate the user and you having registered your application with azure active directory, means being roughly a means of authorizing your application to talk with our azure active directory now, okay, so this works all well and good. Everything just seems fine right, but there are a few limitations with this approach.

E

The first implementation is that you know there are certain class of applications, for example the who word within teams. This approach even requires, like our first party applications or certain it admin or tenant, approve applications. Even these applications that we think like operate with a higher degree of trust, especially the ones uh authorized by the tenant admin.

E

They also need a sign in and secondly, uh in certain cases, the bot uh framework store will not refresh the tokens, which means that the user will have to keep on signing again and again and again until we exhaust them. And you know this can be bad for your app's retention.

E

So in order to combat both of these core issues that we're seeing with authentication today, we've introduced something called a single sign-on for bots. So I'm going to play a video and I'll just walk us through what happens earlier and how the new sso flow is going to look like.

E

So here is the who bot and what is demonstrated is basically, if you are, let's assume that I signed in once, and I'm asking about like hey. Who are these people that I work with and effectively? If the tokens expire, then the bot is just going to be like hey. I really need you to give me permissions before I can uh perform searches on your behalf. I'm not going to be able to do this unless you sign me and authenticate and we move forward.

E

So that's effectively. What is happening on this page is. The tokens have expired, there's no way to refresh them other than just going through the flow all out now with single sign-on for bots. This workflow is going to change slightly and what's going to happen. Is this is a demo board over here and if all it does is just sends authentication tokens when you say hey, so you know a pretty savvy bot, but I go to the board, I'm like like say, hey, and then you see this small little fm barrel. Message come over here.

E

That says that we need to ask additional permissions on your behalf, like you would only have to do this once and then you continue with it. So the first thing you notice is that, as opposed to the sign-in cards that were taking like the majority of the space earlier, what we're doing right now is just a simple fml message at the bottom and what this is good from a ux perspective, one because it doesn't leave the trace of the sign and on the bot chat.

E

So it keeps the bar chat, consistent and clear, and only you know keeps things more clear and relevant to the actual information and the actual workflows that your bots wants to accomplish, rather than some cards sitting there with silent content two, since our tokens are refreshed right and you send us a request for sign in since this message is ephemeral on the uh the first thing that teams is going to do is we're going to silently try and acquire the token and see if, like the tokens, are available uh in the in the bot framework store.

E

If they are available, then we'll just pass the token back to you. So the user won't see a prompt and if they aren't, then they will see the prompt. So this is one of the reasons why we had to make this ephemeral and what you see and the reason why you see this over here. So then you go ahead and the user completes the flow and that's it they're signed in now um now we're just going to create an event and uh yeah. So there we just created, like some.

E

You know a calendar event for a particular meeting and now with single sign-on you'll, be able to see that the bot is just able to grab the event without without having to prompt the users to sign in flow again.

E

Right so there we go so this is an event right. So, let's move on to scenario number two uh now over here in this. This is uh I've got a so this is another. U, this is a totally different user. It's a different tenant and this user has a bunch of very important meetings over here. As you can see, and we want to visualize these meetings because you know, presumably we can run some sort of analytics and try to understand like how busy work, um how busy the employees are and what's happening over there.

E

So in this case uh importantly, I grabbed this bot from the tenant admin store right, my it admin has authorized this particular board to be enabled for sso and he's opted in the entire tenant on their behalf, because this is presumably like it's it's a trusted board. The admins uh think that's valuable enough and so they've enabled sso for this one now what's gonna happen is when you try to figure out like what the bot can do.

E

It straight up is able to like access all of your meetings without the user having to decided, even once, how of which we think is a very powerful scenario because, like for a certain subset of applications for a certain subset of bots, which you've developed yourself or your you've worked with their isvs to customize, your needs you've effectively reduced that first hurdle for the user being productive and for them being able to access uh the resources or devices.

E

So that's it. So both of these features together will be part of sso4bots, the first one being the ability to refresh tokens which eliminates the needs for users having to sign in again and again, that's that's the first core scenario, the second core scenario being the id admin approving a particular application and opting in on behalf of users inside that tenant.

E

So, let's quickly go through the flow for sso at runtime, and this is all documented on uh on msdn and I've also linked the docs from on this page, and you know um we'll make sure that they're included as part of the blog post uh that data sends out, but with all of these meetings.

E

So briefly, here's the floor. Here's the like six steps that happen.

E

So the first thing that happens is that your bot data mines that, for whatever reason uh to complete a particular workflow, it means the to sign in the user and it sends an auth card to teams.

E

Teams receives that message and for the first time, for first time users. It creates an fml message, much like you saw over here and underneath the word and you're seeing underneath over here and prompts the user to sign in and makes a call to azure active directory to grab the users tokens and credentials so once all the all of that is done once all so so it signs a prompt sign in and then requests the credentials from azure active directory on behalf of the user, then azure ad says. Okay, here are the credentials.

E

Microsoft teams um take it and pass it on further. Then microsoft teams will take, grab those tokens and like pass it on to you, the bot developer in your application, and then you know, you'll use the token parse out the relevant information for this.

E

In this particular case, the various meetings that were part of the user's calendar and then or or for example, it could have been the email address or the org chart in the case of the who board and use that to move on further and complete the move, and that's basically it that's sso for runtime from time. The core feature being that point number two, which is the cause of major major user friction, is going to be taken away because the user will only have to do this once or you will have the id admin approve.

E

The bot and the user won't have to do this at all, and that's it. That's single sign on for bots at runtime.

A

Awesome, thank you in case some of you don't know. There are a number of other developer community calls across the microsoft 365 and teams platform and they're listed here. You can also get there at aka.msm365. Dev calls and you can download the calendar invites to whichever ones are relevant and interesting to you.

A

If you have questions about teams, developer documentation, which is aka.msteamstev or teamstead feedback, and please feel free to provide good, useful feedback things that you'd like to see changed and they take all of this into consideration.

A

um So that's a good way to get in touch based on feedback and then, lastly, our recording will be made available on the developer youtube channel and then, if you're, not already following us on twitter we'd love to have you follow us to get all the latest announcements about the 365 platform at m365, dev and other than that. We'll see you on december 15th next month.

A

Thank you. Thanks to all the presenters really really awesome call this month, it was um you guys had some great information. So thank you.

E

Oh thanks data thanks. Everyone bye.