How to use ASP.NET Blazor in a Microsoft Teams Tab. Slides to a PnP call, video can be found at https://www.youtube.com/watch?v=gtusCyOYePs

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