2

我正在创建一个需要使用 Azure REST API 与一些天蓝色服务集成的节点 Web 应用。我正在使用节点 MSAL 库进行用户登录并检索访问令牌以向 Azure REST api 发出请求。我能够成功登录用户并检索访问令牌。但是,当我尝试向 Azure 的 REST api 发出请求时,我收到一个 401 错误,上面写着error="invalid_token", error_description="The access token is from wrong audience or resource."

Web 应用程序本身是使用Node LTS和构建的React v16.8.6。它已部署在 Azure 中并在活动目录中注册。我MSAL v1.0.1用于登录用户并在用户登陆登录页面时检索令牌。

登录.js

import React, { Component } from 'react';
import * as Msal from 'msal';

let msalConfig = {
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: `https://login.microsoftonline.com/process.env.REACT_APP_TENANT_ID'`,
    navigateToLoginRequestUrl: false,
    redirect_uri: 'http://localhost:3000/newEntry',
    resource: 'https://management.azure.com/'
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

var msalInstance = new Msal.UserAgentApplication(msalConfig);

var tokenRequest = {
  scopes: ['https://management.azure.com/']
}

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      response: null,
    };
  }

  componentWillMount() {
    // prevent login loop by checking for logged in user and then acquire a token if logged in
    if (!msalInstance.getAccount() && !msalInstance.isCallback(window.location.hash)) {
      this.login();
    } else {
      msalInstance.acquireTokenSilent(tokenRequest)
        .then(res => localStorage.setItem('access_token', res.accessToken))
        .catch(err => console.error(err))
    }
  }

  login = () => {  
    msalInstance.handleRedirectCallback((error, response) => {
      if (error) console.error(error);
      console.log(response);
    })
    msalInstance.loginRedirect(tokenRequest);
  }

  render() {
    return (
      <div>
        <h2>Login</h2>
      </div>
    )
  }
}

export default Login;

我已成功返回访问令牌并将其放入本地存储。

在一个单独的页面上,我正在从本地存储中检索 MSAL 访问令牌,并使用它来发出请求以检索与我的 Azure 订阅关联的所有资源。

  componentWillMount() {
    let token = localStorage.getItem('access_token');
    let url = 'https://management.azure.com/subscriptions/process.env.REACT_APP_SUBSCRIPTION_ID/resource?api-version=2018-02-14'

    fetch(url, {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    .then(response => console.log(response))
    .catch(err => console.error(err));
  }

我怀疑我收到了错误,因为登录请求发送的资源值与令牌请求发送的范围值之间存在一些差异。

我尝试将资源值更改为'resource': 'https://management.core.windows.net/'每个Azure:访问令牌已从错误的受众或资源获得,但这并没有改变任何东西。

我还尝试了各种范围,包括https://management.azure.com/user_impersonationhttps://management.azure.com//user_impersonation遵循此示例访问令牌不包括使用 MSAL 访问 API

4

3 回答 3

0

get 方法是默认的,问题可能出在'Authorization': `Bearer ${token}`. 有时人们使用不同的规则,例如'Authorization': token'Token': `Bearer ${token}`。我看到一些 API 使用'S-token': token. 试试看。我认为这是因为令牌确实到达了那里。

于 2019-06-26T00:55:52.190 回答
0

您正在使用 msal,因此 msalConfig 中resource不需要参数。你可以删除它。

将范围更改为scopes: ['https://management.azure.com/.default'].

于 2019-06-27T01:29:46.137 回答
0

所以我最终切换到 ADAL 库,看看我是否会得到同样的错误,我做到了。然而,我确实意识到资源请求 URL 不正确。这api-version不是一个被接受的版本。一旦我将其切换到2018-02-01请求返回 200。

于 2019-06-27T17:13:46.467 回答