CODEWITHSUNDEEP
authenticationoauthcallbacktabsmicrosoft-teams
Leonardo
Leonardo

Reputation: 69

Microsoft Teams Authentication

I've developed a custom Teams app, it has one base tab where the user must log in before viewing some content. The auth is over Oauth2 code flow, using an external npm package (@openid/appauth). I've create this code for open the popUp when user make a click into login button:

     login = () => {
            const successCallback = (result) => {
                this.props.setLogged(result);
            }
            const failureCallback = (error) => {
                logger.warn(JSON.stringify(error));
                this.props.setError(error);
            }
            authClient.teamsAuthRequest(this.props.user.PartitionKey, this.props.user.RowKey, successCallback, failureCallback);
        }

this function: teamsAuthRequest is only the configuration used for make call to the authorization endpoint:

     teamsAuthRequest: async (tid, aaId, successCallback, failureCallback) => {
                const config = await createConfiguration();
                const request = createAuthRequest(tid, aaId);
                teamsHandler.performAuthorizationRequest(config, request, successCallback, failureCallback);
            }

It call a function that open the popUp by this code:

            microsoftTeams.authentication.authenticate({
                url: url,
                width: 600,
                height: 550,
                successCallback: function (result) {
                    successCallback(result);
                },
                failureCallback: function (reason) {
                    failureCallback(reason)
                }
            });

If I use teams web it correctly opens the popup and close it after login.

If I use the same app into teams desktop, it correctly opens the popup but it never calls the notifySuccess function and it never close the popup.

When I receive the callback from the external provider to receive the authorization code I run this code:

      if (response) {
        authClient.getToken(request && request.internal && request.internal.code_verifier, response.code)
          .then((oResponse) => {
            user = {
              PartitionKey: request.extras.tid,
              RowKey: request.extras.aaId,
              AccessToken: oResponse.accessToken,
              RefreshToken: oResponse.refreshToken
            }
              microsoftTeams.authentication.notifySuccess(user)
          })
          .catch(oError => {
            microsoftTeams.authentication.notifyFailure(oError)
          });
      }

How can i solve it?

Upvotes: 0

Views: 802

Answers (1)

Hilton Giesenow
Hilton Giesenow

Reputation: 10844

Teams basically launches a login popup for you with microsoftTeams.authentication.authenticate. As a result, even though you -see- a popup, you actually want to use a redirect flow. Please see here for a sample app illustrating this

https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-sso

Upvotes: 1

Related Questions