Get SSO token failed with error: App resource defined in manifest and iframe origin do not match

[KristapsD]

Describe the bug Not being able to get the SSO token, with the error: Get SSO token failed with error: App resource defined in manifest and iframe origin do not match

To Reproduce Steps to reproduce the behavior:

1. register app in AAD, configure it for multitenancy
2. add the webApplicationInfo object in project manifest, with registered app info
3. create a teamsusercredential object in code
4. try to log in with it in code
5. provision & deploy the project
6. install the appPackage to your teams (web version to see console)
7. launch the app in teams look for the error when it tries to log in with the teamsusercredential object

Expected behavior getting the SSO token from logging in

Screenshots If applicable, add screenshots to help explain your problem.

VS Code Extension Information (please complete the following information):

• OS: windows 10
• Version 2.5.0

CLI Information (please complete the following information):

• OS: [e.g. iOS8.1]
• Version [e.g. 22]

Additional context I'm thinking this might be an issue with the newest version for teams toolkit, that was released yesterday, because the installed app on teams worked yesterday, before the new update, for one of my colligues who tested my teams app. The error also doesn't appear at all whenever i "f5" debug it locally.

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[blackchoey]

Hi @KristapsD thanks for reaching us. Per your description, you're creating / updating the AAD application, and Teams app manifest file by yourself manually, am I understanding correctly? If yes, you may need to check the content of webApplicationInfo object manually. The expected value for it is:

"webApplicationInfo": {
    "id": "{AAD App client id}",
    "resource": "api://{Your tab app domain}/{AAD App client id}"
  }

If the the domain in webApplicationInfo is not same with your tab app's domain, Teams will return an error to you.

If my understanding is not correct, can you share more details on the repro steps? A sample project that can help us repro this issue would also be helpful.

[KristapsD]

hi @blackchoey, if im understanding what you suggested, then if my tab app is hosted on azure on a domain, in my case this: eparakstsfe0121b2.z13.web.core.windows.net, so the app domain in webApplicationInfo should also be the same? If that's the case then we need to add the mentioned domain as a verified domain to our AAD tenant, but my admin say's that we can't do it since it doesn't belong to us.

[blackchoey]

hi @KristapsD yes the domain in webApplicationInfo should be same. I saw you're using multi-tenant AAD application, unfortunately AAD does not allow setting the domain provided by Azure to a multi-tenant AAD application. Is it possible to use a single tenant AAD application during your app development? If yes, you can just trigger the provision command and our tool can help create / config a single tenant AAD application for you. So you do not need to do all the manual works.

[MuyangAmigo]

Hello @KristapsD, if possible would you be able to share a bit more information about what applications you are trying to develop? In particular we are wondering the scenarios when you have to create and configure AAD app manually. Also seems like you are creating an application intended for multi-tenant?

[KristapsD]

@blackchoey, The major development is already done, and the app is currently in use by my org, but it is planned to offer this app to other businesses later on, so multi tenancy is a must. if we cannot use the domain that's provided by azure, then what other option do we have? is it possible to change the azure domain to our own domain?

@MuyangAmigo The app is basically a document managment system, integrated with sharepoint. And from the server side with our local digital signature provider. And yes, the app has to be multi tenancy capable.

[hund030]

@KristapsD It's possible to use your own domain for tab frontend.

1. Follow this docs to enable CDN for your frontend storage.
2. Then setup custom domain in your CDN.
3. Finally update the frontend endpoint and domain with your custom endpoint/domain in .fx/env.default.json and re-provision your project. All configs should be update with your custom domain.

[KristapsD]

OK, after doing what @hund030 suggested, everything works the way it should, thank you for your help. Though i think that the fact that the apps FE domain and AAD registered apps domain needs to be the same should be mentioned somewhere in the documentations, if it already isn't mentioned and i just missed it somewhere. I also had to enable CORS for my domain on the automatically provisioned SA app service.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[ghost]

Due to lack of details for further investigation, we will archive the issue for now. In case you still have following-up questions on this issue, please always feel free to reopen the issue by clicking ‘reopen issue’ button below the comment box. We will get back to you as soon as possible.

[omrihaim]

@blackchoey how does you suggestion above apply for local testing of an app? While we've assumed we will be able to use the production flow, we get the error above: "App resource defined in manifest and iframe origin do not match"

[blackchoey]

@omrihaim The error indicates the tab app domain configured in Teams app manifest does not match the actual domain of the tab app. You can check below content in your Teams app manifest:

"webApplicationInfo": {
    "id": "{AAD App client id}",
    "resource": "api://{Your tab app domain}/{AAD App client id}"
  }

In local testing scenario, the domain usually starts with localhost.

[omrihaim]

Thanks @blackchoey but can you please show what do you mean the actual domain of the tab app. Where is the domain that is not in the webApplicationInfo? How is it configured? Thanks in advance.

I am currently running on VSCode local debug, that loads under: https://teams.microsoft.com/_#/apps/c12f6cb8-0013.... and will deploy for real production when it works.

[blackchoey]

@omrihaim Usually you will configure your tab app url to Teams app manifest like following:

"staticTabs": [
        {
            "entityId": "index",
            "name": "Personal Tab",
            "contentUrl": "https://localhost:53000/index.html#/tab",
            "websiteUrl": "https://localhost:53000/index.html#/tab",
            "scopes": [
                "personal"
            ]
        }
    ],

For above example, the expected webApplicationInfo in Teams app manifest is (please update the AAD app id accordingly) :

    "webApplicationInfo": {
        "id": "66064627-734b-433c-8668-0ed33441846f",
        "resource": "api://localhost:53000/66064627-734b-433c-8668-0ed33441846f"
    }

Are you building your own Teams app project (not created by Teams Toolkit) with Teams Toolkit? Or you created a project with Teams Toolkit but didn't get enough information / guide about how it works? This could help us optimize our production if you can share. Thank you.

[omrihaim]

Thanks. So it seems it was defined like the env below, and I will try to understand how to solve the authentication before I ask your help again. Thanks.

uses: script # Set env for local launch with: run: echo "::set-teamsfx-env PROVISIONOUTPUTAZURESTORAGETABOUTPUTDOMAIN=localhost:53000"; echo "::set-teamsfx-env PROVISIONOUTPUTAZURESTORAGETABOUTPUTENDPOINT=https://localhost:53000"; echo "::set-teamsfx-env PROVISIONOUTPUTAZURESTORAGETABOUTPUTINDEXPATH=/index.html#";