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
spectologic 