angular - 来自 Angular 应用程序中 Strapi Microsoft 提供商回调请求的“无效受众”

问题描述

我正在尝试在 Angular 应用程序中使用 Microsoft 配置身份验证。我能够成功地在应用程序中进行身份验证。当我将收到的令牌发送给我时，我收到http://localhost:1337/auth/microsoft/callback?access_token=${token}回复说“访问令牌验证失败。无效的观众。我检查了我在 jwt.io 中发送的令牌，并且受众与在 Strapi 管理配置中为 Microsoft 提供程序配置的客户端 ID 匹配。我错过了一步吗？

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

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 应用注册：

Strapi 配置：

编辑：

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

访问令牌：

权限：

标签： angularazureazure-active-directorystrapi

在您的代码中，我发现您获得了 id 令牌并使用它来访问您的 api，正如您所提到的，它会引发“访问令牌失败。无效的观众。错误。您应该使用访问令牌来访问您的 api。

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

代码通常是这样的：

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',token); window.localStorage.getItem('access_token');

希望它可以帮助你。

angular - 来自 Angular 应用程序中 Strapi Microsoft 提供商回调请求的“无效受众”

问题描述

解决方案

推荐阅读