The document discusses ASP.NET Blazor, a web UI framework using C# that enables the development of interactive web applications through reusable components. It outlines the differences between server-side and client-side Blazor, including performance and download size considerations, as well as integration with Microsoft Teams and authentication methods. Additionally, it highlights a demo involving authentication and a graph call to fetch a team roster.

1. @thomyg
@stephanbisser
ASP.NET Blazor in a
Microsoft Teams Tab

2. ABOUT US
THOMAS GÖLLES
MICROSOFT MVP (Office
Dev)
SOLVION
https://thomy.tech
@thomyg
Head of Modern Workplace Solutions
Graz, Austria
STEPHAN BISSER
MICROSOFT MVP (AI)
SOLVION
https://bisser.io
@stephanbisser
Technical Lead
Graz, Austria

3. What is ASP.NET Blazor?

4. What is Blazor?
• Interactive web UI with C#
• Composed of reusable UI components
implemented using C#, HTML and CSS
• Yes, another web framework
• A part of ASP.NET (server GA 2019, client May
2020)
• Supported by all major browsers and platforms (IE
through polyfills only)
• A possible migration path for ASP.NET Web Forms
projects
• A way to bring your existing C# business logic to the
web
• Native C# development with JS interop

5. • Server runs back-end code
• Client is connected through Signal-R
• Server pushes changes to the client
(StateHasChanged)
• Client needs to be online
• Smaller download size
• Better place to store your credentials /
secrets
• Better performance than client side
Blazor
• Using Web Assembly (WASM)
• A mono runtime in your browser runs
DLLs downloaded from the server in a
security sandbox (like JS)
• Offline / PWA
• Larger initial download size
• A little bit slower than server side
Blazor
• Not the perfect place to store your
connection strings
• Runs on an Azure Static Websites
The two versions of Blazor
SERVER CLIENT

6. What are we trying to solve today?
• Start URL from manifest file
• Authentication (Teams JS SDK, ADAL
JS, Azure AD App)
• Current Teams Context
• Call some Graph Endpoints
• “Blazored PnP Team Roster”

7. Demo Time!

8. AUTH with Teams JS SDK and ADAL.JS

9. Splash Screen

10. Teams Context

11. HTTPClient Graph Call

12. .NET GraphClient Call

13. Get all apps in a team

14. Modern PnP Team Roster

15. Modern PnP Team Roster

16. Modern PnP Team Roster

17. Summary