Question

我正在尝试授权我的应用使用Spotify API。我正在按照其文档上的说明进行操作。问题是在致电spotify.com/authorize之后，再也没有找到redirect_uri了。我已经在Spotify开发人员控制台中将重定向uris设为http://localhost:8888/callback和localhost：8888 / callback。

在我的angular 7应用中，我在控制台中收到此错误：

错误：{错误：语法错误：意外的令牌<在JSON中，位于XMLHtt的JSON.parse（）位置1处……

“ https://accounts.spotify.com/login?continue=https%3A%2F%2Faccounts.spotify.com%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dxxxxxxxxxxxxx%26scope%3Duser-read-private%2520user-read-email%2520user-read-birthdate%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8888%252Fcallback%26state%3D1LiPjlidMAXQUxdl解析期间Http失败”

这是我的app.js代码

var express = require('express'); // Express web server framework
var request = require('request'); // "Request" library
var cors = require('cors');
var querystring = require('querystring');
var cookieParser = require('cookie-parser');

var generateRandomString = function(length) {


 var text = '';
  var possible = 
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  for (var i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
};
var stateKey = 'spotify_auth_state';

var app = express();
// app.use((req, res, next) => {
//   res.set({
//     'Access-Control-Allow-Origin': 'http://localhost:4200',
//     'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
//     'Access-Control-Allow-Headers': 'Content-Type'
//   })
//   next();
// });
// app.options('/*', (req, res, next) => {
//   res.header('Access-Control-Allow-Origin', '*');
//   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
//   res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
//   res.sendStatus(200);
// });
app.use(express())
  .use(cors())
  .use(cookieParser());

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

  var state = generateRandomString(16);
  res.cookie(stateKey, state);
  console.log('logging in ')
  // your application requests authorization
  var scope = 'user-read-private user-read-email user-read-birthdate';
  try{
    var q = querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    });
    console.log(q);
    res.redirect("https://accounts.spotify.com/authorize?" +q);
    console.log('redirecting?')
  }catch(err){
    console.log(err);
  }

});

app.get('/callback', function(req, res) {
  console.log('in callback 1')
  // your application requests refresh and access tokens
  // after checking the state parameter

  var code = req.query.code || null;
  var state = req.query.state || null;
  var storedState = req.cookies ? req.cookies[stateKey] : null;
  console.log('in callback 2');

  if (state === null || state !== storedState) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch'
      }));
    console.log('in callback 3')

  } else {
    console.log('in callback 4')

    res.clearCookie(stateKey);
    var authOptions = {
      url: 'https://accounts.spotify.com/api/token',
      form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code'
      },
      headers: {
        'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
      },
      json: true
    };

    request.post(authOptions, function(error, response, body) {
      console.log('posting')
      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'
          }));
      }
    });
  }
});

app.get('/refresh_token', function(req, res) {

  // requesting access token from refresh token
  var refresh_token = req.query.refresh_token;
  var authOptions = {
    url: 'https://accounts.spotify.com/api/token',
    headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64')) },
    form: {
      grant_type: 'refresh_token',
      refresh_token: refresh_token
    },
    json: true
  };

  request.post(authOptions, function(error, response, body) {
    if (!error && response.statusCode === 200) {
      var access_token = body.access_token;
      res.send({
        'access_token': access_token
      });
    }
  });
});

app.listen(8888);

我的Angular应用

export class LoginService {

  constructor(private http:HttpClient) { }

  authenticate(){
    return of(this.http.get(environment.url+'/login').subscribe(res=>{
      console.log(res)
    },err=>{
      console.log(err)
    }))
  }
}

更新仍然需要帮助的人：/

Answer 1

您必须逐步隔离并修复错误。

首先，我建议您在浏览器中测试Spotify授权。使用您的应用客户端ID：https://accounts.spotify.com/authorize?client_id=your_app_client_id&response_type=code&redirect_uri=http://localhost:8888/callback

打开

您应该被重定向到http://localhost:8888/callback?code=xxxxx。如果没有显示错误消息。

第二，您必须在应用程序中创建一个处理int的路由，并获取名为/callback的查询参数。

然后将此代码发送到您的服务器。在您的服务器上，只有服务器端使用结合到您的应用机密中的代码来获取令牌。

遇到Spotify API授权问题。 Redirect_uri永远不会被调用

1 个答案: