Use SSO key inside iframe in Microsoft Teams tab app

Question

I am working on a Microsoft Teams tab app using the VS code toolkit. I have a already working website and I embedded it inside an iframe. My site is able to authenticate the user by using a Microsoft SSO key. I managed to get the SSO key of the current Microsoft user and I would like to pass down the token to the iframe so I can authenticate him/her. Is it possible to do this? If yes, how?

Thank you in advance for your help!

Here are a few snippets of my code:

useEffect(() => {
microsoftTeams.initialize();
microsoftTeams.authentication.getAuthToken({
  successCallback: (result) => {
    console.log("result", result);
    setToken(result);
  },
  failureCallback: (reason) => {
    console.log("reason", reason);
  },
});
}, []);
return (
 <div>
  <h1 className="mainTitle">{token}</h1>
  <iframe
    src="mysiteurl"
    title="XYZ out page"
    allowFullScreen
    className="iframe"
  ></iframe>
</div>

);

Identity providers typically don’t allow their login and consent pages to be placed in an , so you must use a popup (such as /tab-auth/simple-start above) instead of trying to host the login experience directly in your tab. — Prasad-MSFT, Nov 04 '22 at 11:32
Okay, but how do I pass down the token I got from Teams, to my iframe? — Matteo Robert, Nov 04 '22 at 15:04

score 0 · Answer 1 · answered Nov 04 '22 at 13:09

0

If you own/support both apps (the main website and the Teams app you're trying to iframe it into) I would -strongly- advise you to rather modify your app to rather support a mixed Teams / non-Teams scenario. You can do a very simple detection to check if you're inside Teams or not (see here for sample code - I actually posted an answer on that question too, but it's not relevant to you - look at the other answer someone else posted for what you need specifically).

If you are inside Teams, then use MicrosoftTeams.authentication.getAuthToken to let Teams do the SSO for you, and if you're not in Teams (i.e. standalone web) you can let you app do what it's doing already (presumably MSAL or similar?).

answered Nov 04 '22 at 13:09

Hilton Giesenow

9,809
2
10
24

Thanks for the answer, but I think you didn't understand my main question. How do I pass down a string(token) to an iframe website? – Matteo Robert Nov 04 '22 at 14:42
Hi Matteo. I think I -did- understand it, I just gave you the best answer - other approaches will give you other problems. As an example, you could, for instance, pass the token from the your main frame to your iframe in the querystring, but this would mean the traffic is open to anyone/anything in between and the token could be sniffed off the wire, which is a security vulnerability. Alternatively, you could probably share a cookie between the two sites, if you own the domain, but that opens you to cookie issues as well as locking your user to the same machine – Hilton Giesenow Nov 05 '22 at 15:55
(continued) which would be an issue moving between devices. Your inner app also can't launch a popup to refresh the token (Teams blocks this), so you're going to run into trouble there potentially. As a result, the answer I gave is the one I'd recommend the most - if you control both apps, simply have your main app also support being embedded properly in Teams. Hope that made sense? – Hilton Giesenow Nov 05 '22 at 15:56
ok great. Give it a go keep us posted – Hilton Giesenow Nov 07 '22 at 19:48

Use SSO key inside iframe in Microsoft Teams tab app

1 Answers1