OfficeDev / microsoft-teams-library-js

JavaScript library for use by Microsoft Teams apps
https://docs.microsoft.com/microsoftteams/platform/
Other
414 stars 187 forks source link

Bot-based message extension authentication with external browser #2304

Open onmomo opened 2 weeks ago

onmomo commented 2 weeks ago

While implementing bot-based message authentication flow, we noticed that the authentication flow is triggered with the embedded browser of the Teams Desktop client. Using an embedded browser is not supported by Google anymore. It fails with "Error 403, disallowed_useragent" due to the authentication running in the embedded browser, which is a actually a security risk.

For our personal tab app, we implemented the authentication leveraging the isExternal: true flag, which resolves this issue for personal tab apps.

This is how we respond with our query and action message extensions to trigger the authentication flow in the embedded browser. We are following this guide for adding third party authentication to message extension.

return {
      type: 'auth',
      suggestedActions: {
        actions: [
          {
            type: 'openUrl',
            value: authUrl.toString(),
            title: i18next.t('card.auth.title', { lng: userLang })
          }
        ]
      }
    } as MessagingExtensionResult
Screenshot 2024-05-03 at 18 07 53

Please advise how we can trigger this flow on the external system browser in order to resolve this?

Vikram-MSFT commented 1 week ago

Thanks for raising your query, we will investigate it and get back to you.

Vikram-MSFT commented 4 days ago

Hii @onmomo Could you please share repro steps or a short vedio for your issue and manifest to test it from our end?

onmomo commented 3 days ago

@Vikram-MSFT Interestingly, I tried to reproduce the issue with Teams 2.0 on MacOS (Version 24091.213.2852.3731 (24091.213.2852.3731)) but I was not able to, seems resolved at least for MacOS. I don't really understand why this should have changed out of a sudden, though I'm happy to share a video that reproduces the error on Teams for iOS. I already provided the sample code for the MessagingExtensionResult that initiates the shown auth flow.

https://github.com/OfficeDev/microsoft-teams-library-js/assets/1713109/e7ff479e-be74-477e-bb16-380ca3b9a643

Here are the resources google is referring to for the error disallowed-useragent

If you get an error that says “403 disallowed_useragent,” the app uses embedded WebViews. Some developers use WebViews to help display web content in an app. Embedded WebViews puts your security at risk because they could let third parties access and change communications between you and Google.

As far as we understand the issue, Teams for mobile should not leverage the embedded WebViews but open the native system browser instead to run the authentication flow with Google.

Vikram-MSFT commented 3 days ago

Hello @onmomo Could you please try to use isExternal true in auth param. Please refer this documentation:https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-oauth-provider

You can also refer this sample:https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-external-auth/csharp

onmomo commented 3 days ago

@Vikram-MSFT thanks for your response. As mentioned, I implemented isExternal for our personal tab and also contributed to the referenced docs, to allow a successful implementation of isExternal. Unfortunately, isExternal seems not supported for bot based message extensions authentication flows. There isn't any call of the authentication() function at all in our code since this is happing by the teams clients when receiving a message of type "auth" it seems. Could you please check with the developers if the msg extension auth docs are missing to describe "isExternal" support or if this is currently not supported at all? Thank you.