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

Question

我正在尝试根据 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'})
        })

这是否言出必行？我对如何编写 post 请求的正文感到困惑。

Answer 1

从您分享的 link 来看，客户端凭证流是一个向 spotify API 服务器发出请求的客户端 (server-side)。因此，这是一个 server-to-server 身份验证流程（不是授权）。您正在使用 fecth API，它是 client-side，这意味着您的实现应该是 server-side。如果您使用的是 node.js 运行时 server-side 框架，只需查找 http.request API 以发出请求 server-side。

例如，这将是一个纯粹的 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();

Answer 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);
}

Answer 3

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

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

Query for Spotify's Web API Client Credentials Flow

javascript

authorization

spotify