如何将我的 Angular 服务连接到 Vimeo？ （“未提供用户凭据。”）

Question

我正在尝试创建一项服务以连接到我的 Vimeo 帐户，但我收到了此响应。

我已经检查了两次客户端 ID 和令牌。

HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Authorization Required", url: "https://api.vimeo.com/oauth/authorize/client", ok: false, ...}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CourseViewService {

  constructor(private http: HttpClient) {}

  private configUrl = 'https://api.vimeo.com/oauth/authorize/client';
  private httpOptions = {
    headers: new HttpHeaders({
      'Authorization': btoa('****MYCLIENTID*****:******MYCLIENTSECRET****'),
      'Content-Type': 'application/json',
      'Accept': 'application/vnd.vimeo.*+json;version=3.4',
    }),
  };
  private params = new HttpParams()
    .set('grant_type', 'client_credentials')
    .set('scope', 'scope_list');

  getAnyResponse() {
   this.http.post(this.configUrl, this.params, this.httpOptions)
      .subscribe( response => {
        console.log(response);
    });
  }
}


HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Authorization Required", url: "https://api.vimeo.com/oauth/authorize/client", ok: false, …}

Answer 1

来自this documentation（强调我的）：

在请求正文中，将grant_type 字段设置为client_credentials；这是必需的。您还可以选择将范围字段设置为以空格分隔的范围列表。该字段的默认值为public。

相同的示例正文：

{
  "grant_type": "client_credentials",
  "scope": "{scope_list}"
}

看起来您正在发送一个 HttpParam 对象作为请求的主体，这与他们期望的主体不匹配。

private params = new HttpParams()
  .set('grant_type', 'client_credentials')
  .set('scope', 'scope_list');
private body = {
  "grant_type": "client_credentials",
  "scope": "scope_list",
};

getAnyResponse() {
  // Take a look at all the extra junk in the param object vs a simple object
  console.log(JSON.stringify(this.params));
  console.log(JSON.stringify(this.body));

  this.http.post(this.configUrl, this.body, this.httpOptions)
    .subscribe( response => {
      console.log(response);
  });
}