Microsoft 365 Community Teams, 20 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams community call-January 2021

Description

This month's call, hosted by Jun Pak, showcased community demo on
implementing Microsoft Teams OAuth 2.0 Authentication Flow, and Teams Design UI kit & templates for designers.

Speakers: Ramin Ahmadi, ContentandCloud, Emily Chen, Will Shown

Resources
Ramin Ahmadi https://ramin.expert
Teams UI Toolkit https://aka.ms/AAaxe7i

A

Thank you guys for joining and happy 2021. We have a good agenda for you guys today.

A

You know we'll start off with a community sample showcase, where rahman will walk us through how to implement oauth, 2.0 authentication flows in teams, and then we have a team of uh folks from our microsoft teams team, where they'll cover the new teams, design, ui, kit and templates for designers. That'll help simplify the design process so that you can have beautiful apps every time you make them so with that being said, I will kick it off to ramen.

A

Who can you know ramen I'll? Let you present your screen and then you can kind of walk us through your demo.

B

Thank you, hello, everyone. My name is ramin and I work at content cloud today. I'm going to show you how you can implement microsoft, themes or authentication flow.

B

You can find me on social media, as you can see here.

B

So I know this is not the intention of this demo, but as a basic understanding of us is a prerequisite for working with authentication in teams. I think it's a good idea just to have a really quick recap on what is os.

B

So us is an opening standard for authentication and authorization used by many identity providers like microsoft, salesforce sparks and other providers. So, as you can see here, we have a client application which wants to get access to a protected resource which is in a resource server.

B

So what we need to do. First, we take the client application request, an access token from the authorization server. Then the authorization server asks the user, whether the whether to grant the requested permissions to the client application and if the user allows the authorization server to issue an access token. The server generates an access token and issues that to the client application and then, with the access token, client application can access to that protected resource.

B

So this is ost that has a standardized the access, token request and response. So um everything between the client application and the authorization server, which is the request and response, is os 2..

B

So we have different flows of ost authorization code like authorization called impla in place, implicit flow, client credentials, uh resource owner, password credentials and some other type of flows. On top of these, like on behalf of flows and flow and other type of flows. But today I'm going to show you how you can implement the authorization code flow.

B

And also it's important to know how we implement that authentication flow in microsoft teams. So, as you can see here in this diagram, first, the user interacts with the content on the tab, configuration or content page. uh The tab constructs the url url for its us start page and then tab calls the microsoft teams authenticate method, which is in the microsoft teams, sdk to register the success, callback and failure callback functions.

B

Then teams opens the start page in an iframe in a pop-up window. To start uh the start page generates random estate data, save it for a feature, validation and redirects to the identity. Provider's authorized endpoint on the provider side, the user sign in and grants access to the app the provider take the user to the tabs os redirect page with an access token, and if everything is okay and this state is valid, it's going to call a notify successes, function and teams closes the pop-up and render the ui.

B

uh We will uh that I will show you uh in a second before I show you uh the demo. I just wanted to talk some some about microsoft teams, development, how you can basically build up for microsoft teams, because there are different ways to do that. I choose sharepoint framework because it has really. uh It has many many advantages, for example, uh automatic hosting automatic deployment uh single sign-on through sharepoint.

B

It is cdn optimized, uh it's really easy debugging. If you know sharepoint framework you can you know that you can do that in the through workbench. You have access to sharepoint context, as well as consuming microsoft, graph, api and other azure ad securities api, which is facilitated by aadhd client factory class.

B

You can define some custom properties to configure your tab when you add your tab to to a channel, so you can configure that customize that and it's reusable, so you can use it as a web part in sharepoint or as a tab in microsoft teams, but there are also some disadvantages of using sharepoint framework. For example, it doesn't support the static tabs yet and only tabs and messaging extensions supported in sharepoint framework solution, messaging extensions added in the recent release of 1.11, and if you want to programmatically, you know add that tab to a channel.

B

It's not that easy, because it uses dynamic url. For example. If you create a team, it has a url behind the scene and he uses that to basically render the page, and there is another way of developing app for microsoft teams, which is node.js or asp.net.

B

We support all project types such as bots messaging, extensions, tab, connectors and outgoing webhooks. It supports server side code like you, can use express for node.js and if you're using asp.net, you can use c-sharp for the server side code. It supports routing and also aesthetic page url. Provisioning is more simpler than the sharepoint framework and it's configurable. For example, you can pass some queries in parameters for customizing your tab and it also has some disaster disadvantages.

B

Like the deployment is not that easy, and if you want to debug it, you need to use ng-rack for node.js projects and pay for a subscription. If you don't want to, you know, change the settings each time you run the project and if you want to host it in azure website, you need to you need a custom domain because it doesn't support sso as it's just a security risk um and hosting is not free. You have to pay for that.

B

So, let's jump to the demo, and after that I can show you uh the code and the steps uh you can implement the rst authentication flow. So here in microsoft teams, as you can see, I added this uh tab to one of the channel, and here we can see the login button. If you want to see the box folders and files first, we need to log in if I click on that it opens up a pop-up.

B

So if you haven't already signed in you need to sign in first with your username and password, and here it asks you to grant access to to this application and give this permission to to this app.

B

And if you grant access to that, you can see if we render re-render the page, basically refresh the page and displays the files and folders here. As you can see, and you can just click on the files view, the files or remove them, rename them share them or any anything you can do with this, and also, as I said, there's a settings for this tab and there are some properties you can set for for this sample. I just added folder id.

B

So if you want to go to another folder, for example, if I go to box.com and if I want to display this folder, I can just copy the copy the folder id get back here, put it as a property, and if you refresh the page again refresh the tab again, you can see it changed the folder to this folder from the box.

B

So this is the this is how it works. It opens up the pop-up window. You need to sign in you need to gain access to the client application and with the access token, you can basically display all of the files and folders inbox.com.

B

If I want to show you how it works. So the first step is: let me open this one here.

B

So the first step is to register your app. Each provider has different way of registering the app or even different name. For example, uh you need to create application registration in azure or connected app in salesforce for box.com. You can navigate to the developer, console and select the create a new new app, and here you can just choose well the different type of app you can create for this sample. I just use the custom app and you can see we have server authentication which use jwt and user authentication. We use os2.

B

So I chose this authentication type and then, when you create an app you, you need to navigate to the configuration. uh Some of these configurations are similar or or basically general to all of these application types in different. You know providers, uh for example, you all of them provide you, the client id and client secret, uh which is very very important because we need them. When we want to talk to authorization server, then we have the redirect uri, which is a absolute url in this sample. I uploaded this file in sharepoint.

B

As you can see here, there is a sharepoint url, but if you host your app in azure, you need to change this url to to your basically to your page, and then we have the application scopes. These are the payments. uh I want my app to basically get granted from the user for this app. I just added, read all files and write all files, and the other property you need to set here is the course.

B

So if you're using sharepoint, you need to add your sharepoint url and if you're using azure, you need to basically add the url of your application and after that, let's go through the code.

B

So here this is a sharepoint framework solution, so we have different components and classes here. The most important one is this box content explorer.

B

I use box.com as an example here, because it has pre-built user interface components such as content explorer, which helps us to just focus on the code rather than the ui, but you can use any any other type of components or provide it.

B

So the box content explorer element allows allows developer to embed a folder view of content as sorting box in their application.

B

The library fetches information about a specific folder through the box api and then renders the content in a folder view, so user can navigate through the folder hierarchy and perform file operations like rename delete and share that he just saw in the demo. The only thing that is really important here is this token token property.

B

So this is the only thing this company expect from us. The other properties is just some uh permission that you need to set or, for example, the folder you want to display it's really. It's really simple.

B

First, I check if a token is available or if there is any cache token available. If not, I just I render the box component, which is really simple.

B

If I go to the login component, you can see it's just a really simple component with the login button, which, if you click on that it goes to get box access, token method, which is in our service class, and here first we use microsoft, microsoft teams sdk, which provides or provides us authenticated method which has some parameters, for example the url, which is the url of a start page, which is in sharepoint, and I will show you in a minute this is the pop-up window read and hide.

B

If you want to change that, you can easily change this settings, and this is success and failure callback functions. So if everything goes well and we get the code back or the access to come back, we can use this function and if something goes wrong, you can display error message or do whatever you want with the failure callback.

B

So after we open the pop-up user sign-in and gain access to our application because we're using authorization code flow, uh we get the code which we need to exchange for another access token. So here um I use, I make another call which you can see: the gun type is authorization code. We have the client box, client, id and box client secret uh and also the code.

B

We got from uh the authorization server and we can use that to get to get the access token, and this is not recommended to keep the client secret and client id in the client side.

B

It's better to have a server side code, for example, in azure or somewhere, that you can just send this code to the to the server side and get access token back, but for this sample. I just wanted to keep it simple and give you the idea how you can basically implement uh this authentication flow and if I just open those pages in sharepoint, this is the authentication start and authentication and page.

B

First, you need to reference to microsoft teams sdk at the top.

B

And here you can see, I set the callback url, which is the redirect url and also the client id uh which I passed from the the web part or the sharepoint framework report in the code.

B

It generates a state for us which is a random grid and keep it in the local storage because we need to validate that state after we get the code back from uh the provider authorization provider and it redirectly redirects the uh the user to the authorized endpoint of the authorization server and after that, when a user grants a permission and it redirects the user.

B

Back to this, redirect url first evaluate the estate, get the local storage to get the estate and if it's not equal to the state back from the server, he notified failure in the microsoft teams sdk. Otherwise, he just called and notified success with the code it retrieves from the authorization server and with that code we can get the access token back.

B

So I think uh yeah, that's it. So we have another configuration uh file here that I keep the endpoint urls like authorize, which we use for granting permission and the token to exchange the code with the with access token, and also the client id client secret and our authentication page, which is in sharepoint, and this is not just about box.com. You know you can use this flow uh to get the access token for other other type of provider, for example.

B

If I can, if I want to show you, I implemented another tab which displays some data from salesforce.com and if you, if the user wants to edit the data it has to log in first and then they are allowed to edit the data. So if I click on the edit button, you can see a pop-up window, which is kind of same as the other window that we saw for the box.com, and here you can sign in with your username password and then, when you log in you can edit the data here.

B

So based on the scenario you want to implement, you can use this ost authentication flow and yeah. That's it. If you have any questions.

A

Awesome, thank you. Ramen really appreciate it kind of moving on to the next portion of our call. You know I'd love to invite emily and the and the other design team to you know come up and present the team design, ui kit and the ui library so emily. I can turn it over to you if you want to share your screen.

C

Yeah sure, good morning, everyone so I'll be presenting the new design ui kit, that our team has built uh as well as a ui library that we wrote and this one will enable you to develop whatever we show you in the ui kit quickly, so we have a huge team behind it. What's on, here is just a fraction of the team member. uh This is a project. We worked pretty long and hard for the past couple months.

C

So now it's finally in light, and I'm really excited to show you everything, we've done so to start off. I want to start by saying that we've heard your feedback. This is something we have gathered back in 2019 ignite, but also continuously. Throughout the last year we heard from you that developers want an sdk to build himself, it's very confusing what the team's ui want very hard to develop, an app that has the team, like a few we've heard it over and over. That slack has something like that. Google has something like that.

C

You also want the team's sdk. You want to build your app quickly. We heard all that and what I'm going to introduce you next is exactly what you have been asking for, so we acknowledge your feedback is absolutely right. We acknowledge our current state is in need of those help.

C

We see the inconsistency of experiences across all the apps, every single apps that we audited that we look through have a slightly different ui interface, and that's where this this ui kit and library will come in to help just a couple slides here you probably already realized we did an audit with 500 apps. Last year we looked through every 3p app that we can find inside teams ecosystem and found that most of the apps actually have very similar layout, but the ui look of it is completely different, as you can see here.

C

So we thought what if we gathered the most common uh template, we gathered the most common layout and then put off them into a kit into a library for you to be able to use very easily and quickly to build out those common themes and that's exactly exactly what we did we found out. There are mainly six very common tab layouts, including lists sidebars dashboard swipe lane forms everything you see here, so not only we build out these whole template.

C

We also build all the components within each of them, so you can easily pick and choose which component to fit onto which- and we provide you this overall look of what it should be, and these components not only work on web. They will also be fully responsible, immobile. They will be themeable.

C

You can adapt the three theme that team provides obviously very customable. All of them are built in react and built on top of our current official fluent ui component. So, like I mentioned they're a completely reactive building web, they work on mobile perfectly seamlessly and obviously they adapt to the latest team ui guidelines.

C

So next up, I want to give you a brief look on what each of these will look like.

C

So, first of all, I want to walk through the team's ui kit demo.

C

So this is the first one I want to call out. This is basically our new design kit. uh It has all the design languages uh of the component that teams currently use as well as so we'll be good to do a quick walk through here. It has the basic component as well as scenario based templates, also including our best practices for designing team set. It's a very comprehensive guide.

C

All right so we'll do a quick walkthrough. uh So, like you said, we really have everything here. So take a time to look through uh we'll have the color scheme, you know the basic ones, uh icons layout avatars. All of these are the teams have spent months on doing this, and these are the latest guidelines.

C

So here you will see the basic ui component. This component currently already is already available in the fluent ui library react north star. Some of you might have used it already I'll link a link in the last resource, and you can find all these. These are what we call the basic component. There are things like buttons.

C

uh Pickers have very little opinion built into this as what we called to build a complete tab. You will have to piece a lot of them together, figure out your own layout figure out your own theme, but very, very versatile, also very responsive and themeable, and the start of this presentation is what we call the ui templates.

C

So, like I mentioned earlier, we provide you a full frame of layout that you can easily plug into into any tab app. So here as an example, we provide you this list, ui template and within this template we also provide you these components. You see whether it's the table component, the toolbar component. You can easily find that in the library I am about to introduce.

C

Next, we give you very detailed usage, different scenario you can plug this into, as well as different theme, accessibility, very comprehensive guide and each of the ui template we provide in code is also here. So these six are what we see the most common used layout within teams.

C

This is the ui template. It will also be linked in the last resource set I will provide, but this we see this as the ultimate design guide. If you're designing your app, you want to see how you should play the layout. What are the restrictions? What are the rules? What are the red lines? This is where you go to, but as a developer, uh just seeing how they look like doesn't translate to code immediately.

C

So here comes the next set of controls that will be able to provide you all right. So what you see here is very similar to what I just showed you in figma, but here it's actual code, so we provide you two sets of uh two type of component. If you will in this library one is the template they're the full screen tab layout that we provide, you can basically directly plug this into your tab uh into your website and it's a full tab uh production ready.

C

Obviously you need to plug in your own data, but ui wise, it's already there, but to build each of these components, as you probably realize there are multiple components attached to it, including a good example for the list is the table that we see here and the toolbar.

C

Each of these components are also fully customizable themeable, as well as responsive, and you can start to play with the knobs here set different configurations uh check out the different theme we have how they look. So this is your playground for these different components and ui templates. We provide a couple examples here.

C

We also provide you kind of this empty screen at the start of your tab when user first join in what is your, what they should see? So everything will be in this uh we're using storybook to host this, and you should be able to play with it uh again. Knobs are here, you can do different actions.

C

Let's see, I think my favorite one is the: is the board this one? You can drag around it and obviously uh we're using cards here. But if you want to use you know your own customized card or your own customized component, you feel free to do that.

C

So yeah this is this will be the playground, um also we'll be linking the resource and before you use any feel free to come here and play with it uh that different properties all right.

C

So the next one, not only we build out these, the previous ui library, uh it has the component, it has the ui template within it. You can already get the code in github npm package as well, uh export it in your own code and play around with it, but we did one step further.

C

We also put them all together in a full-fledged sample, so you can see how they work uh in real time, and I actually have the engineer who built this whole app sample here with us on the call so alex if you're here. If you want to take it away and show us how the sample look like and how can they use it?

C

D

Let me share my screen currently on my screen. You see the app sample uh this package will be published public soon. Also, could we have uh the source code by by the private github repo, but it will be moved to the all of our team samples and also will be available public all those uh highwalling components already built here in the app sample and as a death, you could just click and check how it works in the team's environment, how the themes themes applied here for the high value, components, uh click and check.

D

uh What exactly benefits gives you, those ui templates and how you could use them, how it works in the real life. Here's almost the same as we recently seen. uh We also will extend this app by uh next updates, with uh our ui templates.

D

Also, as you see how the grid works and all those components they are responsive, as emily said and will will work at any device. We we doing the best as we can to integrate those components with the team's environment as much as possible. Thank you.

C

Yeah, thank you alex for sharing that so yeah. As you can see, we already built it out. You will be able to play with it. Just see how it looks, how we structured it. But you have your you know you. You have all the power in the world to customize it. However, you want with the library we provide, and on top of that we did it even one more step.

C

Further, you don't even have to host the sample yourself anymore, because we built everything I showed you just now into our app studio and by the way, all these all the ones I showed you is completely code complete.

C

You will be releasing all of them gradually throughout this day, so you should see everything by the end of the day or by wednesday. You will share the blog post and I'll have the resource link as well for you to play with. If you click right now there we might still be publishing it.

C

So, back to the app studio uh we took alex app sample one step further by integrating it with app studio, so that you can simply click install to teams, and we will automatically set up this app for you in app studio, and you can do this. One click install, we already hosted apps, so there's nothing. You need to do other than click install and the app will work perfectly in your app studio. You can see how it looks on teams just how we showed you all.

C

The other tools and resource will also be on app studio in the controls page. This is a screenshot. I had a little trouble of running the code this morning, so just have to show you a screenshot for now the control it will be under the current controls, and you should see this ui tools uh with all the links. The first basic ui component is what I show in the start of the presentation uh that is the current fluent based basic component.

C

We have, and then the ui template is these more high fidelity templates and kind of high value components in this library, and then the last is everything together in the sample pack. All of them have the github link here as well.

C

So that concludes my demo. All of the resource, like I mentioned, is all here. Everything should be ready by end of the day for you to play with, and that is all I have for you guys.

A

Awesome, thank you so much emily um and also thank you rahman, for you know your presentations today. You know with the last 20 or so minutes. I'd love to open it up to the audience for any questions that you may have for ramen or emily.

E

Could you please put up the slides of the contact information for roman and the lady absolutely.

F

Hey emily, there was a question um from ryan. How do we access the app you just showed yeah so.

C

The app I just showed there's two ways in the resource link. I linked the github page for the app sample, um so you can directly host it yourself. All the codes are there uh if you just want to play with it, we'll also have it in app studio.

C

So, like I mentioned, uh we will all be pushing up the code today. So, by the end of the day, you should see your app studio with a new control page uh that has the install to teams button in the app studio. It also has the link to github. So uh those are two ways. I'm sure you guys will be sharing the slides, so the resource link will also be included.

C

Like I mentioned, we uh we're still releasing it throughout the day. So if you click on right now, it probably will show you uh it's affordable right now, but.

F

C

You can just save that link.

F

For later, for those of you who get it um christian asked, will these new ui components be usable in sharepoint framework teams apps as well.

C

Yes, all of these uh it right now, just a ui library within re uh written in react, so it will be able to. You should be able to use it anywhere. It's not really confined by any framework.

F

Okay, great and then I'm just going back up through to see if there's any that we missed, did we get to the question? Could you provide a reference for storybooks apologies if I missed that one.

C

Yeah, uh I'm pasting all the links from that resource. Right now, oh and same thing, uh please be a little patient so end of the.

F

Day, perfect, and we will have a blog like june, said that has all of these links in it as well, and the recording will also be available in the next couple days.

F

Does this require a north star, update or just templates of current components?

F

Does it require north star update.

E

I might be able to answer that emily, if you like, so the um component library that we're releasing requires uh fluent ui, is react. Northstar at at least uh v0.51 any of the patches we'll do.

A

And then we also did get a question on how about branding the teams, header, footer and theme.

C

Yeah, oh well, do you want to take that as well.

E

At the moment, the component library uh can only do teams themes. um So as far as color palette is concerned, that's limited to the atoms and the teams design system, a brand's assets can be, I think, added as needed to certain components like the communication component, uh some community, some components don't have a lot of room for additional branding. So, for instance, the taskboard component really keeps the experience uh relevant only to the task board, and so there's not a lot of branding opportunity.

E

There um we've been toying with the idea of letting developers uh supply sort of a branded color palette that might come in a later release.

D

Or it's question about more, like the team, shell and branding, because with the team's ui template, we have access just for everything that we have in the frame of the app and nothing uh outside of the app in the question about the team, shell and branding, we not, we don't have any kind of tools to provide it.

D

This is very good. I appreciate you putting this on. This will be useful in the future. Absolutely.

A

Thank you again to all of the presenters today for for showing up and walking us through these amazing demos,.

F

Thank you all for joining.

B

Thank you. Thank you.

F