question

GianlucaCandiotti-7696 avatar image
1 Vote"
GianlucaCandiotti-7696 asked Nilesh-8079 commented

Authentication for embedded app in Teams Tab

Hello, I'm struggling a bit coming up with a clear approach for managing authentication for our embedded MS Teams application.

Our users are segregated into different companies, and each company may handle provisioning and authentication methods in a different way according to configuration.

When embedding our app in MS Teams, it's not really clear how to show them tailored content or have them be authenticated into our app from within the iframe.

I've checked the auth documentation and videos for MS Teams, but most of it either describes how to get access to Graph data or use SSO with AAD or Microsoft oauth2 to get the users authenticated in the embedded application. But is there a way to let users login to our app with any of our current methods and then redirect back to the tab?

Will the SDK methods allow for such flow, or can anyone point me in the right direction.

Thanks in advance!

office-teams-app-dev
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@GianlucaCandiotti-7696,
As we are mainly responsible for general question of Microsoft Teams, your question related to development is not supported by us. I will add office-teams-app-dev tag. Hope you get better response.

1 Vote 1 ·

Hi @GianlucaCandiotti-7696 ,

I am having the same flow as you have implemented. I am new to this and I am expecting a guidance from you.

Since we have a SAAS app and we support DB authentication, external identity providers using SAML and OAuth.
Problem we are facing : When ever user clicks on our tab after switching from other tabs it redirects to our login page. And at present we open our login page within an iframe.

We are trying to overcome this issue with token based mechanism.

Following are challenges and some queries :
1. Do we open our login page on user click and initiates authentication via Microsoft provided JavaScript code.
And if I return a JWT token on successful authentication in any of the cases (Db/External provider)
does it make sense ?

How to store token in MS team app , so that it can be further used..

How to pass this token from MS team to our app , so that we can validate user and allow them in app ?

Since custom app is being opened in an iframe....

It will be very nice of you, if you can guide me on urgent basis...

0 Votes 0 ·
Prasad-MSFT avatar image
0 Votes"
Prasad-MSFT answered GianlucaCandiotti-7696 commented
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hey @Prasad-MSFT, thanks for the reply!

Most of my issues are resolved at this point. I've managed to authenticate users in web, desktop and android platforms, but iOS specifically is not working because of the cookies and I'm not sure how to overcome this limitation. I don't think it's about reading cookies cross domain because it doesn't even work if I set a testing cookie in the Microsoft Teams Tab app itself and try to read it. I'm gonna test the methods described in the blog post you linked but I'm not sure if it will help.

Cookies seems like a very basic capability, I don't wanna switch the whole authentication strategy at this point just because of this constraint in iOS.

If someone could give me a definitive answer about cookies in the iOS application it would help me move on, so I avoid wasting time in something that has a dead end.

Thank you

0 Votes 0 ·
Wajeed-MSFT avatar image
0 Votes"
Wajeed-MSFT answered Nilesh-8079 rolled back

Hi @GianlucaCandiotti-7696 - The flow mentioned in Microsoft Teams authentication flow for tabs is applicable for custom login providers as well.

Here are the steps:

  1. Provider Login button to the user. Call microsoftTeams.authentication.authenticate() with list of providers to choose from.

      microsoftTeams.authentication.authenticate({
             url: window.location.origin + "/tab-auth/choose-provider",
             width: 600,
             height: 535,
             successCallback: function (result) {
                 getUserProfile(result.accessToken);
             },
             failureCallback: function (reason) {
                 handleAuthError(reason);
             }
         });
    

  2. Provide option for user to choose from different authentication methods. See this image - authentication pop-up

  3. On click of selction of provider you can redirects user to respective identity provider where user can complete the login.

  4. Make sure to set redirect URL which is on same domain as your '/tab-auth/choose-provider' page.

  5. Once you are redirected after successful login you can call microsoftTeams.authentication.notifySuccess() with parameters like session id/ auth token.

  6. microsoftTeams.authentication.notifySuccess() will close the pop-up and now you can redirect authenticated user to page of your choice.

Please let me know if you need any further help.



image.png (89.9 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Wajeed-MSFT , thanks a lot for providing steps and the additional screenshot!

Gonna give it a try in a few days, got myself busy with something right now. But will definitely get back to you 🙌

0 Votes 0 ·

Hi @Wajeed-MSFT ! I started working on this again, and I still have some questions around it, would appreciate it a lot if you can guide me.

  • First, after I get an auth token, I would need that value to be set as a cookie inside the iframe since we use that to authorize requests. Is there a recommended way of doing that? I could post a message to the iframe, but I'm not sure if there is another approach.

  • I tried setting and reading cookies from within the iframe, it works well in web and desktop, but in mobile (iOS), it doesn't read them, so I'm not sure if it's supported or if I have to do something special to make it work. localStorage seems to work well.

  • In general is localStorage a good way to persist some information? Since customers are segregated in our application in different companies, we need for them to input the company first in order to login. I could ask them that and persist it in localStorage. The problem is that they would need to do this every time they re-open the app. You could also have a configuration page but apparently the settings' interface only supports a specific set of values, and it says it's recommended to use it after the user authenticates so it's a bit confusing how would it work.

Hope the questions make sense and I'm not too far from figuring things out. Thanks a lot for your guidance!



0 Votes 0 ·