Microsoft Teams SSO Authentication method getAuthToken() returns 'resourceDisabled'

Question

I am trying to get the AuthToken from Microsoft team and I get an error despite doing everything by book. I know there is a similar question on S.O, but I tried every suggestion, still didn't work. This is my tab code:

  useEffect(() => {
    if (inTeams === true) {
      microsoftTeams.authentication.getAuthToken({
        successCallback: (result) => {
            console.log(result)
        },
        failureCallback: function (error) {
          console.log(error)
        }
    });
    } else {
      setEntityId("Not in Microsoft Teams");
    }
  }, [inTeams]);

And this is my manifest.json. file, I am not sure if the 'webApplicationInfo' part is in the correct place:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",
  "manifestVersion": "1.11",
  "id": "{{APPLICATION_ID}}",
  "version": "{{VERSION}}",
  "packageName": "{{PACKAGE_NAME}}",
  "developer": {
    "name": "Vizibit",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "privacyUrl": "https://{{PUBLIC_HOSTNAME}}/privacy.html",
    "termsOfUseUrl": "https://{{PUBLIC_HOSTNAME}}/tou.html"
  },
  "name": {
    "short": "TeamsAddIn",
    "full": "TeamsAddIn"
  },
  "description": {
    "short": "TODO: add short description here",
    "full": "TODO: add full description here"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#D85028",
  "configurableTabs": [
    {
      "configurationUrl": "https://{{PUBLIC_HOSTNAME}}/signatorDemoTab/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [],
  "bots": [],
  "connectors": [],
  "composeExtensions": [],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "{{PUBLIC_HOSTNAME}}"
  ],
  "showLoadingIndicator": true,
  "webApplicationInfo": {
    "id": "{{APPLICATION_ID}}",
    "resource": "api://{{PUBLIC_HOSTNAME}}/{{APPLICATION_ID}}"
  }
}

The error I get:

This is also in the errors:

Thank you :)

---

Update:

This is the error I get now.

And this is what I used:

  useEffect(() => {
    if (inTeams === true) {
      microsoftTeams.authentication.getAuthToken({
        successCallback: (result) => {
          const serviceRequest: AuthRequest = {
            client_id: "[CLIENTID]", 
            client_secret: "[CLIENTSECRET]",
            requested_token_use: "on_behalf_of",
            grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
            scope:
              "api://[MYNGROK].ngrok.io/[CLIENTID]",
            assertion: result,
          };

          httpClient.GetAuthenticationToken(serviceRequest).then((res) => {
            console.log(res);
          });
          microsoftTeams.appInitialization.notifySuccess();
        },
        failureCallback: function (error) {
          console.log(error);
        },
      });
    } else {
      setEntityId("Not in Microsoft Teams");
    }
  }, [inTeams]);

 "error_description": "AADSTS7000215: Invalid client secret provided. Ensure the secret being sent in the request is the client secret value, not the client secret ID, for a secret added to app '[CLIENTID]'.\r\nTrace ID: 2dc1bddf-a15c-45a8-9346-4d2b83011600\r\nCorrelation ID: cf790d06-19e5-49c4-a79c-364f044d7ee8\r\nTimestamp: 2022-03-31 11:39:59Z",

My client secret is correct, I don't know why it gives this error.

---

Update: Still get the same CORS error, even though I managed to work it out in postman, still cannot do it in React axios.

         var formData = new URLSearchParams();
          formData.append("client_id", "[CLIENT_ID]");
          formData.append(
            "client_secret",
            "[CLIENT_SECRET]"
          );
          formData.append("requested_token_use", "on_behalf_of");
          formData.append(
            "grant_type",
            "urn:ietf:params:oauth:grant-type:jwt-bearer"
          );
          formData.append(
            "scope",
            "api://[NGROK].ngrok.io/[CLIENT_ID]/scope"
          );
          formData.append("assertion", result);

          axios.post("https://login.microsoftonline.com/common/oauth2/v2.0/token", formData);

Answer 1

I don't know which docs you're doing (i.e. which "book" you're "by"), as some (many) of them are very old and require complete rewrite. The best source is this one: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso?tabs=dotnet

Here's a great video overview: https://www.youtube.com/watch?v=kruUnaZgQaY and here's a sample (covers both node and dotnet): https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-sso

That said, it looks like the error is being shown in the bottom screenshot you posted - you need admin consent for the app. See more here: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso?tabs=dotnet#tenant-admin-consent