How to refresh id-token using @microsoft/teamsfx

Question

I created a Teams tab application by customizing the SSO react app sample from the Teams toolkit. The application redirects the user to our website (inside one of the tabs). I can grab the id-token in react ( teamsfx.getCredentials().getToken("") ) and pass it to our web application via a query parameter.

This id-token is validated and then passed around to various microservices that comprise our backend.

This part works well, but then, we had the need to refresh the token. So, we decided for the web application (written in Angular) to fetch the token using @microsoft/teamsfx and @microsoft/teams-js npm packages.

While I am not certain if that is the way to go, when I execute the following code inside an angular service, it throws the " " error.”错误

    try {
      const teamsFx: TeamsFx = new TeamsFx(IdentityType.User, {         
        "clientId": "ee89fb47-a378-4096-b893-**********",
        "objectId": "df568fe9-3d33-4b22-94fc-**********",
        "oauth2PermissionScopeId": "4ce5bb24-585a-40d3-9891-************",
        "tenantId": "5d65ee67-1073-4979-884c-**************",
        "oauthHost": "https://login.microsoftonline.com",
        "oauthAuthority": "https://login.microsoftonline.com/5d65ee67-1073-4979-884c-****************",
        "applicationIdUris": "api://localhost/ee89fb47-a378-4096-b893-***************",
        "frontendEndpoint": "https://localhost",
        "initiateLoginEndpoint": "https://localhost:8101"
      });

      const creds = await teamsFx.getCredential().getToken('https://graph.microsoft.com/User.Read');
      const token = creds?.token;

      console.log("New Token: ", token);

      const expirationTimestamp = creds?.expiresOnTimestamp;
      this.scheduleRefresh(expirationTimestamp);
      this.tokenRefreshed.next({ token: token, expiresOnTimestamp: expirationTimestamp });
    }
    catch (error) {
      console.error("Error in getNewTeamsToken(): ", error);
    }

Am I missing anything here, or is the approach itself wrong? Please advise.

Answer 1

Teams is basically just using MSAL under the covers (with a bit of other stuff thrown in I think) to get the token. If you want to be able to authenticate your user outside of Teams, in a separate web app, you can simply use MSAL yourself (something like this I'd guess: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code ).

That would mean, essentially, that you have a tab web app, doing Teams SSO and then a separate standalone Angular app doing direct MSAL auth. Does you tab app actually do anything? If not, and you're only using it to redirect, you can instead combine these into a single app, and detect in the app whether you're in Teams or not - if you are, do SSO using TeamsFX. If not, do MSAL login directly. This link shows how to detect if your inside of Teams or not.

If you want to continue with separate apps that's fine, but I absolutely would not pass the token as a QueryString parameter - that is extremely dangerous. First of all, tokens are not meant to be passed like this at all, as they could be intercepted. Secondly, passing them on Querystring means that they are entirely open - anything inbetween can sniff the address and lift out your token (if it was a POST payload with httpS, for instance, at least the 'S' would be encrypting the token between browser and server).