Teams Authentication

[ccl19]

Hi, we have created our application with Blazor WASM, however, we are having issues when authenticating on the teams desktop app. Authentication works with the teams web app, however, the popup for login disappears when opening the app on the desktop app. Is there any way to solve this issue? We used Microsoft.AspNetCore.Components.WebAssembly.Authentication for our authentication.

[thomyg]

HI @ccl19!

Did you also use the Teams Toolkit for Blazor or are you implementing auth on your own?

Can you post the part of your config file that deals with auth? (Securely of course!) Meaning the AAD app config, callback URL etc.

Do you always get a pop-up when using the app in the browser? That leads me to think that SSO (sigle sign on) might not be configured properly, and the browser just falls back to opening the pop which the desktop client refuses to do.

[ccl19]

Hi @thomyg, we are implementing the auth on our own using MSAL authentication. Below is our config for AAD, please let us know if there is other information in another file needed:

"AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "<CLIENT_ID>",
    "ClientSecret": "<CLIENT_SECRET>",
    "ValidateAuthority": true
  }

We always get the popup when we open the app on the browser, we have also tried changing it to redirect, however, the teams' desktop application doesn't allow iframes and we get this error.

[thomyg]

Ok, given your timeframe of only two days left for the hackathon you need to make a decision in terms of, do you want to solve this problem in the nicest possible way or do you want to make the deadline?

What would be the "easiest" way out -> use Visual Studio and Teams Toolkit for Blazor Server and you are up and running with an authenticated Tab within the next hour. I don't know the whole breath of your app and how much work it is to port it to server, but my gut feeling screams "Do this!".

The other option would be to implement authentication based on the Teams JS SDK in WASM on your own. Here I also see two options, both work on top of Balzor JS interop features. The first would be to mimic what Blazor Server is doing the other would be to use the Graph Toolkit and its auth JS component to get to the users token.

Both of those approaches depend on the auth token you get from Teams. If your Teams app definition includes your Azure AD app as a trustes SSO endpoint, Teams JS SDK will hand over a basic user token via the JS SDK. This token has only a, I think, one basic scope, but can be used to require your "proper" token given on your AAD config and provided scopes. This means you would need to create your own "pop up" pages and redirect the auth flow to a start and end page for authentication. You can look at this project https://github.com/thomyg/TeamsExplorer where you see how Blazor Server does the dance. From a logical point of view, I don't see a difference to WASM.

For the Graph Toolkit, a Blazor Server sample would be https://github.com/thomyg/mgt-teams-explorer. Same idea of app, but different auth stack based on mgt.

BUT, there is one thing where I'm not sure, as I'm not experienced enough in WASM. For that to work you need to have a way to authenticate your app against AAD to request a new token based on the token Teams JS provides. I don't know how to create a secure client in WASM that is capable of doing that. In Blazor server I just use clientid/password, and from my understanding this would be a deal breaker in the WASM world as you would deploy those credentials to your clients and afaik can be seen as a security issue.

Again, if you have the chance, move over to Teams Toolkit and Blazor Server, I think WASM isn't the way, given your deadline in ~48 hours.

I know, that the team is working/planning on making Teams Toolkit also available for WASM, but I'm not up-to-date on their efforts and I just tried it with the latest VS pre view and its Server only still.

Sorry for not having an easy answer to your questions. But that is my take on that at the moment.

[svrooij]

The Teams Toolkit does not support Blazor WebAssembly just yet, I'm having the same issue. Our application also connects to Graph but is a Blazor Server app (right from Visual Studio, New Teams app template). There things like this are all arranged.

You could also go the following route:

1. Add an Azure Function that exchanges the token for your app with a token for Graph (not recommended for production) and returns it to the client You can accomplish this by using the on behalf of flow.
2. Use TeamsJS SDK in Blazor WebAssembly to get a token from Teams for your app.
3. Call your new endpoint to exchange the token for a graph token
4. Call graph with your accuired Graph token.

[KennethBWSong]

In my understanding, you need to trigger the popup using Teams SDK to make sure it will not be blocked. You can refer to the sample code here.