Teams blocks a teams tab app to pop up a window for AAD log in

Question

Hi there,

We have a product that is embedded into Teams client as a tab app. This app requires to pop up a window for AAD log in. Currently this window is blocked by Teams client, maybe because tab app runs in a i-frame. I have 2 questions:

• Is that a configuration in javascript/api allow us to unblock this window pop up?
• Is that possible we can retrieve the AAD token/teams access token from the tab app somehow?

Any help is appreciated!

Josie

Answer 1

@Josie Everson - Teams app doesn't recognize sub iframes. Therefore, it'll not load if there is an iframe within the tab app.

You can choose any third-party OAuth provider, such as LinkedIn, Google, and others. The process to enable authentication for these providers is similar to using Azure AD as a third-party OAuth provider.

Azure AD, like most identity providers, doesn't allow its content to be placed in an iframe. This means that you'll need to add a pop-up page to host the identity provider. In the following example, this page is /tab-auth/simple-start. Use the authentication.authenticate() function of the Microsoft Teams client SDK to launch this page when the button is selected.

import { authentication } from "@microsoft/teams-js";  
authentication.authenticate({  
    url: window.location.origin + "/tab/simple-start-v2",  
    width: 600,  
    height: 535})  
.then((result) => {  
    console.log("Login succeeded: " + result);  
    let data = localStorage.getItem(result);  
    localStorage.removeItem(result);  
    let tokenResult = JSON.parse(data);  
    showIdTokenAndClaims(tokenResult.idToken);  
    getUserProfile(tokenResult.accessToken);  
})  
.catch((reason) => {  
    console.log("Login failed: " + reason);  
    handleAuthError(reason);  
});  

Here is sample that contains a static tab that requests an access token for Microsoft Graph, and shows the current user's basic profile information from Azure AD.

Reference document-https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad?tabs=teamsjs-v2#navigate-to-the-authorization-page-from-your-pop-up-page

Thanks,

Sayali

---

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link