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

Josie Everson 26 Reputation points
2022-11-22T02:21:33.95+00:00

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

Microsoft Teams
Microsoft Teams
A Microsoft customizable chat-based workspace.
9,548 questions
Microsoft Teams Development
Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
3,031 questions
{count} vote

Accepted answer
  1. Sayali-MSFT 2,266 Reputation points Microsoft Vendor
    2022-11-22T12:06:19.593+00:00

    @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


0 additional answers

Sort by: Most helpful