Acquire a token silently from the MS Teams Iframe

[Mimetis]

Hi team !

I'm currently trying to develop an application for Microsoft Teams
Here is the setup:

• Angular 5
• Node JS
• MSAL SDK for auth
• Graph SDK for graph requests

Actually, I'm able to get a new token from AADV2 using the MSAL SDK:

• Open a new popup hosted on my application
• Launch an auth process using the Redirect behavior

Once I'm authenticated, the main page will call the Graph endpoint using, this kind of code (simplified with no error Handler, for demonstration only) (TypeScript Inside) :

let token = await this.userAgentApplication.acquireTokenSilent(this.applicationConfig.graphScopes);

var client = Client.init({
  authProvider: (done) => {
    done(null, this.authService.token); //first parameter takes an error if you can't get an access token
  }
});

let messages: [MicrosoftGraph.Message] = await client.api('/me/messages').get();

return messages;

But it doesn't work since I'm, by design, in an IFRAME

How can I get a token from my userAgentApplication ?
I know there is a token, since I'm able to authenticate my user with my popup code.
There is a method in the SDK, marked as hidden called getCachedToken. Can we use it ? Do you plan to make it available ?

Eventually, Is it possible to use MSAL Inside MS Teams or should I use another sdk ? (passport, implementing the authentication code .. ?)

[rohitnarula7176]

@Mimetis Can you try to remove the decorator manually (@resolveTokenOnlyIfOutOfIframe) from the acquireTokenSilent function by just deleting that decorator on top of it and see if the api call succeeds. Currently this decorator blocks the call if it is in an iframe. I am not sure but I believe if your app is inside an iframe by design, the cookies will be blocked by the browser while making an authorization request with prompt=none and the api call will fail.

[Mimetis]

Yes I think you are right.
For instance, MS Teams doesn't allow te create an IFRAME, so the silent token won't be able to work.
I think, I will try to use HelloJS for now, until you have test a full scenario in Microsoft Teams :) (I you plan to do it, actually)

Thx for your quick answer !

Seb

[brownbl1]

I also would like to see this behavior supported. Is there a plan to get msal js working inside of a teams context?

Currently, the call to acquireTokenSilent breaks as the promise does not resolve at all. I think it would make sense to at least reject or return the cached token if it is still valid. That way our app can decide whether it needs to spawn a new window and do the redirect (as mentioned above).

[Mimetis]

I was wrong actually. There is no problem with Teams to create an hidden IFRAME, so we should be able to acquire a token silently, if the MSAL sdk is allowed to work in an existing IFRAME.

I reopen the issue, for tracking.

@rohitnarula7176 any idea ?

[rohitnarula7176]

@Mimetis Msal is not designed to work from inside an iframe.

[Mimetis]

Thx for your answer, so what is the right way to authenticate users inside MS Teams ?

[ahnwarez]

Any updates on this issue? This issue is currently hindering us from continuing working on a project which depends on msal running in an iframe.

Are there any plans supporting iframes in the future? Are there other alternatives?

[jayserdny]

@Mimetis @AhmedAnwarHafez did you guys ended up finding a solution? I am also stuck because I need to do auth inside an Iframe in Dynamics 365 :/

[ahnwarez]

@jayserdny Nope. I tried fiddling with it but no success. I have the same problem as yours. Trying to consume MS Graph inside an iFrame in Dynamics 365.

[jayserdny]

In my case, I am trying to get the access token to send it to a backend. Any HTTP I can make it but when I try to intercept it with MSAL, it is just not working :/ @AhmedAnwarHafez

[Mimetis]

Hi all, this SDK is not working in a Teams context.

You should take a look on this sample, that should help you : https://github.com/OfficeDev/microsoft-teams-sample-auth-node

[navyasric]

The MSAL.js library is not designed to perform interactive auth requests like popup or redirect from inside an iframe. This is prevented for security reasons by Azure AD Identity provider to mitigate clickjacking or frame busting attacks.  The MS Teams documentation offers the authentication flows to use in the Teams context: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/authentication Please check out those flows.

[ahnwarez]

@navyasric Thanks for your reply. I'm trying to acquire a token for Dynamics 365. By design, Single-Page-Apps must be hosted inside web forms (iFrames). I'm not exactly sure how I can acquire a token since it's not supported as you said. Could you please guide us on how to acquire a token for Dynamics 365?

I would really appreciate your help. Thanks :)

[binaryjam]

Hi I see you have closed this, and whilst I can understand that you have made a decision to not support IFRAMES, there are occasions where systems written to use this are embedded in an IFRAMe and they need to to know and handle the error.

@brownbl1 was correct when saying

Currently, the call to acquireTokenSilent breaks as the promise does not resolve at all. I think it would make sense to at least reject or return the cached token if it is still valid. That way our app can decide whether it needs to spawn a new window and do the redirect (as mentioned above).

I have this exact issue now, The app is like Ms Stream, which can handle this btw probably because they coded their own library, It can open full page or be embedded in an IFRAME,

When running this code in an IFRAME the promise does not complete, does not error and is lost, this surely is not correct and breaks the pattern here. Please Fix this, and spit out another error type like cantOpenInFrame if you cannot allow use in an IFRAME.

[sameerag]

Sure, I guess as we figure out supporting iframe, we can check if emitting an error is possible. @binaryjam Can you please raise another github issue with this request -> Specifically emitting errors in this case?