'Invalid audience' 来自 Angular 应用中的 Strapi Microsoft 提供商回调请求

Question

我正在尝试在 Angular 应用程序中使用 Microsoft 配置身份验证。我能够在应用程序中成功进行身份验证。当我将收到的令牌发送到 http://localhost:1337/auth/microsoft/callback?access_token=${token} 时，我收到回复说 'Access token validation failure. Invalid audience.' 我检查了我在 jwt.io 中发送的令牌并且观众与 Str[= 中配置的客户端 ID 相匹配54=] Microsoft 提供商的管理员配置。我错过了一步吗？

我的请求看起来像这样，并在身份验证完成并设置令牌后被触发。

let token = window.localStorage.getItem('msal.idtoken') this.http.get(http://localhost:1337/auth/microsoft/callback?access_token=${token}`) .subscribe((res) => { console.log(res); });

编辑：

令牌已解码：

Azure 应用注册：

结构api 配置：

编辑：

没有意识到访问令牌与 idToken 是分开的。在浏览网络选项卡后，我找到了实际的并在下面发布。将此 api 调用到 Strapi 会返回一个有效令牌。所以它似乎在工作。但我不知道如何在前端以编程方式检索此令牌，因为它被称为重定向 URI。是否有一种通用的策略可以在它消失之前从 url 中捕获它以保存在存储中？

访问令牌：

权限：

Answer 1

在你的代码中，我发现你得到了 id 令牌并用它来访问你的 api，正如你提到的，它会引发 'Access token fail. Invalid audience.' error.You should use an access访问您的 api.

的令牌

关于你的问题，你想以编程方式获取访问令牌吗？如果是，你可以参考this。

代码通常是这样的：

getToken() {
        const accessTokenRequest = {
             scopes: [
                 "your api url",
             ],
            clientId: "xxxxxxxxxxxxxxxx",
            authority: "https://login.microsoftonline.com/(tenant)ID or tenant name",
            redirectUri: "http://localhost:4200",
        };
        this.authService
            .acquireTokenSilent(accessTokenRequest)
            .then((res) => {
                console.log("acquireTokenPopup");
                this.token = res.accessToken;
                this.getUser();
            })
            .catch((e) => {
                console.log("acquireTokenPopup catch");
                console.log(e);
            });
    }

如果您只想存储访问令牌：

要在您使用的本地存储中保存字符串

window.localStorage.setItem(key, value);

您稍后可以通过以下方式获取该值：

window.localStorage.getItem(key);

window.localStorage.setItem('access_token',令牌); window.localStorage.getItem('access_token');

希望对你有帮助。

'Invalid audience' 来自 Angular 应用中的 Strapi Microsoft 提供商回调请求

'Invalid audience' from Strapi Microsoft provider callback request in Angular app

azure

azure-active-directory

strapi

angular