Возникли проблемы с авторизацией spotify api. Redirect_uri никогда не вызывается - PullRequest
Новая
       15

Возникли проблемы с авторизацией spotify api. Redirect_uri никогда не вызывается

1 голос
/ 25 марта 2019

Я пытаюсь разрешить моему приложению использовать API-интерфейс spotify. Я следую инструкциям на их документах. Проблема в том, что после вызова spotify.com/authorize, redirect_uri никогда не срабатывает. У меня уже есть перенаправленный Uris в консоли разработчика spotify: http://localhost:8888/callback и localhost: 8888 / callback.

И в моем приложении angular 7 я получаю эту ошибку в консоли:

ошибка: {ошибка: SyntaxError: неожиданный токен <в JSON в позиции 1 в JSON.parse () в XMLHtt… </p>

"Http-сбой при разборе 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"

это мой код 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);

мое угловое приложение 

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)
    }))
  }
}

обновление Еще нужна помощь, ребята: /

1 Ответ

0 голосов
/ 26 марта 2019

Вы должны постепенно изолировать ошибки и исправлять их.

Сначала я предлагаю вам проверить авторизацию Spotify в вашем браузере.Откройте, используя ваше приложение. Идентификатор клиента: 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. Если не показывает нам сообщение об ошибке.

Во-вторых, вы должны создать маршрут в вашемприложение, которое обрабатывает /callback и получает параметр запроса с именем code.

Затем отправьте этот код на свой сервер.На вашем сервере только серверная часть использует код, объединенный с секретом вашего приложения, для получения токена.

...