Angular应用中来自Strapi Microsoft提供程序回调请求的``无效受众''

问题描述

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

I am trying to configure authentication using Microsoft in an Angular app. I am able to authenticate in the app successfully. When I send the token I receive to http://localhost:1337/auth/microsoft/callback?access_token=${token} I get a response back saying 'Access token validation failure. Invalid audience.' I checked the token I am sending in jwt.io and the audience matches the client id configured in the Strapi admin config for the Microsoft provider. Am I missing a step?

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

My request looks like this and is fired after auth is complete and the token is set.

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

Azure App Registration:

Strapi配置:

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

Did not realize the access token was separate from the idToken. After digging through the network tab, I found the actual one and posted below. Calling this api to Strapi gets back a valid token. So it appears to be working. But I don't know how to retrieve this token programatically in the front end as it is being called as a Redirect URI. Is there a common strategy for capturing it from the url before it disappears to save in storage?

访问令牌:

权限:

推荐答案

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

In your code, I find that you get the id token and use it to access your api, as you mentioned,it will raise 'Access token fail. Invalid audience.' error.You should use an access token to access your api.

对于您的问题，是否要以编程方式获取访问令牌?如果是，则可以参考此.

For your question, Do you want to programmatically get access token?If so,you can refer to 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);
            });
    }

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

And if you just want to store access token:

要在本地存储中保存字符串，请使用

To save a string in Local Storage you use

window.localStorage.setItem(key, value);

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

You can get the value later with:

window.localStorage.getItem(key);

window.localStorage.setItem('access_token'，token);window.localStorage.getItem('access_token');

window.localStorage.setItem('access_token',token);window.localStorage.getItem('access_token');

希望它对您有帮助.

这篇关于Angular应用中来自Strapi Microsoft提供程序回调请求的``无效受众''的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！