search

OfficeDev / teams-toolkit

Developer tools for building Teams apps
Other
433 stars 170 forks source link

Unable to get the Graph API working using TeamsFx #11746

Open Mingz6 opened 4 weeks ago

Mingz6 commented 4 weeks ago

Describe the bug Due to @microsoft/mgt-teams-msal2-provider package has been deprecated, I changed the package to @microsoft/mgt-teamsfx-provider. The new package cannot exchange the graph token.

To Reproduce Steps to reproduce the behavior:

  1. Clone the project from https://github.com/Mingz6/TeamsFxSso.git
  2. Debug the project in Edge.

Expected behavior I would like to see my profile display in teams tab app with the new teamFX provider.

Screenshots

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

Additional context This issues was reported in https://github.com/OfficeDev/teams-toolkit/issues/10379, but I do not find anything to solve the login problem.

Error Log detail try get profile Graph.tsx:37 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get access token with scopes: User.Read useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Failed to call acquireTokenSilent. Reason: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors. useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Failed to call ssoSilent. Reason: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors. useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Error - Failed to get access token cache silently, please login first: you need login first before get access token. useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get SSO token Welcome.tsx:43 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get basic user info from SSO token Welcome.tsx:43 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Verbose - Get SSO token from memory cache useTeamsUserCredential.js:22 [Thu, 30 May 2024 05:12:03 GMT] : @microsoft/teamsfx : Info - Get SSO token POST https://substrate.office.com/sigsapi/v1.0/Me/Signals 409 (Conflict)

Attempts to Resolve the Issue

  1. Cloned the project from https://github.com/KennethBWSong/authCodeTemplate but was unable to build it. After clicking the Authorize button, Graph.tsx fails to retrieve the user profile, resulting in a blank component and the error log shown above.

  2. Referenced https://techcommunity.microsoft.com/t5/teams-developer/teamsfx-react-3-0-2-teamsusercredential-gettoken-results-in/m-p/3984411. Using https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js prompts "Permissions requested." Using https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js shows a blank page. After granting permission, the error log still appears as above.

  3. Updated to https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js. No change observed.

  4. Installed Specific MSAL Version: Ran npm install @azure/msal-browser@2.21. No change observed.

  5. Updated all npm packages to their latest versions. No change observed.

  6. Added "profile" permission in App registrations. No change observed.

  7. Added await teamsUserCredential.login(scope); in Graph.tsx with no success, but some render issues occurs occasionally.

Mingz6 commented 4 weeks ago

The problem was caused by the following package versions:

@microsoft/teams-js: ^2.23.0 ==> ^2.22.0 @microsoft/teamsfx: ^2.3.2 ==> ^2.3.0 @microsoft/teamsfx-react: ^3.1.2 ==> ^3.1.0

I reverted these versions back to the previous ones, and it is now working for me.

KennethBWSong commented 3 weeks ago

@Mingz6 Thank you for using Teams Toolkit. I want to first confirm that are you going to implement Auth Code Flow or OBO flow in your Teams app? The two repos (https://github.com/Mingz6/TeamsFxSso.git and https://github.com/KennethBWSong/authCodeTemplate) are using different Auth flows. We would suggest you to implement OBO flow since it has better support for mobile devices. You can refer to the sample for OBO flow.

Mingz6 commented 3 weeks ago

sample

Hi @KennethBWSong ,

I am working on this repo https://github.com/Mingz6/TeamsFxSso.git. I managed to get the token that I need. The only issue is that the latest versions of @microsoft/teams-js, @microsoft/teamsfx, and @microsoft/teamsfx-react are not working for me. So I switch to older version.

yiqing-zhao commented 3 weeks ago

Hi @Mingz6, I'm currently investigating this problem, and will update here when I have a conclusion.

yiqing-zhao commented 3 weeks ago

Hi @Mingz6, the error is due to @microsoft/teamsfx upgraded @microsoft/msal-browser from V2.x to V3.x since v2.3.1, which conflicts with the @microsoft/msal-browser@2.x referenced in auth-start/end.html.

The workaround is fixing the @microsoft/teamsfx version to 2.3.0 and @microsoft/teamsfx-react version to 3.1.0. @microsoft/msal-browser does not provide official CDN for v3.x, and we are currently investigating ways to update our auth-start/end.html.