SSO Quickstart for Group Tab Issues and Resolution

[snorris31]

Hello!

While trying to use the tab-channel-group-sso-quickstart Typescript sample, my team and I ran into several issues. For one, just running the project as directed in the 'Run the app' section of the leads to immediate errors like this one:

Other issues include lack of support for viewing/testing the application as a standalone web application (shows a blank page with the 'parent window not initialized' error in the console), error if there is no profile image set for a user in Teams due to the graph API call to retrieve a user's profile photo, and also difficulty debugging/decoupling because of the auto-provisioning that happens on execution.

I wanted to offer a simple version, that moves some of the work (like setting up a tunneling service) to the user, but also makes it easier to test as a web app, and then test in teams. It allows hot reload, faster time to build/run (when using the --debug flag), and a simpler application to hopefully minimize issues when running the application.

It simply uses the yeoman generator for building teams apps as suggested in the MS docs (https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-channel-group-tab?tabs=vs&pivots=node-java-script). Nothing fancy!

This is the code. https://github.com/snorris31/group-tab-sso

I was wondering what the process looks like for suggesting this addition to the repo?

[ChetanSharma-msft]

Hello @snorris31 - Thanks for raising your query. We will investigate your query and let you know.

[Vaibhav-MSFT]

1) We recommend you remove the toolkit related files from the existing sample and run the sample using below steps. https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-channel-group-sso-quickstart/ts#setup

note: please remove highlighted files and code.

2) Graph API: we need to add try and catch block to handle the Exception. Raised the bug for this- https://github.com/OfficeDev/Microsoft-Teams-Samples/issues/1163

[ChetanSharma-msft]

Hello @Pawan-MSFT, @Prithvi-MSFT Please Handle Exception if there is no user profile photo available during Graph API call.

https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/tab-channel-group-sso-quickstart/ts/src/components/Tab.tsx#L154

[ChetanSharma-msft]

Hello @snorris31 - Thanks for sharing your feedbacks: Please find below inputs on your queries:

1) Regarding below error:

Could you please try with the latest packages and NPM version and check once?

2) Lack of support for viewing/testing the application as a standalone web application (shows a blank page with the 'parent window not initialized' error in the console)

=> As you know that it's a Teams app and if we use Teams related libraries, it will not work as a standalone web app and you will get the sample error (By design behavior)

3) If there is no profile image set for a user in Teams due to the graph API call to retrieve a user's profile photo. => We can handle it and show the default image. We will try to change the code and will raise the PR for it.

4) Difficulty debugging/decoupling because of the auto-provisioning that happens on execution. => Initially we have created the sample without using toolkit but later we have migrated the sample to use toolkit. You can follow these steps: https://github.com/OfficeDev/Microsoft-Teams-Samples/issues/1142#issuecomment-1961232513

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 3 days. It will be closed if no further activity occurs within 3 days of this comment.