Welcome to the eigth and final post (0-7) 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.

In this post we will secure our WeatherForeCast API in the Blazor-Server project and access it the same way we did with Microsoft Graph.

Webservice AAD App Registration

Click +New registration to register a new AAD application. Replace https://demo.ngrok.io with your own domain.

• Name: BlazorService
• Account Type: Accounts in any organizational directory (Mulitenant)
• Redirect Uri: https://demo.ngrok.io

and click Register.

Make sure to copy your Application (Client) ID and store it for later. I am using the following Client-ID throughout the samples which need to be replaced with yours: 38a06d0f-e38d-4e93-be39-aa42d8ebe604

IMPORTANT

Microsoft Teams will only allow URLs that are in the premitted domain. Make sure that you use your NGROK or registered domain here!

Select Expose an API under the Manage section and set an application ID Uri. You can reuse the given UID from the proposed App ID Uri. For example:

• api://spectologic.eu.ngrok.io/38a06d0f-e38d-4e93-be39-aa42d8ebe604

Now select +Add a scope to add the required "access_as_user" scope:

• Scope Name : weather_api
• Who can consent: Admins and Users
• Provide some titel/text for the information that is displayed when the administrator of a tenant or a user is asked to grant consent.

Finally click Add scope to add the scope. You will get an url that looks like this:

• api://spectologic.eu.ngrok.io/38a06d0f-e38d-4e93-be39-aa42d8ebe604/weather_api

To directly allow Teams to access we add the well known client IDs of the Microsoft Teams-Applications. There are two of them: Microsoft Teams Web Client and Microsoft Teams Desktop Client

Use the +Add a client application button to add the following client ids. You need to also select the scope "access_as_user" so that the Teams-Apps can access this specific scope!

• Teams Web Application: 5e3ce6c0-2b1f-4285-8d4b-75ee78787346
• Teams Mobile/Desktop App: 1fec8e78-bce4-4aaf-ab1b-5451cc387264

Adding the service to the BlazorApp AAD App Registration

Open the BlazorApp AAD application

Click on API permissions under the Manage section to add permissions to access our webservice. We do want to add delegated permissions (permissions in the context of the user). To add the following permission click + Add a permission and select My APIs / BlazorService and select delegated permissions:

• weather_api

Afer clicking save make sure to click Grant admin consent for … button to grant these permissions within this tenant. So all users of this tenant do not have to explicitly consent to your MS-Teams App.

Securing the WeatherForeCast API

In BlazorTeamApp.Server project add following configuration to the appsettings.json file:

• Client ID : Client ID of the BlazorService
• Audience: AAD App Uri
• Issuer: https://sts.windows.net/{tenantID}/

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "ClientId": "38a06d0f-e38d-4e93-be39-aa42d8ebe604",
  "TenantId": "common",
  "Audience": "api://demo.ngrok.io/38a06d0f-e38d-4e93-be39-aa42d8ebe604",
  "Issuer": "https://sts.windows.net/c409088f-0d18-498f-8ece-8659ea219c20/"
}

Add following nuget package to BlazorTeamApp.Server:

• Microsoft.AspNetCore.Authentication.AzureAD.UI

In Startup.cs modify the method ConfigureService to add authentication:

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(sharedOptions =>
    {
        sharedOptions.DefaultScheme = AzureADDefaults.AuthenticationScheme;
    }).AddJwtBearer("AzureAD", options =>
    {
        options.Audience = Configuration.GetValue<string>("AzureAd:Audience");
        options.Authority = Configuration.GetValue<string>("AzureAd:Instance")  
            + Configuration.GetValue<string>("AzureAd:TenantId");
        options.TokenValidationParameters = new 
            Microsoft.IdentityModel.Tokens.TokenValidationParameters()
            {
                ValidIssuer = Configuration.GetValue<string>(
                    "AzureAd:Issuer"),
                ValidAudience = Configuration.GetValue<string>(
                    "AzureAd:Audience")
            };
    });
 
    services.AddControllersWithViews();
    services.AddRazorPages();
    services.AddTokenProvider();
}

Also in Startup.cs modify the method Configure(IApplicationBuilder,…:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ... 
    app.UseAuthentication();    // Add this line here
    // app.UseHttpsRedirection();
    app.UseBlazorFrameworkFiles();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();    // Add this line here
    app.UseEndpoints(endpoints =>
    {
      ...

Now use the Authorize attribute to secure our WeatherForeCast controller by adapting Controllers/WeatherForeCastController.cs

...
namespace BlazorTeamApp.Server.Controllers
{
    [Authorize]     // Add this line
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
...

If you now start your application in Visual Studio and try to access this url:

• http://localhost:5000/Weatherforecast

you should receive a 401 error!

Access the Service from our Blazor Application

Since we have written all the necessary code before we can simply add a new button to our razor page and call our GetServerToken method to get an access token for our weather api:

Add this button to your Tab.razor page

<br  />
<button class="btn btn-light"  @onclick="GetWeatherServerAuthToken">Get Weather Server-Token</button>

Implement the button handler in Tab.razor

private string weatherAuthServerToken = string.Empty;
private async Task GetWeatherServerAuthToken()
{
    try
    {
        authServerToken = await TeamsClient.GetServerToken(authToken, 
           new string[1] { "api://spectologic.eu.ngrok.io/38a06d0f-e38d-4e93-be39-aa42d8ebe604/weather_api" });
    }
    catch (Exception ex)
    {
        authServerToken = $"Fehler: {ex.Message}";
    }
}

I leave implementing the call to the webservice with the gained token up to you. It is done the same way as we have called the Microsoft Graph me-Endpoint.

That’s it, have a great day

AndiP

Welcome to the seventh post (0-6) 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.

In this post we will extend our library, so that we are able to create access tokens to access the Microsoft Graph.

Extending our typescript library

We create a new method that will take the ClientAuthToken and scopes of apis we want to access. We obtain the Tenant-ID from the MS-Teams context and send this to our backend (/auth/token) which will use application (client)id and client secret to create an access token:

 GetServerToken(clientSideToken: string, scopes: string[]): Promise<string> {
	try {
		const promise = new Promise<string>((resolve, reject) => {
			microsoftTeams.getContext((context) => {
				fetch('/auth/token', {
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						'tid': context.tid,
						'token': clientSideToken,
						'scopes': scopes
					}),
					mode: 'cors',
					cache: 'default'
				})
					.then((response) => {
						if (response.ok) {
							return response.json();
						} else {
							reject(response.statusText);
						}
					})
					.then((responseJson) => {
						if (responseJson.error) {
							reject(responseJson.error);
						} else {
							const serverSideToken = responseJson;
							console.log(serverSideToken);
							resolve(serverSideToken);
						}
					});
			});

		});
		return promise;
	}
	catch (err) {
		alert(err.message);
	}
}   

Since we do want to call this method from our Blazor components we add additional methods to our JavaScript-Wrapper interface/class:

ITeamsClient

using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams
{
    public interface ITeamsClient
    {
        ValueTask<string> GetClientToken();
        ValueTask<string> GetServerToken(string clientToken, string[] scopes);
        ValueTask<string> GetUPN();
    }
}

TeamsClient

using Microsoft.JSInterop;
using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams
{
    public class TeamsClient : ITeamsClient
    {
        public TeamsClient(IJSRuntime jSRuntime)
        {
            _JSRuntime = jSRuntime;
        }
        private readonly IJSRuntime _JSRuntime;
 
        public ValueTask<string> GetUPN() => 
            _JSRuntime.InvokeAsync<string>(MethodNames.GET_UPN_METHOD);
        public ValueTask<string> GetClientToken() => 
            _JSRuntime.InvokeAsync<string>(MethodNames.GET_CLIENT_TOKEN_METHOD);
 
        public ValueTask<string> GetServerToken(
            string clientToken, string[] scopes) => _JSRuntime.InvokeAsync<string>(MethodNames.GET_SERVER_TOKEN_METHOD, clientToken, scopes);
 
        private class MethodNames
        {
            public const string GET_UPN_METHOD 
                = "BlazorExtensions.SpectoLogicMSTeams.GetUPN";
            public const string GET_CLIENT_TOKEN_METHOD 
                = "BlazorExtensions.SpectoLogicMSTeams.GetClientToken";
            public const string GET_SERVER_TOKEN_METHOD 
                = "BlazorExtensions.SpectoLogicMSTeams.GetServerToken";
        }
    }
}

Extend our Blazor Library

Add the following nuget packages to SpectoLogic.Blazor.MSTeams.csproj

• Microsoft.Extensions.Http
• System.Text.Json

Create a new subfolder auth within the project and add following classes:

TokenResponse.cs This class reassembles the token reference we get back from the OAuth endpoint.

using System.Text.Json.Serialization;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public class TokenResponse
    {
        [JsonPropertyName("token_type")]
        public string TokenType { get; set; }
        [JsonPropertyName("scope")]
        public string Scope { get; set; }
        [JsonPropertyName("expires_in")]
        public int ExpiresIn { get; set; }
        [JsonPropertyName("ext_expires_in")]
        public int ExtExpiresIn { get; set; }
        [JsonPropertyName("access_token")]
        public string AccessToken { get; set; }
    }
}

TokenError.cs This class reassembles an error that we might get back from the OAuth endpoint. If for example we did not grant consent to our tenant and the user has not granted consent so far we will retrieve an error like ‚invalid_grant‘.

using System.Text.Json.Serialization;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public class TokenError
    {
        /// <summary>
        /// May include things like "invalid_grant"
        /// </summary>
        [JsonPropertyName("error")]
        public string Error { get; set; }
        [JsonPropertyName("error_description")]
        public string Description { get; set; }
        [JsonPropertyName("error_codes")]
        public int[] Codes { get; set; }
        [JsonPropertyName("timestamp")]
        public string Timestamp { get; set; }
        [JsonPropertyName("trace_id")]
        public string TraceId { get; set; }
        [JsonPropertyName("correlation_id")]
        public string CorrelationId { get; set; }
        [JsonPropertyName("error_uri")]
        public string ErrorUri { get; set; }
    }
}

ITokenProvider.cs The interface for our server-side helper class that encapsulates the retrieval of the access token.

using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public interface ITokenProvider
    {
        Task<TokenResponse> GetToken(
            string tenantId, 
            string token, 
            string clientId, 
            string clientSecret, 
            string[] scopes);
    }
}

ITokenErrorException.cs An exception that will be thrown by the TokenProvider implementation, if we receive an error response from the OAuth Endpoint.

using System;
using System.Runtime.Serialization;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public class TokenErrorException : Exception
    {
        public TokenError TokenError { get; set; }
 
        public TokenErrorException()
        {
        }
 
        public TokenErrorException(TokenError error) : base(error.Error)
        {
            TokenError = error;
        }
 
        public TokenErrorException(TokenError error, Exception innerException) : base(error.Error, innerException)
        {
            TokenError = error;
        }
 
        protected TokenErrorException(SerializationInfo info, StreamingContext context) : base(info, context)
        {
        }
    }
}

Tokenprovider.cs The implementation of our token provider accessing the Token-Endpoint. Future implementations should use the MSAL-Library from Microsoft, but for illustration purposes this should suffice:

using System.Collections.Generic;
using System.Net.Http;
using System.Text.Json;
using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public class TokenProvider : ITokenProvider
    {
        private readonly IHttpClientFactory _clientFactory;
 
        public TokenProvider(IHttpClientFactory clientFactory)
        {
            _clientFactory = clientFactory;
        }
  
        public async Task<TokenResponse> GetToken(
            string tenantId, 
            string token, 
            string clientId, 
            string clientSecret, 
            string[] scopes)
        {
            string requestUrlString = 
            $"https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token";
 
            Dictionary<string, string> values = new Dictionary<string, string>
            {
                { "client_id", clientId },
                { "client_secret", clientSecret },
                { "grant_type", "urn:ietf:params:oauth:grant-type:jwt-bearer" },
                { "assertion", token },
                { "requested_token_use", "on_behalf_of" },
                { "scope", string.Join(" ",scopes) }
            };
            FormUrlEncodedContent content = new FormUrlEncodedContent(values);
 
            HttpClient client = _clientFactory.CreateClient();
            HttpResponseMessage resp = await client.PostAsync(
                requestUrlString, content);

            if (resp.IsSuccessStatusCode)
            {
                string respContent = await resp.Content.ReadAsStringAsync();
                return JsonSerializer.Deserialize<TokenResponse>(respContent);
            }
            else
            {
                string respContent = await resp.Content.ReadAsStringAsync();
               
                TokenError tokenError = 
                    JsonSerializer.Deserialize<TokenError>(respContent);

                throw new TokenErrorException(tokenError);
            }
        }
    }
}

TokenProviderExtensions And finally some class to implement the extension method which can be used by the server project to provide the classes via DI.

using Microsoft.Extensions.DependencyInjection;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public static class TokenProviderExtensions
    {
        public static IServiceCollection AddTokenProvider(
            this IServiceCollection services)
            => services.AddScoped<ITokenProvider, TokenProvider>()
                .AddHttpClient();
    }
}

Use the library in our Blazor-Backend

Now let’s use this library in our Backend to implement the /auth/token service.

First of all add a reference of our razor library to the BlazorTeamTab.Server project.

Extend Startup.cs to call the extension method that will provider the necessary classes via DI:

...
using SpectoLogic.Blazor.MSTeams.Auth; // Add this line
...
services.AddRazorPages();
services.AddTokenProvider(); // Add this line
...

Add a folder Dtos and add the class TokenRequest to it. This reassembles the structure we receive from our typescript implementation:

using System.Text.Json.Serialization;
 
namespace SpectoLogic.Blazor.MSTeams.Auth
{
    public class TokenRequest
    {
        [JsonPropertyName("tid")]
        public string Tid { get; set; }
        [JsonPropertyName("token")]
        public string Token { get; set; }
        [JsonPropertyName("scopes")]
        public string[] Scopes { get; set; }
    }
}

Under Server/Controllers create a new file AuthController.cs We add ClientID/ClientSecret from our AAD-Application hardcoded! Do NOT do that in production code! Never store secrets in code! Use Azure KeyVault or other more secure locations.

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using SpectoLogic.Blazor.MSTeams.Auth;
using System;
using System.Threading.Tasks;
 
namespace BlazorTeamApp.Server.Controllers
{
    [ApiController]
    [Route("[controller]/[action]")]
    public class AuthController : ControllerBase
    {
        private readonly ILogger<AuthController> logger;
        private readonly ITokenProvider tokenProvider;
 
        public AuthController(
            ILogger<AuthController> logger, 
            ITokenProvider tokenProvider)
        {
            this.logger = logger;
            this.tokenProvider = tokenProvider;
        }
 
        [HttpPost]
        [ActionName("token")]
        public async Task<IActionResult> Token(
            [FromBody] TokenRequest tokenrequest)
        {
            string clientId = "e2088d72-79ce-4543-ab3c-0988dfecf2f1"; 
            // From Step 4
            string clientSecret = "_2xb_7h-P1voxOddv4jzaE8I_l-Tx71BlH"; 
            // From Step 4
            try
            {
                TokenResponse tokenResponse = await tokenProvider.GetToken(
                        tokenrequest.Tid,
                        tokenrequest.Token,
                        clientId,
                        clientSecret,
                        tokenrequest.Scopes);
                return new JsonResult(tokenResponse.AccessToken);
            }
            catch (TokenErrorException tokenErrorEx)
            {
                return new JsonResult(tokenErrorEx.TokenError);
            }
            catch (Exception)
            {
                throw;
            }
        }
    }
}

Access Microsoft Graph from Blazor-Page

Since we do want to do HTTP-Requests lets add the HTTP-Client in Startup.cs

using SpectoLogic.Blazor.MSTeams;
...
builder.Services.AddMSTeams();
builder.Services.AddHttpClient(); // add this line!

await builder.Build().RunAsync();
...

Now implement Tab.razor page. We inject the HttpClientFactory and add two new methods to handle our two new buttons.

One will receive the server auth token for Microsoft Graph, where the other will use that token to fetch some basic user informations from the Graph.

@page "/tab"
@inject SpectoLogic.Blazor.MSTeams.ITeamsClient TeamsClient;
@inject IHttpClientFactory HttpFactory;
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
<p>Current User: @userName</p>
<p>AuthToken: @authToken</p>
<p>Server Token: @authServerToken</p>
<p>User Data: @userData</p>
 
<button class="btn btn-primary"  @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary"  @onclick="GetUserName">Get UserName</button>
<br  />
<button class="btn btn-light"  @onclick="GetAuthToken">Get Auth-Token</button>
<button class="btn btn-light"  @onclick="GetServerAuthToken">Get Server-Token</button>
<button class="btn btn-light"  @onclick="GetUserData">Get User Data</button>
 
@code { 
 
    private int currentCount = 0;
    private string userName = string.Empty;
 
    private void IncrementCount()
    {
        currentCount++;
    }
 
    private async Task GetUserName()
    {
        userName = await TeamsClient.GetUPN();
    }
    private string authToken = string.Empty;
 
    private async Task GetAuthToken()
    {
        authToken = await TeamsClient.GetClientToken();
    }
 
    private string authServerToken = string.Empty;
 
    private async Task GetServerAuthToken()
    {
        try
        {
            authServerToken = await TeamsClient.GetServerToken(
                authToken, 
                new string[1] { "https://graph.microsoft.com/User.Read" });
        }
        catch (Exception ex)
        {
            authServerToken = $"Fehler: {ex.Message}";
        }
    }
 
    private string userData = string.Empty;
    private async Task GetUserData()
    {
        try
        {
            var client = HttpFactory.CreateClient();
            HttpRequestMessage request = new HttpRequestMessage()
            {
                Method = HttpMethod.Get,
                // https://graph.microsoft.com/v1.0/me/mailFolders('Inbox')/messages?$select=sender,subject&$top=2
                RequestUri = new Uri("https://graph.microsoft.com/v1.0/me/")
            };
            request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", authServerToken);
            authToken = $"Bearer {authServerToken}";
            var response = await client.SendAsync(request);
            userData = await response.Content.ReadAsStringAsync();
        }
        catch (Exception ex)
        {
            userData = $"Fehler: {ex.Message}";
        }
    }
}

In our final post for this series tomorrow, we will secure the Weatherforecast API and reuse what we have learned so far to access the secured service.

That’s it for today! See you tomorrow!

AndiP

Welcome to the sixth post (0-5) 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.

In this post we will put our test code into a library, so that we can reuse our work in future projects. I oriented myself on an existing github project called BlazorExtensions/Storage to build this library.

Building a Razor Library base

Add a new project (of type: Razor Class Library) to your solution. I name it "SpectoLogic.Blazor.MSTeams":

• .NET Core 3.1
• No pages/Views

Add a folder Client in the project and add a typescript file named SpectoLogic.Blazor.MSTeams.ts (Feel free to adapt naming to what suits you best).

Add the nuget package Microsoft.TypeScript.MSBuild to the project.

Create a new Typescript JSON Configuration File and configure it like this, since we need promises and AMD (Asynchronous module definition).

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "module": "AMD",
    "target": "ES2016", 
    "outDir": "wwwroot"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

If you compile your solution the file SpectoLogic.Blazor.MSTeams.js should be generated and placed in the wwwroot folder.

Unfortunatly you cannot add libman directly to your project. Therefore just copy libman.json from your BlazorTeamApp.Client project and insert it to your new library project.

Change libman.json as so:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
 
    {
      "provider": "jsdelivr",
      "library": "@microsoft/teams-js@1.8.0",
      "destination": "Client/external/teams"
    }
  ]
}

Let’s implement Spectologic.Blazor.MSTeams.ts! This is basically all the javascript code we wrote before in index.html in a typescript class

import { Context } from "@microsoft/teams-js";
 
interface SpectoLogicTeamsInterface {
    Initialize(): void;
    GetUPN(): string;
    GetClientToken(): Promise<string>;
}
 
export class SpectoLogicTeams implements SpectoLogicTeamsInterface {
 
    private _context: Context;
 
    Initialize(): void {
        console.log("Initializing teams,...");
        try {
            microsoftTeams.initialize();
            microsoftTeams.getContext((context) => {
                this._context = context;
            });
        }
        catch (err) {
            alert(err.message);
        }
    }
 
    GetUPN(): string {
        return Object.keys(this._context).length > 0 ? this._context['upn'] : "";
    }
 
    GetClientToken(): Promise<string> {
        try {
                const promise = new Promise<string>((resolve, reject) => {
 
                    console.log("1. Get auth token from Microsoft Teams");
 
                    microsoftTeams.authentication.getAuthToken({
                        successCallback: (result) => {
                            resolve(result);
                        },
                        failureCallback: function (error) {
                            alert(error);
                            reject("Error getting token: " + error);
                        }
                    });
 
                });
            return promise;
        }
        catch (err) {
            alert(err.message);
        }
    }
}
 
export const blazorExtensions = 'BlazorExtensions';
// define what this extension adds to the window 
// object inside BlazorExtensions
export const extensionObject = {
    SpectoLogicMSTeams: new SpectoLogicTeams()
};
 
export function Initialize(): void {
    if (typeof window !== 'undefined' && !window[blazorExtensions]) {
        // when the library is loaded in a browser 
        // via a <script> element, make the
        // following APIs available in global 
        // scope for invocation from JS
        window[blazorExtensions] = {
            ...extensionObject
        };
    }
    else {
        window[blazorExtensions] = {
            ...window[blazorExtensions],
            ...extensionObject
        };
    }
    let extObj: any;
    extObj = window['BlazorExtensions'];
    extObj.SpectoLogicMSTeams.Initialize();
}

Adapting the BlazorTeamApp.Client project

Select the project properties of BlazorTeamApp.Client project and configure the TypeScript Build:

• ECMA Script version: ECMAScript 2016
• Module System: AMD

Then add a reference to SpectoLogic.Blazor.MSTeams project.

Add the requireJS library by adding this to the libman.js file:

{
  "provider": "cdnjs",
  "library": "require.js@2.3.6",
  "destination": "wwwroot/scripts/requirejs"
},

Replace the existing BlazorTeamApp.Client/wwwroot/index.html with this code which will initialize requireJS and call main.js:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorTeamApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">
            Reload
        </a>
        <a class="dismiss">
            🗙
        </a>
    </div>
    <script src="_framework/blazor.webassembly.js">
    </script>
    <!-- Reference to the MS Teams Script added with libman -->

    <script src="scripts/teams/dist/MicrosoftTeams.js" />
    <script data-main="scripts/main" src="scripts/requirejs/require.js"/>
</body>
</html>

Create main.js under **BlazorTeamApp.Client/wwwroot/scripts/":

// Set up any config you need (you might not need this)
requirejs.config({
    basePath: "/scripts",
    paths: {
        "SpectoLogic.Teams": '/_content/SpectoLogic.Blazor.MSTeams/SpectoLogic.Blazor.MSTeams'
    }
}
);
 
// Tell RequireJS to load your main module (and its dependencies)
require(['require', 'SpectoLogic.Teams'], function (require) {
    var namedModule = require('SpectoLogic.Teams');
    namedModule.Initialize();
});

Implementing the rest of the library

Open SpectoLogic.Blazor.MSTeams.csproj file in an editor and configure the language version to 8.0. Also Add the nuget package Microsoft.JSInterop:

...
<PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
    <LangVersion>8.0</LangVersion>
</PropertyGroup>
...
<PackageReference Include="Microsoft.JSInterop" Version="3.1.9" />
...

Now add a new file ITeamsClient.cs and definte it like so:

using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams
{
    public interface ITeamsClient
    {
        ValueTask<string> GetClientToken();
        ValueTask<string> GetUPN();
    }
}

Implement the interface in a file TeamsClient.cs:

using Microsoft.JSInterop;
using System.Threading.Tasks;
 
namespace SpectoLogic.Blazor.MSTeams
{
    public class TeamsClient : ITeamsClient
    {
        public TeamsClient(IJSRuntime jSRuntime)
        {
            _JSRuntime = jSRuntime;
        }
        private readonly IJSRuntime _JSRuntime;
 
        public ValueTask<string> GetUPN() => 
          _JSRuntime.InvokeAsync<string>(MethodNames.GET_UPN_METHOD);
        public ValueTask<string> GetClientToken() => 
          _JSRuntime.InvokeAsync<string>(MethodNames.GET_CLIENT_TOKEN_METHOD);
 
        private class MethodNames
        {
            public const string GET_UPN_METHOD = 
                "BlazorExtensions.SpectoLogicMSTeams.GetUPN";
            public const string GET_CLIENT_TOKEN_METHOD = 
                "BlazorExtensions.SpectoLogicMSTeams.GetClientToken";
        }
    }
}

Add an extension class to allow easy injection into the DI by implementing MSTeamsExtensions.cs:

using Microsoft.Extensions.DependencyInjection;
 
namespace SpectoLogic.Blazor.MSTeams
{
    public static class MSTeamsExtensions
    {
        public static IServiceCollection AddMSTeams   
          (this IServiceCollection services) 
            => services.AddScoped<ITeamsClient, TeamsClient>();
    }
}

Use library in Blazor-Teams App

Add our new component to BlazorTeamApp.Client/Program.cs by using our extension method:

public class Program
{
  public static async Task Main(string[] args)
  { 
    ...
    builder.Services.AddScoped(sp => new HttpClient 
      { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    builder.Services.AddMSTeams();
    ...
  }
}

and rewrite the Tab.razor page

@page "/tab"
@inject SpectoLogic.Blazor.MSTeams.ITeamsClient TeamsClient;
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<p>Current User: @userName</p>
<p>AuthToken: @authToken</p>
<button class ="btn btn-primary"  @onclick="IncrementCount">Click me</button>
<button class ="btn btn-primary"  @onclick="GetUserName">Get UserName</button>
<br />
<button class="btn btn-light" @onclick="GetAuthToken">Get Auth-Token</button>
@code {
    private int currentCount = 0;
    private string userName = string.Empty;
    private void IncrementCount()
    {
        currentCount++;
    }
    private async Task GetUserName()
    {
        userName = await TeamsClient.GetUPN();
    }
    private string authToken = string.Empty;
    private async Task GetAuthToken()
    {
        authToken = await TeamsClient.GetClientToken();
    }
}

In our next post we will extend this library to finally access MS-Graph!

That’s it for today! See you tomorrow!

AndiP