3

PKCE 経由でバックエンド アプリケーションを使用しなくても、Spotify Web API を使用できるようになったと聞いて興奮しました。残念ながら、私はある種の誤解をしているようで、それを機能させることができませんでした。

途中で小さな間違いを犯している可能性がありますが、一度やったことが無駄で、スレートをきれいに拭いて再試行しましたが、まだ運がありません. このことから、ドキュメンテーションを誤解しているに違いないと思います。

私が何をしているのかを説明し、ここで誰かが私が見逃していることや間違っていることを指摘してくれることを願っています. 基本的な概念の誤解があると思います。

最初に、crypto-random-string という npm パッケージを使用して、暗号的にランダムな文字列を生成します。それをブラウザーのローカル ストレージに保存してから、js-sha256 を使用してハッシュし、base64url という別の npm パッケージを使用してエンコードします。

    let verifier = cryptoRandomString({length: 50})
    window.localStorage.setItem('verifier', verifier)

    let params = {
      client_id: '[MY CLIENT ID]',
      response_type: 'code',
      redirect_uri: 'http://localhost:3000/callback',
      code_challenge_method: 'S256',
      code_challenge: base64url(sha256(verifier))
    }

    let endpoint = new URL('https://accounts.spotify.com/authorize');
    endpoint.search = new URLSearchParams(params);

    window.location = endpoint.toString();

ここから、適切な URL パラメーターを使用して /authorize エンドポイントにリダイレクトします。私はここまで成功し、それに応じて、提供された redirect_uri にリダイレクトされました。そこで、url パラメーターから指定されたコードを取得します。

この時点で、client_id、grant_type、url パラメーターから取得したコード、redirect_uri、およびローカルに保存された code_verifier を使用して、/api/token エンドポイントへのフェッチを試みます。

    let params = new URLSearchParams(window.location.search);
    console.log(params.get('code'));

    let newParams = {
      client_id: '[MY CLIENT ID]',
      grant_type: 'authorization_code',
      code: params.get('code'),
      redirect_uri: 'http://localhost:3000/callback',
      code_verifier: window.localStorage.getItem('verifier')
    }

    let endpoint = new URL('https://accounts.spotify.com/api/token');

    endpoint.search = new URLSearchParams(newParams);

    fetch(endpoint.toString(), {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(data => data.json()).then(console.log)

この時点で、両方の試行の後、エラーを受け取りました：

{ error: "invalid_grant", error_description: "code_verifier was incorrect" }

私が明らかに間違っていることはありますか？このエラーは、code_verifier の実際の生成に関する限り、私が何か間違ったことをしていると信じさせますが、その問題が何であるかについて途方に暮れています。

4

2 に答える 2