如何使用 PKCE 流程从 Spotify 的 Web API 获取访问令牌？

Question

我有一个前端单页 React 应用程序，所以我使用 PKCE 流程进行 Spotify 的授权。

我有一个名为 Spotify 的对象，在其中，我有两种方法：

login()

,

getAccessToken()

当我调用

login()

方法时，我被重定向到我登录的 Spotify 登录页面，然后被重定向回我的应用程序。但是，当我调用

getAccessToken()

方法时，我的控制台出现 400 错误。

我真的不确定我在这里做错了什么，并遵循了 Spotify 的 PKCE 流程指南。我已经为此工作了好几天，但仍然无法弄清楚。任何帮助将不胜感激！

这是我的 Spotify 对象，其中包括

login()

和

getAccessToken()

方法：

const Spotify = {
    login() {
        let codeVerifier = generateRandomString(128);

        generateCodeChallenge(codeVerifier).then(codeChallenge => {
          let state = generateRandomString(16);
          let scope = 'user-read-private user-read-email';

          localStorage.setItem('code-verifier', codeVerifier);

          let args = new URLSearchParams({
            response_type: 'code',
            client_id: clientId,
            scope: scope,
            redirect_uri: redirectUri,
            state: state,
            code_challenge_method: 'S256',
            code_challenge: codeChallenge
          });

          window.location = 'https://accounts.spotify.com/authorize?' + args;
        });
    },
    
    getAccessToken() {
      const urlParams = new URLSearchParams(window.location.search);
      let code = urlParams.get('code');

      let codeVerifier = localStorage.getItem('code_verifier');

      let body = new URLSearchParams({
        grant_type: 'authorization_code',
        code: code,
        redirect_uri: redirectUri,
        client_id: clientId,
        code_verifier: codeVerifier
      });

      fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
          },
        body: body
        })
        .then(response => {
          if (!response.ok) {
            throw new Error('HTTP status ' + response.status);
          }
          return response.json();
        })
        .then(data => {
          localStorage.setItem('access-token', data.access_token);
        })
        .catch(error => {
          console.error('Error:', error);
        });  
    }

在这些方法中，它们会调用我也写出的

generateRandomString(length)

和

generateCodeChallenge(codeVerifier)

函数（上面未显示）。我直接从上面链接的 Spotify 的 PKCE 指南中复制了它们。

clientId 和 redirectUri 特定于我的应用程序。