Getting Started Wiring Up

Wiring up the Code

Add Using Statements

To have all the types available to you in your application, add the following using statements to your _Imports.razor file.

@using Blazorade.Teams
@using Blazorade.Teams.Components
@using Blazorade.Teams.Configuration
@using Blazorade.Teams.Interop
@using Blazorade.Teams.Model

If you added a reference to Blazorade Core too, add the following using statements to the list above.

@using Blazorade.Core.Components
@using Blazorade.Core.Components.Builder
@using Blazorade.Core.Components.Server

Add Blazor Teams Services in Startup

There are a few services that you need to add in order for Blazorade Teams to work properly. You do this as you normally would, in your Startup class. If you are building a Blazor WebAssembly application, you would need to add these services in the Program class.

In the simplest form, you would just add the following line of code to the ConfigureServices method in your Startup class.

services.AddBlazoradeTeams();

However, if you want to let Blazorade Teams take care of authenticating your users, you would have to add a little bit of configuration. This would allow you to access APIs like Microsoft Graph in your application. So, instead of the line of code above, add this instead.

services.AddBlazoradeTeams((provider, config) =>
{
    var myTeamsApp = provider
        .GetService<IConfiguration>()
        .GetSection("myTeamsApp");
    config.ClientId = myTeamsApp.GetValue<string>("clientId");
    config.TenantId = myTeamsApp.GetValue<string>("tenantId");

    config.LoginUrl = "/login";
    config.DefaultScopes = new string[] { "User.Read", "Mail.Read" }
});

clientId and tenantId represent your application's Azure AD registration. The tenant can be specified either as the tenant GUID or name, like [tenant name].onmicrosoft.com.

The login page is used by Blazorade Teams to perform interactive login when needed. For more information on the login page, see login page.

To get the Client ID, you need to register your application with Azure AD.

The sample code above assumes that the configuration file for your application has a top-level attribute myTeamsApp, with the necessary information, as shown below.

{
    "myTeamsApp": {
        "clientId": "[client ID of your app]",
        "tenantId": "[tenant name].onmicrosoft.com"
    }
}

You could also use the tenant GUID as value for the tenantId attribute, or even use your vanity domain, like yourcompany.com.