Microsoft 365 Community Microsoft Teams, 28 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Teams tabs with Blazor and ASP.NET Core 3.1

Description

In this 15-minute developer focused demo, Thomy Göelles introduces us to a Microsoft Teams use case for Blazor - an open-source interactive web framework being developed by Microsoft and part of .NET using C#. Viewers will see how authentication flows from Teams to your Blazor tab, how to call Microsoft Graph endpoints, how get the current Teams token, and how the "Blazored PnP Team Roster" Teams tab was created. This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on May 28, 2020.

Demo Presenter: Thomy Göelles (Solvion) | @thomyg

Supporting materials:
• Blazor web site | https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
• Blog post around the showed sample | https://thomy.tech/microsoft-teams-tab-with-blazor/

All Microsoft 365 PnP Community demos, training and call videos: https://aka.ms/spdev-videos

Learn more about the Microsoft 365 PnP developer community at: http://aka.ms/m365pnp

A

B

For today's laser in the Microsoft team, stop I'm the guy on the left, but I'm Way too lazy to change our common master of the page. All the time the mascara is my name and working as a team lead for modern workplace solution for a company called Servian, and this is where you can reach me and all the ego parts are important. Vm VPS are are on the bottom, but the focus of today is what is asp.net blazer, and how can we use it in a team stuff?

B

First of all, what is blazer blazer is nothing else like another web component, another web framework, it's part of asp.net. There are two different versions. We will have a look at the two different versions: both are g8 now, the first one, the server one was shaded ignite last year, the last one, the web, the same, live on the client side. Was she ate last week with conference, and this is actually the the most interesting one, how we can run really client side, meaning dynamic, link, libraries in the client all the things here.

B

The main thing is that you write native c-sharp code in a web framework. That's very interesting. From my perspective, I'm one of those old SharePoint developers did used to work with what just bird showed us. The see some PR client side and the old server side object, model and I changed roles when everything SPF X hit the reality like I, think March. 1St 2017 was the release date of SPF, X and, of course, a little bit ironic, but it's three years since then.

B

It's time for a new development model, isn't it so we are used to have a new one every couple of years. So for me it's gonna be blazer.

B

Difference between service client and the server application in in blazer runs really on your server and is connected through a single arc, a signal, our connection to your client, so everything stays in the server and only tiny bits and pieces are communicated to the client. The client updates regularly. Whenever something changes you have, this method called status change where you can push a rerender of the client and also, of course, the client needs to be online.

B

That provides you with a smaller download size compared to the real client-side server, a Clarence at blazer, and it's a way better place to store your credentials and secrets. Why? Because on the client-side version of blazer, we are using webassembly. We are only using my personally conduct client-side version of places, so server side is like a regular asp.net architecture. Web application server. But the client is the new thing really pushing DLLs out to your client on the client. We are running a molar runtime in that Security sandbox, like your browser, is using for JavaScript.

B

Today already it works on all major browsers. The only one with an polyfill exception is Internet Explorer 11, but it runs on mobile phones. It runs on Safari, runs on Firefox Chrome, whatever it's a little bit slower than the server side component and as it runs on the client. It's not the perfect place to store, probably your connection string to your hash table, for example, because if you think of it you're sending the whole application to the client upfront. That means you have a larger initial download size for my simple demo.

B

It already was like eight or nine megabytes, but everything in there can be looked into from, let's say a bad person. You can be combined those DLL. So that's not a good idea to hardcore store your credentials in there. For that, you need to talk to a server again and the interesting part for me, especially, is webassembly laser grunts, also in an aesthetic website.

B

So we can go serve a less in terms of running those applications, because what happens is that at the first hit the client downloads, the whole application, the initial application, and then it can be taken offline. It can be a progressive web application and with the use of aja static websites, we don't even need to care from a service perspective corporations anymore.

B

What I gonna look today is. Basically, this is a screenshot of the example, and we will have a look and how the authentication flow from teams to your laser top is working. How you can call the graph how you can get the current team's token, and then you have a short demo.

B

How we blaze at the pin pitting okay enough for PowerPoint, let's move on with the code, and the page is already running I'm running this locally here in my Visual Studio instance, and, of course I'm using energy rock to publish what is running locally on my machine.

B

So can reuse that as a tab inside of my team and when I click here on reloading, the top I will hit the endpoint, and you will see there's a redirect because we're doing the exact same thing that word already showed us so we're using the same flow in the background and the same access token ID token thing.

B

I also have here in my editor and because I'm using a multi-tenant, app registration at the moment, but I'm using also at registrations in Microsoft Azure I've defined all my endpoints, because I need those because I have a start page and an end page and what actually happens in the code is in my index. File in Blazer I can use JavaScript. So this allows me to copy and paste everything I've found in terms of the Microsoft team site.

B

There was a there's, a nice note, chest example on github and I just grabbed the code in part, the decay in the silent way from there so I'm, using the Microsoft team's SDK I'm, using a Doge s, I'm trading, my context trading, my configuration for the 800 flow and at some point hitting a quiet token and then I'm getting a graph token and the tricky part more or less is how do I get this token from the JavaScript world to the blazer world? And luckily it's very easy.

B

We just store it in the local storage and why is that so easy, because what actually happens under the color already, if you look at the local storage, all those variables, everything with Adel and except from the team's context, the underscore and the able access token, an Oscar is already happening by 8hs.

B

So it's already storing the credentials there and I just thought: okay, why not making it sure that I have my own version of the token as well present, so that I can make sure that it's my variable storing the token there and then I'm just grabbing the token inside of blazer and using it, and what can I do.

B

First of all, I can call the team's context because I'm doing the same thing, I'm storing the team's context that I get from the team's SDK in my local storage and then in Blazer I'm just grabbing it- and here is all my eated information at the moment, I'm running a personal tab. That's why the team set path and the teams that URL is empty. But if you deploy this tab to a team for example, then you will get also the reference to the SharePoint parts, and then you can connect of one step.

B

Further I can go and call the Microsoft graph. It's just a simple call using an HTTP client, because what can I do I have here a graph service in c-sharp and I'm, just using an HTTP, client and I'm. Taking my token- and this is the backend code, this is like a real service in asp.net core.

B

What is actually running on the front-end. Let's move over to this component here, that's called a Razer component. The Razer component is a way of combining it jemelle over here with actually sip shop code and, of course, I know. This code should only be or the idea is that you only use c-sharp in this file here to render stuff you have your render logic in there and to have your business logic somewhere else. But it's pretty easy.

B

You just call- or you load your your token in there because I'm getting it from the local storage, so I'm grabbing local storage get item async. My access token I have two token now and then I can call my grab service leave the token get me with HTTP client I'm, calling basically the method from over here and I'm, getting back the chasing string and can show it in my client over here same thing: I can not only use the HTTP client that I could also use the native Roth client, for example. These are older teams.

B

In this small development tenant we have a nice representation. You already see them played with an NuGet package called I, think blazer fabric that makes use of the fluent UI already, because when you get one step deeper, I can ask for a detailed list. So getting getting more examples and I have a small user interface back here got need any rerender stuff that I'm try to to get rid of, but what I can do now.

B

I have my team selected and get details and in the details, I have this nice paint here and here I get all the apps that are installed in this team. So this component talks to the graph get all teams so get all groups that are teams and then, when I click, one master detail view nice fly out from the right like we are used in office 65 and all the details. Another call: how is this done back to the code? I have my graph service here.

B

I have got all teams I'm actually using the graph service client with the built in delegate authentication provider, because this provider has a constructor that takes an existing period. Token so I'm reusing my token that I already stored and already grabbed from the team's SDK from a local storage and now and create a new graph service client and from there it's just C shop and calling the different endpoints prepping all the groups getting through and getting all the apps and re surface it on the other side of the browser.

B

So that's very, very easy, and all you see here basically was built in I, think three or five evenings and I'm, not a day-to-day developer anymore, I'm more on the architecture side. So that's the the whole reason why it's so interesting for me to use razor I'm not used to live in typescript and SharePoint framework. I'm Lea have my experience from 10 years back writing stuff in dotnet, but with this I'm good, to go at least to write some cool proof-of-concept in that way, and the last one I want to show is like okay.

B

How can we interact with JavaScript as well, so I created this modern PNP team roster? And then you get the idea why there is so much Windows XP references in here, because I found CSS library that mimics XP and, of course, a Chris Kent tribute. You should always include horses in your demo. So that's why there are small horses in here, let's zoom in so you see here, but you can also do with that and then we can move on and make it also in Windows 98 style.

B

What? How is that done? Let's go back and look at our place at P and P team service actually I'm a little bit paranoid about my demos, so I'm fetching this disjunctive data live from the PNP github website, so I'm grabbing all the details of this. The members, all the dates I wanted the data. Eight points from the website, because I was afraid to misspell or forget someone so grabbing those things here and then in my eraser component.

B

It's pretty easy loading, all the pin, P team members and then for each awesome person in the pindy team, I'm, rendering a div, and then oh I forgot about someone, because there is, of course a special shout-out to my friend, Evan Bower, we'll have that in a minute, but I'm just visualizing for every person in that collection, I'm, creating a teeth and going back it's rendered here, and what you can do is that you can click on all.

B

You can try to click down Elia or Aaron, but when I click on Stefan, he will come back with a typical Viennese sentence: yeah how? How funny is to wrap things up and not go back to PowerPoint what you saw. There are two versions of blazer there's a server side and everything you saw today is the server side. Laser I still need to think about how I can get the client side working with the authentication, because different is also. The routing is different for a client-side application. There is, there are no fixed routes.

B

You need to use the library for that and I need to find a way to make that possible. With this, a pop-up flow as long as there is no single sign-on for teamstepps. But if you go back to the build conference videos from last week, Nick Cramer showed but we'll come to. Teams in terms of s is all so taps and BOTS will also be supported there.

B

Some references to people I looked up, Jeffrey Fritz from the product manager for the asp.net and the team, with cool and I think eight hours of daily streaming on Twitch about Glaser Community Links plays the flu and UI, and then, if you think of what is possible with plays in the future for team step, if singles are known, is working, of course, those tabs that I showed you today and then load everything with the client-side version of plays. It is that it gives that, and you have a service interface, fifteen minutes and I'm done.

A

Excellent Thank You Tommy Thank You Tommy. We might go few minutes long today, so it's just weird of a warning because we promised some extra time for Yannick but Thank You Tommy a really cool stuff. It's great to see this in in practice and see how easy it is to actually do developing and that's I think that's the promise of the Placer absolutely so. If you're familiar with C sharps, you don't have to learn about what is this thing about typescript and C and JavaScript absolutely.