使用Spotify弹出窗口实现登录

嗨，我想在我的网站上使用Spotify功能实现登录，但我不想将用户重定向到其他页面，我只想打开一个弹出窗口。我想要的行为的一个例子可以在上找到。当您单击“登录”时，会打开一个弹出窗口，这样您就可以使用spotify登录而无需任何重定向。

spotify开发者网站就是这样做的：

打开一个弹出窗口，打开/api/authorize。一旦用户允许应用程序，它就会将他重定向到回调页面

在回调页面上，通过对/api/token执行POST请求，使用返回的授权代码（获取参数

code

）生成访问/刷新令牌（查看文档）这应该在服务器端完成，因为它需要发送客户端ID和客户端密钥

将访问/刷新令牌存储在localStorage中并关闭弹出窗口

检测关闭事件，从localStorage获取令牌并将其用于API

例子 登录页面：

// Open the auth popup
var spotifyLoginWindow = window.open('https://accounts.spotify.com/authorize?client_id=REPLACE_ME&redirect_uri=REPLACE_ME&response_type=code');

// Close event
spotifyLoginWindow.onbeforeunload = function() {
  var accessToken = localStorage.getItem('sp-accessToken');
  var refreshToken = localStorage.getItem('sp-refreshToken');

  // use the code to get an access token (as described in the documentation)
};

回拨页面：

// Assuming here that the server has called /api/token
// and has rendered the access/refresh tokens in the document
var accessToken = "xxx";
var refreshToken = "xxx";
/////////////////////////

// Store the tokens
localStorage.setItem("sp-accessToken", accessToken);
localStorage.setItem("sp-refreshToken", refreshToken);

// Close the popup
window.close();

---

Spotify开发者网站就是这样做的：

打开一个弹出窗口，打开/api/authorize。一旦用户允许应用程序，它就会将他重定向到回调页面

在回调页面上，通过对/api/token执行POST请求，使用返回的授权代码（获取参数

code

）生成访问/刷新令牌（查看文档）这应该在服务器端完成，因为它需要发送客户端ID和客户端密钥

将访问/刷新令牌存储在localStorage中并关闭弹出窗口

检测关闭事件，从localStorage获取令牌并将其用于API

例子 登录页面：

// Open the auth popup
var spotifyLoginWindow = window.open('https://accounts.spotify.com/authorize?client_id=REPLACE_ME&redirect_uri=REPLACE_ME&response_type=code');

// Close event
spotifyLoginWindow.onbeforeunload = function() {
  var accessToken = localStorage.getItem('sp-accessToken');
  var refreshToken = localStorage.getItem('sp-refreshToken');

  // use the code to get an access token (as described in the documentation)
};

回拨页面：

// Assuming here that the server has called /api/token
// and has rendered the access/refresh tokens in the document
var accessToken = "xxx";
var refreshToken = "xxx";
/////////////////////////

// Store the tokens
localStorage.setItem("sp-accessToken", accessToken);
localStorage.setItem("sp-refreshToken", refreshToken);

// Close the popup
window.close();

---

跟进Teh的上述回应。如果您不想使用localStorage，我注册了一个全局窗口函数，并将令牌作为有效负载传递回父窗口。适用于保存播放列表等传递体验

弹出窗口：

popup = window.open(
  AUTHORIZATION_URL,
  'Login with Spotify',
  'width=800,height=600'
)

回调函数：

window.spotifyCallback = (payload) => {
  popup.close()

  fetch('https://api.spotify.com/v1/me', {
    headers: {
      'Authorization': `Bearer ${payload}`
    }
  }).then(response => {
    return response.json()
  }).then(data => {
    // do something with data
  })
}

回拨页面：

token = window.location.hash.substr(1).split('&')[0].split("=")[1]

if (token) {
  window.opener.spotifyCallback(token)
}

---

我在上一篇文章中更详细地介绍了这项技术。

跟进了Teh的上述回复。如果您不想使用localStorage，我注册了一个全局窗口函数，并将令牌作为有效负载传递回父窗口。适用于保存播放列表等传递体验

弹出窗口：

popup = window.open(
  AUTHORIZATION_URL,
  'Login with Spotify',
  'width=800,height=600'
)

回调函数：

window.spotifyCallback = (payload) => {
  popup.close()

  fetch('https://api.spotify.com/v1/me', {
    headers: {
      'Authorization': `Bearer ${payload}`
    }
  }).then(response => {
    return response.json()
  }).then(data => {
    // do something with data
  })
}

回拨页面：

token = window.location.hash.substr(1).split('&')[0].split("=")[1]

if (token) {
  window.opener.spotifyCallback(token)
}

---

我在上更详细地介绍了这项技术。

您是否尝试过使用iframe。您是否尝试过使用iframe。非常感谢，这正是我想要的！这不是很糟糕吗？刷新令牌不允许有访问权限的人永久登录，直到被列入黑名单吗？非常感谢，这正是我想要的！这不是很糟糕吗？刷新令牌本质上不允许有访问权限的人永久登录，直到它被列入黑名单吗？