.netblazorblazor-server-sideteams-toolkit

Blazor Server Teams App — How to use Teams authentication with AuthorizeRouteView?

I'm building a Blazor Server app integrated with Microsoft Teams, and I want to use AuthorizeRouteView to protect certain pages/routes based on Teams authentication.

I found official Microsoft samples, but for some reason there is not a single blazor project, although if create a project in VS, we get a blazor server app

In the Vs blazor template, there's logic to sign in and fetch the user profile like this:

private async Task ShowProfile()
{
    IsLoading = true;
    var tokenCredential = await GetOnBehalfOfCredential();
    var graph = GetGraphServiceClient(tokenCredential);

    Profile = await graph.Me.GetAsync();
    UserPhotoUri = await GetPhotoAsync(graph);

    IsLoading = false;
    ErrorMessage = string.Empty;
}

private async Task ConsentAndShow()
{
    try
    {
        await teamsUserCredential.LoginAsync(_scope); // popup login
        NeedConsent = false;
        await ShowProfile();
    }
    catch (ExceptionWithCode e)
    {
        ErrorMessage = e.Message;
    }
}

From what I understand, teamsUserCredential.LoginAsync(_scope) triggers a popup (auth-start.html & auth-end.html) and returns an access token for the given scopes.

I want to completely block access to the app unless the user is accessing it from inside Microsoft Teams.

Question: How can I wire up this Teams authentication flow to work with Blazor's built-in AuthorizeRouteView?

Any working examples would be appreciated!

Solution

  • Teams client will block any popup login pages except for the authenticate method in Teams SDK according to this [issue](https://github.com/OfficeDev/microsoft-teams-library-js/issues/171), and thus I don't think we could leverage AuthorizeRouteView in Teams.