Custom Teams Tab built with SharePoint SPFx - stuck at paging/navigation/authentication issues; NOT working in Teams DESKTOP client.
Hi all,
I developed a custom MS Teams tab, using SPFx. So basically it's an SharePoint app (.sppkg file) installed in the SP AppCatalog Site, then deployed to Teams, and finally added as a tab in the channel (the "+" sign along the "Posts", "Files", etc. links. Inside it's a single-page app using a few react components.
At some point, I needed to obtain the authentication token from Azure: for this I created an app in my tenant's azure platform and I used adal.
Relevant code is extracted below:
export default class MyTab extends BaseClientSideWebPart<IMyTab> {
private _teamsContext: microsoftTeams.Context;
private getAzureToken(): void {
var options: AuthenticationContext.Options = {
clientId: this.properties.azureAppId, // I have this, it's an custom app property
extraQueryParameter: "scope=openid+profile&login_hint=" + encodeURIComponent(this._teamsContext.loginHint), //
popUp: true,
redirectUri: window.location.origin
};
let authContext = new AuthenticationContext(options);
authContext.acquireTokenPopup(authContext.config.loginResource, undefined, undefined, (errDesc, token, err) => {
// here I have the token and carry on...
});
}
}
This worked fine using Teams Web Client (FF, CH, Edge). When it needs to authenticate, it opens a small browser pop-up, where the user is prompted to choose the username, and once you click that, it's gone and the "callback" method continues running and has the token.
However, it does **not when running the Teams DESKTOP client**. A pop-up is opened in the system browser, but the Teams desktop app looses touch with it and continues execution without having access to the token. When I inspected the Teams desktop app developer tools section, I found the message "Popup Window is null. This can happen if you are using IE".
Then I tried an alternative approach using instructions from this page: https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad , and this got me stuck at the "url" field.
I don't know what URL I should use, and I realized I don't know how to add a distinct "page" of my app, so that the user ***navigates* to it.**
Can somebody help me out with some hints, what/where to read about solving this issue ?
Thank you.