Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - Linking your identity system to Azure AD SSO - Lab

Description

This module introduces you to how to link your identity system to Azure AD SSO

👨🏻‍💻 Completed labs source code can be found here https://github.com/microsoft/app-camp/tree/main/src/create-core-app/bespoke
📖 Complete the labs found in B-path starting with B01 https://microsoft.github.io/app-camp/bespoke/B01-begin-app/ and complete all four labs
🛠️ Lab prerequisites can be found here https://github.com/microsoft/app-camp/wiki/Prerequisites

This video is part of a series in a playlist about Building apps for Microsoft Teams: https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU

➡️ Next video on this series - https://www.youtube.com/watch?v=RjFtsd7KcuE&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=10
⬅️ Previous video on this series - https://www.youtube.com/watch?v=ZfXapTSbECM&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=8

#Microsoft365 #AzureAD #MicrosoftTeams

In this video you'll learn
• Setting up the application with a non-Azure Active Directory Identity System
• Creating a Teams application
• Adding Azure AD SSO to your app
• Teams styling and themes

✨ Demo Presenter
• Bob German (Microsoft) | @Bob1German

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU
• Overview on Microsoft Teams extensibility - https://learn.microsoft.com/en-us/microsoftteams/platform/overview
• Design guidance for Microsoft Teams apps - https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-overview
• Sample Microsoft Teams apps with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Teams&sortby=creationDateTime-true&page=1

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/homehttp://aka.ms/m365/community

Sharing is caring! You are awesome! 🧡

A

Hi I'm Bob German in this video I'll show you how to take a simple web-based application and turn it into a Microsoft teams application.

A

The interesting part of this sample is that the starting application has its own login and identity system in the teams. Application we'll use Azure active directory, single sign-on. This is accomplished by linking the app's identities to the Azure ad identities that are used by Microsoft teams. As you watch the video keep in mind that this is also a Hands-On lab. That's part of teams, app Camp. You can find this lab and much more at AKA dot, Ms, slash app dash camp teams. App Camp is structured as a set of labs that build on one another.

A

You'll need to start by completing the core teams: application, which is a personal tab. In Microsoft teams it uses Azure ad single sign-on for Authentication. Once you have the core teams, App working, you can do the extended labs in any order. You choose based on your needs and interests.

A

There are two paths that will give you a core teams: application in this video I'll show you the B path in which you're provided with a starting app. That does not use Azure ad, but it uses its own bespoke authentication scheme to log users in and authorize their access.

A

If you're, using an off scheme such as auth0 identity, server, OCTA ping, Federate or even Azure ADB to C, which is not the same as Azure ID, then the B path is for you. It will show you a pattern for mapping non-azure ID identities to Azure ad, so you can enjoy the benefits of single sign-on and act on behalf of users when calling the Microsoft graph.

A

This may not work for every application, depending on how it's designed, but a number of our partners have been successful. With variations on this approach. There are four labs in the B path. So, let's start with the first one, where we'll set up the Northwind orders, application on its own.

A

So during lab b01 you'll set up some prerequisites like node.js and a tool called ngrok. Ngrok is a tunneling tool in this case. It's going to forward messages from your domain here.ngrok.io to my local host, my local web server. It's going to handle SSL termination, name resolution and also we'll tunnel things from the internet into my local debug environment.

A

This is certainly the easiest approach and it's what we use in the lab. But if you know how to set up your own externally facing web server, you don't need to use ngrok per se, but the instructions expect it and you'll have a unique identifier. If you use a free ngrok account that changes every time you run the tool, so pretty much want to leave it running, at least during one sitting at your lab okay.

A

So here's the starting solution and the instructions will have you make a copy of this folder and what I want to say is that there's no Microsoft specific technology here this is written in vanilla, JavaScript. The client side doesn't use any particular framework.

A

It's modern JavaScript, so there's web components and some Modern things uh es modules going on, but um you know didn't want to leave out the react, people or the angular people or the view people or what have you so it's kind of something that everybody should understand, and so all the pages are here, along with the JavaScript that that drives them Etc.

A

um The server side is written using node Express, which is probably the most common and popular approach to the servers to a JavaScript server, and you can also see here that we have downloaded the Northwind database using this script right here.

A

Db download the instructions will have you run that and that will pull down all of the tables that we're using in the Northwind sample database and save them as Json files locally, so that your server side code can then use this Northwind data service module to read and write that data so to run the app I'm just going to npm start.

A

And that will come up on my local host in that Port that the tunnel is going to so that if I come in and browse to the ngrok URL I'm prompted to log in now the bespoke login system- that's in here is extremely simplistic. It's not really secure. It's just dropping a session cookie depending on what user you log in and in case that wasn't insecure enough.

A

We also give you a complete list of users here and you can just pick one and paste it in and then we're not even checking the password right, but what it does do is it does check the cookie and provide some authorization check on each call and even as I go in and look at Janet's um orders. These are the orders that that she's associated with so I can come in here and and get a little bit of a feel of authorization going on.

A

If I go back, you can see that we're validating that on each call. So that's the Standalone app that we start with and that's what you set up in lab b01.

A

In lab b02 we're going to make our Simple app into a teams application and to do that, we're going to create a manifest file. Much like this one and that's going to be done by a little script, that the instructions will lead you through. That will take this template file and Stitch values from your project environment file into here. You'll get something that looks a lot like this. Only with your URLs and you'll have tabs for orders and products to find in there with the URLs to your application via the ngrok tunnel.

A

So if we just run it that way, however, it won't really work you're going to get an ER that basically says you're not allowed to run this app in an iframe and most login systems would not allow you to run in an iframe.

A

So the easiest way to address that situation is to use the Microsoft teams. Javascript SDK, and you can see here on line 8 we're calling Microsoft teams.authentication.authenticate, which ironically, doesn't actually do any authentication. It just pops up a pop-up window and then that's going to point to our original login page.

A

So our login page will no longer be running in an iframe instead of be running in a pop-up, and then everyone will be happy, except the users are still going to have to log in that way and you're not going to get the other benefits of SSO. So let's see that working and you can see that we get a login button because the pop-up may not work unless you, the user, pushes a button or does some interaction, browser rules right and I'm in the browser now. So when I do that, I see my original login.

A

Let me pick a a user login and it works fine. So this is the simplest and kind of shortcut approach to logging, the user into your application. So essentially, at this point we have kind of Two Worlds. We have the Azure ID world where Microsoft teams is, and the Microsoft graph API, which can access all the data in teams and the rest of Microsoft 365. user data in Azure ad Etc is accessed by the the graph. So that's one Island and then the SAS app is another Island and we're.

A

You know popping up the login and really letting the user do the integration. So what lab b03 is going to do is improve on this by adding some identity mapping code into the SAS application.

A

That's going to allow the user to sign in using Azure ad identities and Azure ID SSO the first time the user logs in we're also going to ask them to log in via the original login, so they'll, at least for a short time, be logged into both and then we're going to save away in a safe place, the user ID in Azure ID and in the other IDP now, just as an FYI. The user ID field is a good choice here, because it's it's invariant.

A

It doesn't change during the life of a user, whereas they might change their name or their email address or something else, and so we're going to store that inside of our simple little Json database and then, when the user logs in with SSO we're going to map them over to their original user ID for the purposes of authorization.

A

So let's see how it works.

A

So now, the first time the user accesses the app they get a little bit of a different login experience.

A

First, it says please log in using your Northwind employee ID, so we've used Azure ad single sign-on they're, already signed in with Azure active directory and now we're going to ask them to sign in using the original login scheme, and indeed it's that same, let's just pick a different user, this time and same login screen and now that's working now, if I leave the app and come back to it, it's actually going to log me in with Azure active directory and look up that mapping and get me Steve's orders correctly so where that's stored is actually here inside of these Json files and you'll, see that there's this new identity map table and I use the term very Loosely.

A

Inside of this of this Json database that Maps my user ID in Azure ad to Steve, which is employee, ID number five and the code basically takes it from there.

A

And then in lab b04, we update the user interface to use Microsoft teams Styles and we add some code that will change the theme in our app as we change it. Inside of Microsoft teams, and at that point we actually do have our core application and you can go ahead and begin to try some of the extended laps thanks for watching this app Camp lab briefing have fun and smooth sailing as you complete the rest of the labs.