Spotify API PKCE无效的客户机密

时间:2020-07-05 12:03:57

标签: javascript post axios spotify

我正在尝试使用Authorization Code Flow with Proof Key for Code Exchange (PKCE)对我的应用程序进行身份验证以使用Spotify Web API。

我成功创建了授权URI,登录后,用户被重定向到我的应用程序。我现在停留在步骤4,在这里我需要交换授权令牌的代码。 每当我发布请求时,我都会返回HTTP 400错误响应 {"error":"invalid_request","error_description":"Invalid client secret"}

问题在于我什至不需要发送客户密码,这就是为什么我选择使用PKCE的授权代码流。

我尝试了很多方法来发布请求,但是我总是得到相同的错误响应。

我正在使用axios javascript库发送请求。这是我的重定向功能:

import sjcl from 'sjcl'

redirect: function() {
  let code_verifier = '12345678901234567890123456789012345678901234567890'
  const myBitArray = sjcl.hash.sha256.hash(code_verifier)
  const sha256_code_verifier = sjcl.codec.hex.fromBits(myBitArray)
  const code_challenge = btoa(sha256_code_verifier)
  const uri = 'https://accounts.spotify.com/authorize?'
  let client_id = 'client_id=3d1880518aa6a54bc9669d6ba7edcf1&'
  let response_type = 'response_type=code&'
  let redirect_uri = 'redirect_uri=http://localhost:8080&'
  let code_challenge_method = 'code_challenge_method=S256&'
  let scope = 'scope=user-modify-playback-state&'
  let state = 'state=application-state'
  window.location.href = uri + client_id + response_type + redirect_uri + code_challenge_method + scope + code_challenge
}

这是我用来获取授权令牌的HTTP POST函数:

import axios from 'axios'

get_access_token: function() {
  let code_verifier = '12345678901234567890123456789012345678901234567890'
  const myBitArray = sjcl.hash.sha256.hash(code_verifier)
  const sha256_code_verifier = sjcl.codec.hex.fromBits(myBitArray)
  const code_challenge = btoa(sha256_code_verifier)
  let client_id = 'client_id=3d1880518aa6a54bc9669d6ba7edcf1&'
  let code = window.location.href.split('?')[1]
  let redirect_uri = 'redirect_uri=http://localhost:8080&'
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
  let data = 'grant_type=authorization_code&' + client_id + code + '&' + redirect_uri + 'code_verifier=' + code_verifier
  axios({
      method: 'post',
      url: 'https://accounts.spotify.com/api/token',
      headers: headers,
      data: data
    })
    .then(response => (this.search = response))
    .catch(error => (console.log(error)))
}

任何帮助将不胜感激。

0 个答案:

没有答案