Microsoft Teams Adpative card on clicking button how to open browser window as popup

druuby - 

To open a browser window as a popup when clicking the sign-in button under the Adaptive Card, you can use the TeamsJS library's authentication.authenticate() function. This function is designed to open a popup window and start the authentication flow.

Here is a sample code snippet using TeamsJS v2: 

import { authentication } from "@microsoft/teams-js";
authentication.authenticate({
url: window.location.origin + "/tab/simple-start-v2",
width: 600,
height: 535})
.then((result) => {
console.log("Login succeeded: " + result);
let data = localStorage.getItem(result);
localStorage.removeItem(result);
let tokenResult = JSON.parse(data);
showIdTokenAndClaims(tokenResult.idToken);
getUserProfile(tokenResult.accessToken);
})
.catch((reason) => {
console.log("Login failed: " + reason);
handleAuthError(reason);
});

And here is a sample code snippet using TeamsJS v1:

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

In both examples, the url parameter is the start page of the authentication flow. The width and height parameters define the size of the popup window. The successCallback function is called when the authentication process is successful, and the failureCallback function is called when the authentication process fails.

Please note that the authentication flow must start on a page that's on your domain. This domain should also be listed in the validDomains section of the manifest. Failure to do so will result in an empty pop-up.

For more information, you can refer to the Teams platform documentation on Authentication in Teams.