我刚刚更新到此软件包：
` "@angular/animations": "^17.3.3",
"@angular/common": "^17.3.3",
"@angular/compiler": "^17.3.3",
"@angular/core": "^17.3.3",
"@angular/forms": "^17.3.3",
"@angular/platform-browser": "^17.3.3",
"@angular/platform-browser-dynamic": "^17.3.3",
"@angular/router": "^17.3.3",
"@angular/service-worker": "^17.3.3",
"@azure/msal-angular": "^3.0.15",
"@azure/msal-browser": "^3.11.1",
"@microsoft/mgt": "^4.2.1",
"@microsoft/mgt-element": "^4.2.1",
"@microsoft/mgt-teamsfx-provider": "^4.2.1",
"@microsoft/teams-js": "^2.21.0",
"@microsoft/teamsfx": "^2.3.1",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"moment": "^2.30.1",
"ngx-device-detector": "^7.0.0",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^17.12.0",
"quill": "^1.3.7",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"zone.js": "~0.14.4"`
此处发布的示例 https://www.npmjs.com/package/@microsoft/mgt-teamsfx-provider 也不适合我。
我正在 Teams 中运行 Angular 17 应用程序。在 Teams 之外，我没有遇到任何问题。 mgt 组件加载良好。在 Teams 内部，它不再起作用。
错误信息是：
由于错误而无法获取访问令牌：ErrorWithCode.UiRequiredError：无法静默获取访问令牌缓存，请先登录：您需要先登录才能获取访问令牌。
我的“auth-start.html”和“auth-end.html”也是示例的严格副本。
Auth-Start.html
<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
<!--If you're not familiar with this, do not alter or remove this file from your project.-->
<html>
<head>
<title>Login Start Page</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://res.cdn.office.net/teams-js/2.21.0/js/MicrosoftTeams.min.js"
crossorigin="anonymous">
</script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@azure/[email protected]/lib/msal-browser.min.js"
crossorigin="anonymous">
</script>
<script type="text/javascript">
microsoftTeams.app.initialize().then(() => {
console.log("auth-start.html, microsoftTeams.app.initialize()");
microsoftTeams.app.getContext().then(async (context) => {
console.log("auth-start.html, microsoftTeams.app.getContext()");
// Generate random state string and store it, so we can verify it in the callback
var currentURL = new URL(window.location);
console.log("auth-start.html, currentURL %s", currentURL);
var clientId = currentURL.searchParams.get("clientId");
console.log("auth-start.html, clientId %s", clientId);
var scope = currentURL.searchParams.get("scope");
console.log("auth-start.html, scope %s", scope);
var loginHint = currentURL.searchParams.get("loginHint");
console.log("auth-start.html, loginHint %s", loginHint);
const msalConfig = {
auth: {
clientId: clientId,
authority: `https://login.microsoftonline.com/${context.user.tenant.id}`,
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: "sessionStorage",
}
}
const msalInstance = new msal.PublicClientApplication(msalConfig);
await msalInstance.initialize(); // new with 3.X
console.log("auth-start.html, msalInstance initialized %O", msalInstance);
//const msalInstance = await msal.PublicClientApplication.createPublicClientApplication(msalConfig);
const scopesArray = scope.split(" ");
const scopesRequest = {
scopes: scopesArray,
redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
loginHint: loginHint
};
console.log("auth-start.html, scopesRequest %O", scopesRequest);
await msalInstance.loginRedirect(scopesRequest);
});
});
</script>
</body>
</html>
Auth-End.html
<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
<!--If you're not familiar with this, do not alter or remove this file from your project.-->
<html>
<head>
<title>Login End Page</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://res.cdn.office.net/teams-js/2.21.0/js/MicrosoftTeams.min.js"
crossorigin="anonymous">
</script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@azure/[email protected]/lib/msal-browser.min.js"
crossorigin="anonymous">
</script>
<script type="text/javascript">
var currentURL = new URL(window.location);
console.log("auth-end.html, currentURL %s", currentURL);
var clientId = currentURL.searchParams.get("clientId");
console.log("auth-end.html, clientId %s", clientId);
microsoftTeams.app.initialize().then(() => {
console.log("auth-end.html, microsoftTeams.app.initialize()");
microsoftTeams.app.getContext().then(async (context) => {
console.log("auth-end.html, microsoftTeams.app.getContext()");
const msalConfig = {
auth: {
clientId: clientId,
authority: `https://login.microsoftonline.com/${context.tid}`,
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: "sessionStorage",
}
}
//https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
//https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/v2-migration.md
//https://github.com/OfficeDev/TeamsFx/wiki/
//const msalInstance = new window.msal.PublicClientApplication(msalConfig);
const msalInstance = new msal.PublicClientApplication(msalConfig);
await msalInstance.initialize(); // new with 3.X
console.log("auth-end.html, msalInstance initialized %O", msalInstance);
msalInstance.handleRedirectPromise().then((tokenResponse) => {
if (tokenResponse !== null) {
console.log("auth-end.html, tokenResponse %O", tokenResponse);
//alert(tokenResponse.accessToken);
microsoftTeams.authentication.notifySuccess(JSON.stringify({
sessionStorage: sessionStorage
}));
//microsoftTeams.authentication.notifySuccess();
//sessionStorage.setItem(StorageKeys.accessToken, tokenResponse.accessToken);
} else {
microsoftTeams.authentication.notifyFailure("Get empty response.");
}
}).catch((error) => {
microsoftTeams.authentication.notifyFailure(JSON.stringify(error));
});
});
});
</script>
</body>
</html>
我尝试查找最新版本的 MSAL (msal-browser)、mgt-teamsfx-provider、mgt 和 mgt-element 包的文档。已经几个小时了，没有任何成功。非常感谢任何帮助
我对 @microsoft/teamsfx 版本 2.3.1 也有同样的错误 使用2.3.0版本，我可以连接!!!!