Blazor MS-Teams Tab App Series – Part 3

Welcome to the forth post of a series that will show you how you can write a Microsoft Teams Application with Blazor Webassembly.

You will find the complete source code in this github repository. I placed my changes in different branches so you can easily jump in at any time.

Accessing Teams SDK from Blazor

Before we try to abstract the JavaScript away from our Blazor Application we take a climpse to the JavaScript-World and how we interact from there with our Blazor application.

Before you can access the MS-Teams Context you need to initialize the SDK, which can be simple done by calling the initialize method! The Context contains various key/values where one is the user principal name (upn).

I put these two functionalities in two javascript functions and added this to my index.html page.

Add this code to BlazorTeamApp.Client/wwwroot/index.html:

<script>
var _context;

function InitializeTeamsContext() {
    console.log("InitializeTeamsContext called...");
    try {
      // Initialize SDK
      microsoftTeams.initialize();
      // Fetch MS-Teams Context and store it in the _context variable
      microsoftTeams.getContext((context, error) => {
      _context = context;
    });
  }
  catch (err) {
    alert(err.message);
  }
}

function GetUPN() {
  console.log("GetUPNCalled");
  // Get User Principal Name
  let userName = Object.keys(_context).length > 0 ? _context['upn'] : "";
  return userName;
}
</script>

So how do we call these JavaScript functions from Blazor? By using the JSRuntime class. We inject a instance to our Blazor Page using the @inject command. In the future we want to initialize MS-Teams when the page loads. Right now we require the user to click the buttons in the right order:

Edit BlazorTeamApp.Client/Pages/Tab.razor

@page "/tab"
@inject IJSRuntime JSRuntime;
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
<p>Current User: @userName</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" @onclick="InitTeams">Init Teams</button>
<button class="btn btn-primary" @onclick="GetUserName">Get UserName</button>
 
@code {
    private int currentCount = 0;
    private string userName = string.Empty;
 
    private void IncrementCount()
    {
        currentCount++;
    }
 
    private async Task InitTeams()
    {
        await JSRuntime.InvokeVoidAsync("InitializeTeamsContext");
    }
    private async Task GetUserName()
    {
        userName = await JSRuntime.InvokeAsync<string>("GetUPN");
    }
}

Hit F5 in Visual Studio to start the application again and switch back to MS-Teams. Hit the refresh button to reload you Team-Tab.

Then click the Init Teams button to initialize the Teams SDK and then Get UserName to display the username of the current logged in user in teams.

Voila! Your first information fetched from MS-Teams. In the next blog post I show you how to get hands on the client auth token that we will use later to get access tokens for Graph and our own services.

That’s it for today! See you tomorrow!

AndiP

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s