#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#<что-то > ?