Blazor in Microsoft Teams

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

17. Summary