Angular对接Vimeo API报错No user credentials were provided求解决

核心问题原因 #

• 认证头格式不符合Vimeo OAuth2接口规范：
  • 认证方案标识basic必须为大写Basic，OAuth2规范中该字段大小写敏感，小写会被服务端判定为无效认证头
  • 你当前直接把base64_encode(*CLIENTID:SECRET*)写在了头字符串里，没有实际完成Base64编码操作，需要先将客户端ID:客户端密钥的拼接字符串做Base64编码，再将编码结果拼接在Basic 后
• 请求体格式不匹配：Vimeo的/oauth/authorize/client接口要求请求体为application/x-www-form-urlencoded格式，你当前配置的Content-Type: application/json会导致服务端无法正常解析grant_type和scope参数

修正后的代码示例 #

conectarseAVimeo() {
    // 先完成clientId和secret的Base64编码
    const clientId = '你的实际Client ID';
    const clientSecret = '你的实际Secret';
    const base64Auth = btoa(`${clientId}:${clientSecret}`);

    const configUrl = {
      headers: new HttpHeaders({ 
        'Authorization': `Basic ${base64Auth}`,
        // 改成表单格式的Content-Type
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/vnd.vimeo.*+json;version=3.4'
      })
    }
    
    // 表单格式的请求体
    const body = new URLSearchParams();
    body.set('grant_type', 'client_credentials');
    body.set('scope', 'public');
    const url = 'https://api.vimeo.com/oauth/authorize/client'

    this.http.post<any>(url, body.toString(), configUrl)
    .subscribe(data => {
        console.log(data)
    })
  }
  
  constructor(private http: HttpClient) { }

Postman验证方式 #

如果要在Postman里验证，可以直接走Authorization标签页选择「Basic Auth」，直接在对应输入框填Client ID（Username字段）和Secret（Password字段），Postman会自动完成编码和头拼接，Body选择x-www-form-urlencoded格式，填入grant_type和scope两个参数即可，不需要手动写Authorization头避免出错。

内容的提问来源于stack exchange，提问作者Fran