使用Spotify API授权时遭遇403 Forbidden错误求助

问题描述 #

我正在开发一个React.js Web应用，尝试集成Spotify API，但运行应用时持续出现403（Forbidden）错误。已经尝试了多种端点创建、调用的方法，始终无法解决，不清楚遗漏了什么。

当前代码 #

router.get('/login', function(req, res) {

  var state = generateRandomString(16);
  res.cookie(stateKey, state);
  var scope = 'user-read-private user-read-email';

  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    }));
});

router.get('/callback', function(req, res){
  var code = req.query.code || null;
  var state = req.query.state || null;
  var storedState = req.cookies ? req.cookies[stateKey] : null;

  if (state === null || state !== storedState) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch'
      }));
  } else {
    res.clearCookie(stateKey);
    var authOptions = {
      url: 'https://accounts.spotify.com/api/token',
      form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code'
      },
      headers: {
        'content-type': 'application/x-www-form-urlencoded',
        Authorization: 'Basic ' + (new Buffer.from(client_id + ':' + client_secret).toString('base64'))
      },
      json: true
    };

    request.post(authOptions, function(error, response, body) {
      if (!error && response.statusCode === 200) {

        var access_token = body.access_token,
            refresh_token = body.refresh_token;

        var options = {
          url: 'https://api.spotify.com/v1/me',
          headers: { 'Authorization': 'Bearer ' + access_token },
          json: true
        };

        // use the access token to access the Spotify Web API
        request.get(options, function(error, response, body) {
          console.log(body);
        });

        // we can also pass the token to the browser to make requests from there
        res.redirect('/#' +
          querystring.stringify({
            access_token: access_token,
            refresh_token: refresh_token
          }));
      } else {
        res.redirect('/#' +
          querystring.stringify({
            error: 'invalid_token'
          }));
      }
    });
  }
});

排查与解决方向 #

• 检查Spotify开发者控制台配置

  • 确认redirect_uri完全匹配：Spotify要求回调地址必须和开发者后台填写的内容完全一致，包括协议（http/https）、域名、端口和路径，哪怕多一个斜杠都会触发403。
  • 验证client_id和client_secret：确保这两个值是从Spotify开发者应用中正确复制的，无多余空格或字符。

• 核对请求头格式

  • 获取token的请求中，Authorization头的Base64编码要保证client_id:client_secret中间的冒号没有遗漏，可手动验证编码结果是否正确。
  • 确认content-type严格为application/x-www-form-urlencoded，不要使用其他格式。

• 权限范围（Scope）验证

  • 当前使用的user-read-private user-read-email权限足以调用/v1/me接口，但需确认用户授权时是否同意了这些权限，若用户拒绝则会导致后续请求403。

• 检查请求方式与参数

  • 获取token必须使用POST方法，且参数需放在form中，不能放在URL查询参数里。
  • 确认generateRandomString函数生成的state值有效，cookie的存储和读取流程正常，state不匹配会中断授权流程，间接引发权限错误。

• HTTPS环境要求

  • 除本地开发（localhost）外，Spotify要求所有回调地址使用HTTPS。若部署环境未使用HTTPS，会导致授权失败或403错误。

内容的提问来源于stack exchange，提问作者Haley Kahn