Search code examples
reactjsmicrosoft-graph-apimicrosoft-teamsmicrosoft-teams-js

MS Teams Tab App is not closing back the Admin Permissions Consent window in the Desktop/ Mac Teams application

I am building a Microsoft Teams Tab application, https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs. In my application, I need to open the admin permissions consent page within the app to force the IT admin to allow permissions for the entire organisation, https://learn.microsoft.com/en-us/microsoftteams/app-permissions-admin-center. I am using @microsoft/teams-js SDK for that. I have implemented the flow. It is working perfectly fine on the web version of the application. But when I used the application on the Desktop/ Mac Teams app, it opens up the Admin Permissions Consent popup/ Login Window for admin. But after granting the permissions or cancelling to grant the permissions, it does not close the window back. Instead it is trying to keep showing our application's current page (home page URL) within the popup window.

This is my code to open up the Admin Permissions Consent window.

const openAdminConsentWindow = async (tenantId: string, clientId: string) => {
    authentication.authenticate({
      url: getAdminConsentUrl(tenantId, clientId),
      width: 600,
      height: 535,
      successCallback:(result: string| undefined) => {
          // Do something, permissions granted
      },
      failureCallback:(reason: string | undefined) => {
          // handle the error
      },
    });
  };

This is the getAdminConsentUrl function.

const getAdminConsentUrl = (tenantId: string, clientId: string): string => {
    return `https://login.microsoftonline.com/${tenantId}/v2.0/adminconsent
        ?client_id=${clientId}
        &scope=https://graph.microsoft.com/User.Read https://graph.microsoft.com/Team.ReadBasic.All
        &redirect_uri=${window.location.origin}/index.html#/admin-permissions
        &state=12345`;
  };

When a button is clicked, it will retrieve the required variables and call openAdminConsentWindow function. I uploaded my app to the Teams and tested it on the web browser. It is working fine. After I consent the permissions, it closes the Consent window back. But when I upload the app to the Mac/ Desktop Teams app and open the consent Window, it opens up the consent window, I can choose to consent or not to consent the permissions showing the following popup.

enter image description here

After I accept or cancel, instead of closing the Window, it keeps showing our application within the same popup without closing it as follow. enter image description here

The page with the loading message is basically home page of my application. How can I fix it?

Solution

  • Your redirect page, should call the notifySucces(…) method. This will call teams to close the login screen.

    But as said in the other answer, you can also mark your app as “needs admin pre-approval” That will block your app in teams until the admin approves your app. That page can also include additional instructions, like pre-approve the M365 app with this link.

    You need to set defaultBlockUntilAdminAction to true and set publisherDocsUrl to the page with the instructions for the admin, as described here

    Mind you this only works for applications installed through the Teams Store, and not for custom apps that a users uploads.