我目前正在制作一个客户广告系列，可以在Spotify和Apple Music上创建播放列表。 昨天，我分享了如何使用ISRC处理两种服务之间的匹配轨道。 今天，我想快速分享一下我如何处理Spotify身份验证，以便它更好地模仿Apple MusicKit JS中的弹出身份验证。
实际上，我很高兴能在他们的文档中找到Spotify涵盖隐式拨款流程，这是他们的描述方式：
隐式授予流适用于完全使用JavaScript实现并在资源所有者的浏览器中运行的客户端。 您不需要任何服务器端代码即可使用它。 请求的速率限制得到了改进，但是没有提供刷新令牌。
很酷。 无论出于何种原因，我几乎总是使用服务器端实现对用户进行身份验证。 但是，出于简单的“另存为播放列表”功能的考虑，简单地通过浏览器的内容就更有意义了。 我与Spotify的Glitch示例有关的唯一问题是，它要求当前页面重定向到授权，这会使我的用户在应用程序流程中失去位置。 我想做的是弹出授权对话框，一旦用户成功登录，将访问令牌发送回父窗口并关闭弹出窗口。
这是一个实际使用该技术的Codepen，我将在下面进行分解。
首先，我们要弹出授权流程。 您可以阅读Spotify的文档，以使用其查询参数来构建授权请求URL。 （将用户重定向到的位置由您决定，但出于本示例的考虑，我将重定向到完全相同的Codepen页面。）然后，只需从window.open函数中弹出该URL，存储对弹出窗口的引用窗口。
弹出= window.open（
AUTHORIZATION_URL，
“使用Spotify登录”，
'宽度= 800，高度= 600'
）
接下来，我们将在window上注册一个全局函数，该函数将把访问令牌作为有效载荷接收，关闭弹出窗口，并从Spotify获取用户的个人资料。
window.spotifyCallback =（有效载荷）=> {
popup.close（）fetch（'https://api.spotify.com/v1/me'，{
标头：{
'授权'：`Bearer $ {payload}`
}
}）。then（response => {
返回response.json（）
}）。then（data => {
//处理数据
}）
}
当Spotify成功验证用户身份后，他们将被重定向回您的redirect_uri 。 在我们的情况下，它们被直接重定向回相同的Codepen页面。 网址重定向中包含一个哈希片段，其中包含我们用户的访问令牌。 因此，当我们的视图初始化时，我们可以简单地检查该令牌并调用我们的spotifyCallback函数。
令牌= window.location.hash.substr（1）.split（'＆'）[0] .split（“ =”）[1] if（令牌）{
window.opener.spotifyCallback（令牌）
}
我无法轻松找到此解决方案，因此希望对您的Web应用程序寻求简单，干净的Spotify身份验证解决方案的人员有所帮助。 当然，这应该演变为检查用户是否也拒绝访问。 骇客入侵！
