Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - Create a Teams app with Azure AD Single Sign-On - Lab A02

Description

This module introduces you to how to create a Teams app with Azure AD Single Sign-On

📖 Full lab can be found here https://microsoft.github.io/app-camp/aad/A02-after-teams-sso/
👩🏾‍💻 Completed lab source code is here https://github.com/microsoft/app-camp/tree/main/src/create-core-app/aad/A02-after-teams-sso

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=ZfXapTSbECM&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=8
⬅️ Previous video on this series - https://www.youtube.com/watch?v=5B50MusyNR8&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=6

#Microsoft365 #AzureAD #MicrosoftTeams

In this lab you will learn to:
• Create an app manifest and package that can be installed into Teams
• Update your Azure AD app registration to allow Teams to issue tokens on behalf of your application
• Use the Microsoft Teams JavaScript SDK to request an Azure AD access token
• Install and test your application in Microsoft Teams

🧾Learn more about SSO support for Teams tabs in https://docs.microsoft.com/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso?WT.mc_id=m365-58890-cxa
📖Full lab can be found here https://microsoft.github.io/app-camp/aad/A02-after-teams-sso/
👨🏻‍💻Completed lab source code can be found here https://github.com/microsoft/app-camp/tree/main/src/create-core-app/aad/A02-after-teams-sso
🛠️Lab prerequisited are here https://github.com/microsoft/app-camp/wiki/Prerequisites

📽️Watch this video to learn about ngrok https://youtu.be/A5U-3o-mHD0
📽️Watch this video to set up your free developer tenant https://youtu.be/DhhpJ1UjbJ0
📽️Watch this video to learn about multitenant apps https://youtu.be/RjGVOFm39j0
📽️Watch this video to learn more about SSO in Microsoft teams apps
🛠️Lab prerequisites https://github.com/microsoft/app-camp/wiki/Prerequisites

✨ 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 and welcome to teams app Camp I'm Bob German in this video I'll walk you through lab a02, in which you will extend a simple SAS application to become a personal tab in Microsoft teams complete with Azure ad single sign on. If you've completed, lab a01, then you can do the lab, along with me, just navigate to AKA dot, Ms, slash, app dash camp and scroll down to the link for lab a02, create a teams app with Azure ad single sign-on.

A

In this first exercise, we'll authorize Microsoft teams to log users in to your application. This is basically setting up the Azure active directory ability for teams to do single sign-on.

A

So you can follow the link right in the instructions to go back to the Azure active directory portal and from here we want to return to that same app registration that we created in the previous lab and go into the expose, an API section of that application and here's the API that we exposed for incoming calls. What we're going to do is authorize teams to issue tokens that call that API on behalf of our application, and to do that, you need to copy two globally unique IDs, two magical special guides.

A

This one is for the team's client application and the other one is for the teams web-based application and both of those are going to get authorized uh to issue tokens for this API that you um had exposed earlier so just make sure that the good is well formed and make sure you check off the check box to uh allow that particular scope to be issued.

A

In this next exercise, we're going to create the teams application package now recall that your application isn't actually going to run in teams. It's just going to appear in teams. So in order for that to work, we have to tell teams where it can find your application on the web to do that. We need to create an app manifest and put that inside of a zip file, which is the application package that gets installed into Microsoft teams.

A

So the best way to do this is to just go to a finished copy of the Manifest folder, because inside there there's some scripts which will generate all this for us. So I'm just going to go to the solution, folder for lab a02 and copy the Manifest folder, and then I'll go back to my working folder, where I'm doing the actual lab work and paste that in.

A

And now, if we go and look at the files, you'll see that we have this manifest folder and inside of there is a Json file which is a template for the Manifest. So a script is going to fill that in based on values that are in our environment file.

A

So, for example, it's going to set up static tabs pointing to our web page and some web application info that is used for single sign-on, so we're missing one environment variable that will be needed to fill in that template, and that is the team's app ID. So we'll add that in and you can copy that right out of the instructions and that uniquely identifies the app to Microsoft teams as opposed to the client ID, which is uh used to identify it by Azure ad.

A

So now, let's go and install the zip package so that we can zip up the result and in our little script and we're going to add that script. Well, the script was in the Manifest folder when we copied it. So we just have to tell the node package manager about that script.

A

So you're going to edit your package.json file and add the script right in and there we go and now we can run the script and what that will do is it will take the values out of the environment file, put them into a manifest.json file and then add that to a zip archive, along with the icons for this application. So here you can see that manifest.json has the hostname and other values filled in and that we have created the zip file.

A

So in this next exercise we're going to modify the application code to detect that it's running inside of Microsoft teams and then to use Azure active directory single sign-on instead of the MCL library to log users in to Azure ad.

A

So to start we're going to copy this piece of code which is going to go into a new module so on the client, Side open up modules and create a new file called teams. Helpers.Js.

A

And just paste that file that code right in there, so this code first of all, has a function called insurer teams, client initialized and that handles the fact that you always have to call initialize exactly once and so we're caching, the promise actually so that it will only get called once even as multiple web components call it and just initialize the team's API.

A

As you can see on line seven then there's an in teams function that will determine whether or not our code is running inside of teams, and it does that by getting the team's context or failing to get the team's context if it's not running in teams.

A

Okay, so now that we have our helper functions, all set up, let's go ahead and put them to use. So the first thing we'll do is update the login code so that it uses teams SSO when we're in teams, so I'll copy those import statements and put them right near the top of the identity, client, JavaScript and so now.

A

I'll have the teams SDK and also my helper functions available to me inside of there and then I'm going to grab a little bit more code, which is just going to say, look if we're in teams skip the m-cell stuff and instead just call the SDK to get the access token. So that's down here and it's it's listed in the in the instructions, but when we finally get the access token here in get access token 2. we're going to do that check and then I just have to kind of clean up.

A

My uh braces and I love this uh just format document feature which leaves everything in in looking properly indented.

A

Okay. So now we're going to um go ahead and also augment the log off code and there's not as much to do here but I'm just going to disable it because you're really logged in to teams now, so the log off doesn't really make a whole lot of sense.

A

So this new version of the function will only log you off if you are in teams.

A

Okay, so the last thing to do is to hide the navigation, because teams is going to provide tab navigation, so I'm going to grab an import statement again and this time go to a web component, which is the navigation component and I'll just import the in teams function, so that I can tell whether or not I'm running in teams and then I'm just going to make a little change here so that it will call and check if we're in teams- and it won't render anything if, uh if we're inside of teams, so I'll make that change here and okay.

A

That should about do it. For the code changes.

A

All right, so the big moment has come when we're actually going to run our application inside of Microsoft teams. So to do that, I'm going to type npm start to start up the web server, and so that's going to go ahead and run as before. On 39.78 and now I can come into Microsoft teams, and we already have the app package so with the web.

A

Server running I should be able to upload the app package and access the application so to do that, I'll go into applications and there's a manager apps button in the lower left corner and from here I can upload an app and that works, because I had previously enabled that policy.

A

So upload. The app here and I need to go find that zip file in my working directory so manifest Northwind dot, zip there. It is, and we can upload that and it'll come up with some information about our application and that all came out of the Manifest and now I can click add to to display the application and, oh, no. Well, now you get to see what happens if you forget to start ngrok right. So I got a little tunneling message, so let me start in grok.

A

After all, and as I mentioned I've switched over to using my custom subdomain so that I don't have to change the app registration every time, I run ingrock, and so now everything should be aligned notice that there's a little refresh button up here in teams that just refreshes your your app and there we go. This is now fully functional.

A

I was logged in uh without any Interruption at all, and instead of navigating via the um nav bar in the app I can navigate using the tabs in Microsoft teams notice also that I can go back to my original application and it still works as before.

A

So that's an important goal of app Camp is that you should be able to extend your app into teams without breaking it, so we Endeavor to always have keep the original application working at the end of each lab.

A

I hope this video makes it easier for you to complete your journey through teams app Camp once you've completed the Core Labs, you can go on to the extended labs and add Advanced features to your application. So thanks for watching and I wish you smooth sailing as you complete the lab.