查询 Spotify 的 Web API 客户端凭证流

Posted

技术标签:

【中文标题】查询 Spotify 的 Web API 客户端凭证流【英文标题】:Query for Spotify's Web API Client Credentials Flow 【发布时间】:2021-01-10 01:30:04 【问题描述】:

我正在尝试根据https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow Client Credentials Flow 上的文档发出 http 请求。

我写过

const BASE_URL = 'https://accounts.spotify.com/api/token';
fetch(BASE_URL, 
            method: 'POST',
            headers: 
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + base64(clientID) + ':' + base64(clientSecret)
            ,
            body: JSON.stringify('grant_type:client_credentials')
        )

这是否符合它所说的?我很困惑如何编写发布请求的正文。

【问题讨论】:

【参考方案1】:

从您共享的链接中,客户端凭据流是向 Spotify API 服务器发出请求的客户端(服务器端)。因此,它是一个服务器到服务器的身份验证流程(不是授权)。您正在使用客户端的 fecth API,这意味着您的实现应该是服务器端的。如果您使用的是 node.js 运行时服务器端框架,只需查找 http.request API 以在服务器端发出请求。

例如,这将是一个纯 node.js 实现:

 const options = 
   hostname: 'https://accounts.spotify.com/api/token',
   method: 'POST',
   headers: 
     'Content-Type': 'application/x-www-form-urlencoded',
     'Authorization': 'Basic ' + base64(clientID) + ':' + base64(clientSecret)
   
 ;

 const req = http.request(options, (res) => 
   res.setEncoding('utf8');
   // process the data bit by bit or in chunks...
   res.on('data', (chunk) => );
   // ...and do something with it when there is no more data in response
   res.on('end', () => 
    console.log('No more data in response.');
   );
 );
 
 // handle the error explicitly
 req.on('error', (e) => 
   console.error(`problem with request: $e.message`);
 );

 req.end();

【讨论】:

我正在学习 React 教程。 好的,但是您仍然需要从您的服务器调用 spotify API,因为它们只接受针对该特定流程的服务器到服务器调用。 这是不正确的,您可以使用来自客户端或服务器端的客户端凭据。 @valtism 不正确。对于在浏览器端使用 javascript 进行身份验证,它将因 CORS 异常而失败。所以你真的需要使用服务器端代码,至少,做授权流程。 @EgbertNierop 这是正确的,因为我已经完成了它并且它有效。【参考方案2】:

我最终做了哪些工作:

async authorize()
        let myHeaders = new Headers();
        myHeaders.append("Authorization", `Basic $my_clientID:clientSecret`);
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

        var urlencoded = new URLSearchParams();
        urlencoded.append("grant_type", "client_credentials");

        const requestOptions = 
        method: 'POST',
        headers: myHeaders,
        body: urlencoded,
        redirect: 'follow'
        
        
        let res = await fetch("https://accounts.spotify.com/api/token", requestOptions);
        res = await res.json();
        return res.access_token; 
    

async search()
        const access_token = await this.authorize();
        this.setState(access_token);
        const BASE_URL = 'https://api.spotify.com/v1/search';
        let FETCH_URL = `$BASE_URL?q=$this.state.query&type=artist&limit=1`; 
        const ALBUM_URL = 'https://api.spotify.com/v1/artists';

        let myHeaders = new Headers();
        myHeaders.append("Authorization", `Bearer $access_token`);
        
        const requestOptions = 
            method: 'GET',
            headers: myHeaders
        

        let res = await fetch(FETCH_URL, requestOptions);
        res = await res.json();
        console.log("ARTIST", res);

【讨论】:

【参考方案3】:

对我来说,我不确定其他人是否也是这种情况,但 spotify api 拒绝 base64(clientID) + ":" + base64(clientKey),但接受 base64(clientID + ":" + clientKey)

【讨论】:

以上是关于查询 Spotify 的 Web API 客户端凭证流的主要内容,如果未能解决你的问题,请参考以下文章

spotify web api授权码授予thelinmichael / spotify-web-api-java android

Spotify Web API - 客户端凭据 - 访问用户播放列表

如何使用客户端ID和密码访问spotify的web api?

Spotify Web API 客户端范围不起作用

Spotify Web API 不适用于特定用户?

Spotify API 组艺术家/专辑