javascript - 在我的网站上创建 spotify 播放列表关注按钮
问题描述
我想创建一个按钮,用户可以在我的网站上关注 spotify 中的播放列表。我在 developer.spotify.com 中检查了 Web 开发人员 spotify Doc 并创建按钮和一个输入并为 Client ID 创建应用程序,然后将 js 代码放入 site 。当用户单击按钮时,他/她应该登录并且没问题,但之后什么都没有发生,追随者也不会改变。
(function() {
function login(callback) {
var CLIENT_ID = '02dc3058bff748e5ba6c814b8366edfs5';
var REDIRECT_URI = 'http://musatamusic.com/demo-submission';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'playlist-modify-public'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'BQD4D9oZwlG2u1cLOcx8P7lJGs63ZA7s0eTKi9O6wI8NmvGEBQI6JCnHAn_jtg_f1_7rWfBF_nD8saECxvAAJbc06ci1p-xa5qMGGWnc3g84byOKPiULBO8J80qEtxxdsJkdZtIH4O9FY7QdHCwq0ODU6fKD9ObazgrrdkxxWz78CMhe6HpaC3jtIkZAaUAog2gjjstbFXnczUxjnNzFAgAs-KUISuHH8F_Fs') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function followPlaylist(accessToken, playlistUri) {
var parts = playlistUri.split(':');
$.ajax({
url: 'https://api.spotify.com/v1/users/zcszsah76l94tltmiget761mi/playlists/4ZxTESEv0m00o2kKq47745/followers',
headers: {
'Authorization': 'Bearer BQD4D9oZwlG2u1cLOcx8P7lJGs63ZA7s0eTKi9O6wI8NmvGEBQI6JCnHAn_jtg_f1_7rWfBF_nD8saECxvAAJbc06ci1p-xa5qMGGWnc3g84byOKPiULBO8J80qEtxxdsJkdZtIH4O9FY7QdHCwq0ODU6fKD9ObazgrrdkxxWz78CMhe6HpaC3jtIkZAaUAog2gjjstbFXnczUxjnNzFAgAs-KUISuHH8F_Fs'
},
method: 'PUT',
success: function() {
$(".follow-us").remove();
$(".popup").append("<p><i class='fas fa-check'></i>THANKS FOR FOLLOWING PLAYLIST</p>");
$(".popup").append("<a href='#!' class='go'>GO TO SUBMIT</a>");
},
dataType: 'html',
error: function(e) {
$(".follow-us").remove();
$(".popup").append("<p style='background:#961818;border-color:#961818;'><i class='fas fa-door-closed'></i>THERE IS A PROBLEM</p>");
}
});
}
var followButton = document.getElementById('follow-us'),
playlistUriInput = document.getElementById('playlist-uri');
followButton.addEventListener('click', function() {
login(function(accessToken) {
followPlaylist(accessToken, playlistUriInput.value);
});
});
})();
<input type="text" id="playlist-uri" value="spotify:user:zcszsah76l94tltmiget761mi:playlist:4ZxTESEv0m00o2kKq47745" hidden>
<button class="follow-us" id="follow-us">
<i class="fab fa-spotify fa-2x"></i>
FOLLOW ON SPOTIFY
</button>
怎么了???
解决方案
推荐阅读
- node.js - Node.js 服务器不会启动,但似乎连接到 DB
- docker - Jenkins 作业构建错误 | 尝试构建 docker 镜像 | Jenkins 和 Docker 都安装在 Windows 7 中
- ruby-on-rails - 如何使用 ajax 重新加载我的部分评论?
- spring - 我插入一个空列,然后在接下来保存数据
- python - 如何找出函数(的源代码)是否包含对特定模块的方法的调用?
- uwp - Devops:错误 CS0234:命名空间“Windows”中不存在类型或命名空间名称“ApplicationModel”
- node.js - WebSocket 握手期间出错:缺少“连接”标头
- excel - 列值更改时插入表头行
- algorithm - 求两个圆的公共弧的长度
- c# - C# 应用程序 - 需要帮助实现循环