Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blazor in Microsoft Teams

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

  • Login to see the comments

  • Be the first to like this

Blazor in Microsoft Teams

  1. 1. @thomyg @stephanbisser ASP.NET Blazor in a Microsoft Teams Tab
  2. 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. 3. What is ASP.NET Blazor?
  4. 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. 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. 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. 7. Demo Time!
  8. 8. AUTH with Teams JS SDK and ADAL.JS
  9. 9. Splash Screen
  10. 10. Teams Context
  11. 11. HTTPClient Graph Call
  12. 12. .NET GraphClient Call
  13. 13. Get all apps in a team
  14. 14. Modern PnP Team Roster
  15. 15. Modern PnP Team Roster
  16. 16. Modern PnP Team Roster
  17. 17. Summary

×