Доступ к данным API Spotify (т. Е. Токенам) из redirect_uri через nodejs, затем перенаправление в angular app

#javascript #node.js #angularjs #spotify

#javascript #node.js #angularjs #spotify

Вопрос:

Привет, я создаю веб-приложение с использованием node.JS и AngularJS. Я довольно новичок в обеих технологиях.

Это моя настройка приложения:

узел.JS MongoDB REST API — это будет обрабатывать все запросы на стороне сервера, а также передавать данные в Spotify (http://localhost:3000 )

AngularJS — для самого приложения (http://localhost:8080 )

Spotify недавно сделал свой веб-API Spotify общедоступным. Я пытаюсь получить токен доступа (и токен обновления), чтобы я мог выполнять вызовы API для них. Однако я смог получить access_token amp; refresh_token, поскольку я прихожу из http://localhost:8080/test чтобы http://localhost:3000/spotifyapi/login чтобы инициализировать аутентификацию, затем http://localhost:3000/spotifyapi/callback чтобы получить токены.

Если бы вы могли, пожалуйста, помочь / подсказать мне, как извлекать токены / выполнять вызовы api, а затем передавать их обратно в мое приложение AngularJS, я был бы очень признателен.

Ниже приведены мои коды:

Я использую grunt для компиляции всех JS в один файл в моем приложении Angular

NODE.JS API (http://localhost:3000/spotifyapi )

spotify.js

 var SpotifyWebApi = require('spotify-web-api-node');
var request = require('request');
var querystring = require('querystring');

var client_id = config.spotify.client_id,
 client_secret = config.spotify.client_secret,
 redirect_uri = config.spotify.redirect_uri;

var spotifyApi = new SpotifyWebApi({
 client_id: client_id,
 redirect_uri: redirect_uri
});

exports.login = function(req, res) {
 var scope = 'user-read-private playlist-read playlist-read-private',
    state = 'mixr-test';

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

exports.callback = function(req, res) {
var code = req.query.code;
var authOptions = {
    url: 'https://accounts.spotify.com/api/token',
    form: {
        code: code,
        redirect_uri: redirect_uri,
        grant_type: 'authorization_code',
        client_id: client_id,
        client_secret: client_secret
    },
    json: true
};

request.post(authOptions, function(error, response, body) {
    if (!error amp;amp; 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
        };

        // res.send(options);

        res.redirect('http://localhost:8080/#/test#'  
            querystring.stringify({
                access_token: access_token,
                refresh_token: refresh_token
            }));
    }

    res.send({
        access_token: access_token,
        refresh_token: refresh_token
    });
});
};

exports.refreshToken = function(req, res) {
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 amp;amp; response.statusCode === 200) {
        var access_token = body.access_token;
        res.send({
            'access_token': access_token
        });
    }
});
};
 

routeMap.js

 module.exports = [
  ['/spotifyapi', 'spotify#index', 'get'],
  ['/spotifyapi/login', 'spotify#login', 'get'],
  ['/spotifyapi/callback', 'spotify#callback', 'get'],
  ['/spotifyapi/refreshToken', 'spotify#refreshToken', 'get'],
];
 

Приложение AngularJS (http://localhost:8080/test )

SpotifyService.js

 app.factory('SpotifyService', function($http) {

var apibaseUrl = "http://localhost:3000";

 return {
    login: function(config) {
        return $http.get(apibaseUrl   '/spotifyapi/login');
    },
    callback: function(access_token, refresh_token) {
        return $http.get(apibaseUrl   '/spotifyapi/callback', {access_token:access_token, refresh_token:refresh_token});
    },
    refresh: function(refresh_token) {
        return $http.get(apibaseUrl   '/spotifyapi/refreshToken', {access_token: access_token, refresh_token: refresh_token});
    },
    getUsers: function(){
        return http.get(apibaseUrl   '/users');
    }
 };
});
 

SpotifyCtrl.js

 app.controller('TestCtrl', ['$scope', 'SpotifyService', function($scope, SpotifyService) {

    $scope.access_token = '';
    $scope.refresh_token = '';

    var getLogin = function() { 
        SpotifyService.login().success(function(data){
            SpotifyService.callback(access_token, refresh_token).success(function(data){
                $scope.access_token = data.access_token;
                $scope.refresh_token = data.refresh_token;
            }).error(function(data){
                console.log("error!"   data);
            });
        }).error(function(data){
            console.log("error!"   data);
        });
    };
 }
]);
 

spotify.jade

 block content
  div#container(ng-controller="SpotifyCtrl")
    a(href="http://localhost:3000/spotifyapi/login" class="btn btn-large") Login via Spotify
      p {{ access_token }}
      p {{ refresh_token }}
 

Я могу перейти на страницу входа в Spotify -> аутентификация. Мой redirect_uri http://localhost:3000/spotifyapi/callback . Когда аутентификация завершена, я могу получить свой access_token и refresh_token, но я все еще на своем узле.Сервер API JS, и я не могу получить какое-либо значение от моей службы Angular для передачи моему представлению. Как мне перенаправить из моего redirect_uri обратно в мое приложение Angular и иметь возможность извлекать токены доступа и обновлять их через мои службы Angular?

Я прошу прощения за этот длинный пост, я просто нахожусь в тупике прямо сейчас о том, как завершить этот модуль.

ЗАРАНЕЕ БЛАГОДАРЮ ВАС!

Комментарии:

1. Могу ли я смиренно предположить, что вы используете только один веб-сервер вместо двух? Я считаю, что это значительно упростит вам дальнейшую работу.

2. Вы должны иметь возможность считывать токен доступа и токен обновления, которые вы передаете как фрагмент uri из AngularJS. Кроме того, вы также можете записать значения в cookie и прочитать их из AngularJS. Более того, если ваше приложение Angular работает на localhost:8080/ test , не следует ли вам перенаправить на localhost:8080/test#<что-то >, когда вы получаете токен, вместо localhost:8080/#/test#<что-то > ?