Microsoft 365 Community Community Demos, 24 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with PnP Teams QuickStart

Description

In this 17-minute developer-focused demo, Wictor Wilén creates a Teams SSO tab in 15 minutes using browser-based Codespaces, currently in preview. Follow Wictor as he creates a new Teams tab, registers it in Azure AD, accesses Graph for presence courtesy of Microsoft/Teamsfx js library, deploys app in App Store, and deletes app when done. PnP Teams Quick Start is based on GitHub Codespaces, effectively your virtual machine in the cloud. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on June 24, 2021.

Demo Presenter: Wictor Wilén (Microsoft) | @wictor

Supporting documents:
• Codespaces preview – https://github.com/codespaces | https://github.com/codespaces
• Github Repo - teams-quickstart | https://aka.ms/pnp-teams-quickstart

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

So I think this is uh one of the most exciting demos I've I've done in a while. uh I'm super excited about this sort of feature capabilities.

A

Here I tried to do this in under 15 minutes anyways and I I just felt for sneaking some new features as well dude in the demo this morning, so but anyway, so the pmp quick start is based on github code spaces and the whole idea with github codespace is essentially you get the virtual machine in the cloud and you can do everything in your sort of browser and where you get started. First of all, you need to sign up for codespaces.

A

It's currently in preview, so just go to github.com, codespaces and sign up for that, and hopefully you get in the preview, then once you've done, that you just go to ak dot. Ms slash pnp teams, quick start, and that will take us. Take you to this github repo, it's very simple, github repo!

A

It contains a readme file, essentially what I'm going to do in the demo and walk you through how to scaffold the teams application using this codespace and also the definition of the docker file, because it's a it's a container running in in the cloud and everything so it's in there and to get started.

A

All you need to do is to click on the green button here called code open with code spaces and then, if you already have a connected code space to this repo, you can choose that one or create a new one, which I will do right now. This will take a few minutes.

A

So uh while we do that, let's prepare something else for our demo now go over to my demo. Tenant and I'll just create an azure 80 application because we're going to build a tab with sso support I'll, do this very fast, but you've seen us do this multiple times previously, it's all in documentation.

A

So let's call pnp demo.

A

765 click register a couple of things I want to highlight in here the the mostly uh standard things I'm doing, and I need to copy the application id because I will need that later.

A

So, just post it here in my notepad on the side, I will need to create create a secret here, because we need it for the demo that you typically don't do that when you just create an ssl tab, but let's create a secret, because we will do on behalf of flow here to get single sign-on support to call into the microsoft graph, with some new, exciting features in just a bit. uh The second third thing I need to do here is expose an api.

A

I just click set and click save here, because when we're using code spaces, we will get a dynamic url, and I would update that as soon as I have that url.

A

So just click set here, and so I can come back and edit this one later then I need to add a scope, access user as user- and this is all standard- is exactly what you do and according to the instructions of course, you should put better descriptions in here, but you just need to add that uh I need to add the two client applications that we need for an sso tab. That's two guides. You need to know or copy paste, which I prefer there's too many goods in my head.

A

So I copy paste and let's do that and do the so. The one is for the desktop and mobile application and one is for their web application for teams. So let's take the second here as well copy paste.

A

I know it's boring to see copy paste, but the virtual machine and docker file etc is spinning up in the background, so I'll take the time to do this. So now I know it's all set here, except by the uri which I'll take in a bit. Then I need to assign some permissions to this one and that we do the default permissions that we need for an sso tab.

A

Let's delegate the permissions, it's email, offline access, open id and profile, so let's choose them and for the second part of the demo we will need the presence as well. So we'll add that one presence read, add permissions and to make everything simpler. I grant admin consent directly now, so we don't have to do that later.

A

So, essentially, my app is up and running already and hopefully, if we switch back over to my code space now, the code space is actually set up, but in the browser I have vs code and, as you can see as well, let me zoom in a bit.

A

It's actually installing all my extensions that I have in my local in my setup, synchronized with github as well. So every all settings that I have all my extensions. The preferences configurations are actually getting in here. As you can see, the icons are being updated because I have that plugin.

A

I have the terminal window here and let's create the directory where we, let's store the demo file demo pmp pmp demo, so we know where it is, and I call it 765. Perhaps I go down into that directory and, as you can see, it's already created here and let's just type yo teams.

A

So this is the cool part of this, so this docker container that we actually have running in the cloud here, there's no local installs. I can actually do this on an ipad or any any browser. Essentially uh so it's already pre-installed your teams and the required utilities for that- and I will just click through everything here, and the only thing we will configure is that we want to use the tab here. We want to tab, we can skip the url that would be dynamically generated for us and no indicator.

A

We give it a name, it's configurable in a team and yes, I want to do azure, ada sso support for this tab, the app id I can copy paste it in here, but I'll show you and faster way to copy paste those kind of things just click through here. So my project is now scaffolded and it's installing all the npm packages.

A

We can see that in the uh you can see all the files in here and the first thing I'm going to do, I'm going to I'm going to do a little bit of cheating here to save save a couple of minutes, so I went to the dot env file in the bottom. Since I didn't enter the the app id app id and app id uri in the wizard.

A

I can do it in here instead, so just copy paste application id that I put in my notepad put in here and replace that one and let's also replace this one and finally, I add the tab app secret here. You typically don't need that if you just you, do an sso tab, but the for the second part of the demo. We need the secret as well, and I copy paste that secret that I have here see like that.

A

So the cheating part I'm going to do is that this domain name will be dynamically generated for us when we start essentially serving the application from this code space, and it will actually look like this.

A

I can copy the url in the browser here and paste in here like that, and then I need to change github to github preview, and I also need to uh append sort of the the the specific port that I'm exposing to this application, since this application is running locally in the machine on port 3007, which is defined up here, I need to append that one so once done I'll save that file and I'm actually going to do turn off auto save here, that's a good tip for you as well, if you're, by default in codespaces autosave is set to on, but that's super annoying.

A

If you're working with files- and you you forget to import something- you don't do linting and those kind of things, so I prefer to save manually. So I just toggle that one now we're almost ready to go.

A

We need to install two more packages for the second part of the demo, so I go npm install and first of all, I'm gonna install the microsoft slash teams, fx, which is a new javascript library for the used by the team's toolkit to to provide a better single sign-on experience and get access to the graph client in non-sharepoint framework solutions such we're doing in here where we host it ourselves, but also a server-side component to do that. Exchange of token.

A

From the uh sso token we get from from the javascript client to a proper access token that I can access graph and that's a new package called uh sorry teams, simple auth, and it's just currently in preview. So I need to save that.

A

So that's all we need to do, but before we go further, we need to copy this. One up here, as I said, come on select.

A

Well there it is, I need to go over to my uh app registration and update that uri in here, because if I don't do this there, we will get single sign on errors, so now actually get this dynamic url generated specifically for my code space in here. If you create new, if you reuse the application, this is typically the only thing you need to to to change in your azure id application.

A

So let's go back to codespaces and we're ready to run this application and for to do that we type gulp code spaces serve. I run in debug mode, no linting, but also append the flag called publish here. That means it would automatically publish my team's application to the team's app store and, as you can see here, it's generating the manifest zipping the sipping it together, but then then it wants to log into my tenant. So you can see to sign in use the web browser and use this code.

A

So I'll jump over to my dev tenant go to aka ms slash device, login paste in the code and as you can see here, this is the pnp management shell. So we're using the m365 cli in the background to actually uh upload the application to the team's app store, and if you go back to the browser, you can now see it's uploaded application to the team's app store and you start to build the application, the client side and the server side.

A

This will take a couple of seconds and once the server is up and running, which will happen at any moment right now, we need to do a small configuration you can see on the right hand side here, your application is running on port 3007 and it's available by default. All ports are private. That means that you need to sign in to them, but in order for teams apps to work, the this page has to be publicly accessible support.

A

3007 here I right click on that one and make public and we're all set, and we should be able to go into microsoft. Teams go to the app store. I need to reload it since I just published my app and sometimes I need to reload it twice due to some caching.

A

uh So, let's see here my org pnd pnp demo, that was not the right one. We need to reload. Once again.

A

As I said, this is a little bit annoying, but that's yeah due to caching performance, but you typically only need to publish once unless you change something in the manifest there. It is pnp demo, 765 click on that button, add to team pmp setup tab and we should have our tab soon, loading.

A

Hopefully everything is working, so you can see it's loading here right now, just keep grabbing the javascript files and something is very slow. Let's go over here see what happened terminal it download the config. It should be working. Why not? Let's try again pmp demo 765 there. It is now it's working demigods had some fun with me and, as you can see, there's this old tab work it. It puts my name in here, and that means it's actually properly signed in without any pop-ups or anything letting me get my name in here.

A

So that's cool right, that's fairly standard, but assume that we want to show the presence in here. How can we do that, and we can't do that with the normal azure ad token that we get from teamsing sign on? That's why I added those two extra extra packages. So the first thing is that we need to add a server-side implementation of this and that's essentially a simple express router. So I'm just importing this simple authrouter from the team, simple auth package.

A

I need to configure that one. So I'm not going to write all this code, but essentially it's you copy paste, the same code over and over again- and I just added somewhere in here for instance, so I'm adding a new router so and a post to auth slash token will go to the simple auth router and configure it here with the different uh dnv variables that I configured previously presence read and my tenant id.

A

We can click save and that will actually recompile the backend for us and let's go over to the that, doesn't do anything to the tab that we just saw. So if you go over to our client side and to the react component for the tab, let's first add our present in here. As the state presence set press presence, equals use, state of type string with spell correct as well, and we set unknown as the default.

A

So that means that we have a state here for presence, and we want to show that so we in down here when it says hello, uh victor normally, we you are- and let's put presidency presence in here so we'll actually type out that when we have that, but how do we get that done since I said we can't call directly into the graph, we don't have the graph client or anything in here and what we do.

A

That is with the help of that microsoft teams fx component, so I'm just gonna, do an import like that and then I'm gonna copy paste uh some more here and that's the same kind of thing here you copy the page the same thing over and over it's in there read me documentation how to do that, but essentially it's a couple of lines. First of all, we load the configuration for my uh back-end, the simple it was the back-end endpoint, with the tab up id the uri, the tenant id and the endpoint.

A

Essentially, the the web server we get this from based on that configuration, I can create a team's user credential and uh it's just creating like this, then I can get the microsoft graph client by using teamsfx.create microsoft, graph, client passing in the credential and then press dot read all the scopes that I want. And finally I get the graph client and can call that exactly how I'm used to do uh in in any kind of javascript application.

A

I need to add async here as well, so once we've done that and we can press ctrl s to save it will take 15 20 seconds to get started.

A

So the reason I think these code spaces are really cool. I can talk about that while we're rebuilding here is that I can make these applications super fast and hopefully within 15 minutes, as we do here essentially have something up and running test that and validate that and then once I'm done, I can just throw this one away and start over again.

A

If you want to keep it. Of course, you should fork uh the repo that we had and then commit your changes, but typically what I've done over the uh the last few weeks is using this for all kind of testing and and don't have all that those node modules libraries to remove on my on my machine etc, and it's fairly fast as well.

A

So, let's go over to this one here and let's reload our tab and let's see what happens so, I'm available. It says here and if I go in here and change my presence to busy and reload again, it will actually show that I'm busy. So that's super way easy. In 50 minutes we created a new teams, tab deployed it.

A

We added uh graph capabilities to it and one when I'm done like this, I can just go in here close this browser go over to codespaces reload and remove this one and all my code is gone and the demo is done. Thank you.

B

Awesome victor, thank you for that demo. I think you just set a record for minds blown in a call, so uh yeah.

A

But I I needed to add that extra thing in there and there with the single sign on I think this is uh super useful and, as I said, it's been extremely convenient, making those one-off demos you want to test something out or install new libraries, and you don't want, pollute your whole machine or wsl or whatever you have right. So I think this is perfect for those uh tests and demos.

B

Absolutely- and I don't know if the friends that heard him he said you could develop teams applications on an ipad.

A

Yeah exactly so there you.

B

A

Down the browser I don't have to have any local, install or anything here, yeah.

B

Absolutely amazing, fantastic thanks.

B