如何以角度使用 Azure devops REST API

Question

我创建了一个 Angular 应用程序，我必须在其中使用 Azure DevOps REST API 来检索票证详细信息。我正在使用 @azure/msal-angular", "@azure/msal-browser" 包针对客户端 Azure-AD 对用户进行身份验证。

我正在使用 this document，它表示 URL 的语法应该类似于 GET https://dev.azure.com/{organization}/{project}/_apis/wit/workitems/{id}，这对我不起作用

但是当我将GET https://[ClientURL.com]/[resource/location]/_apis/wit/workitems?ids=123 粘贴到浏览器地址栏中时，我会收到 JSON 响应。

我正在使用令牌来使用 REST 服务，方法是调用我的客户端 url 类似这样
GET https://[ClientURL.com]/[resource/location]/_apis/wit/workitems?ids=123

我正在使用MsalInterceptor 拦截请求，这将添加身份验证标头。

我收到一条错误消息 Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.

我找不到任何足够好的 Angular 文档，并且无法理解我是否必须再次对 REST API 进行身份验证或 AD 身份验证应该没问题。

更新

该应用程序已使用 C# 构建。我的客户希望使用 Angular 开发它。 这是我的登录配置

export function MSALInstanceFactory(): IPublicClientApplication {
        return new PublicClientApplication({
            auth: {
                clientId: '' // my registered angular app clientId,
                authority: 'https://login.microsoftonline.com/my_tenentid',
                redirectUri: 'https://localhost:8080',
                
            },
            cache: {
              cacheLocation: 'localStorage'
            }
        })
        }
  

我正在使用 MSAL 对我的应用进行身份验证

loginMsal() {
  this.msalService.loginPopup().subscribe(
    (response: AuthenticationResult) => {
      this.loginSuccessfull(response)

    })
 }

需要帮助！

Answer 1

您需要检查 Azure 门户中的 application you registered 是否已被授予 Azure DevOps 权限。请参阅以下步骤以授予 Azure DevOps 权限。

导航到注册的应用程序门户-->管理下的API权限-->添加权限-->选择Azure DevOps- ->选择委派权限-->勾选user_impersonation。

您可以添加您在身份验证标头中获得的访问令牌，如下面的示例，来自here。

var vstsApi = "https://dev.azure.com/{organization}/{project}/_apis/wit/workitems/{id}?api-version=6.1-preview.3"
var xhr = new XMLHttpRequest();
                
xhr.open('GET', vstsApi, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);

请参阅Javascript Web App Sample 了解更多信息。

更新：

const tokenRequest = {
      scopes: [ "api://499b84ac-1321-427f-aa17-267ca6975798/.default" ]
 };

this.authService.instance.acquireTokenSilent(tokenRequest).then(tokenResponse => {
              
              var vstsApi = "https://dev.azure.com/myorg/myproje/_apis/wit/workitems/5?api-version=6.1-preview.3"
              var xhr = new XMLHttpRequest();
                
              xhr.open('GET', vstsApi, true);
              var res = xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.accessToken);
 })