MS Teams App: Trying load one of the angular page as a tab, webpage loads but the button click not calling the webservices.

Question

Hi,

Building a msteams app, in one of the tab i'm planning to load the angular page. The page loads, but the button action is not working.
What Button action does?
It calls the MSAL login(Followed the implementation from here: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app)

Same works on a normal browser, but not when i add that tab as a part of MSTeams app.
Any suggestions is much appreciated.

Regards,
Raghavendra

Answer 1

@Raghavendra G R - MS Teams tab uses iframe and it blocks to open login popup page.
So if you want to integrate it in Teams, you can implement Tab SSO.

Sample reference link:
https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-sso/csharp

docs link:
https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso#:~:text=%20Develop%20an%20SSO%20Microsoft%20Teams%20tab%20,access%20token%20from%20your%20client-side%20code%20More%20

Thanks,
Chetan Sharma

---

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link.

Answer 2

Thanks @ChetanSharmamsft
My understanding is to create angular page and load on the tabs, so wanted to know if that works...?

And seen a couple of reference teams apps which were showing a popup on the click of login from the teams tab, so wanted to achieve the same.

Please guide.

Answer 3

But thats the C-Sharp code right.. I have used MSAL V2.0 library that supports signing in from Angular page. Any workaround wrt Angular would help.

MSAL integration in Angular pages works fine in Browser fyi.