我该如何处理 Django 中的 spotify api 身份验证重定向 uri？

Posted 2023-04-15

【中文标题】我该如何处理 Django 中的 spotify api 身份验证重定向 uri？

【英文标题】：What do I do with a spotify api authentication redirect uri in Django?

【发布时间】：2016-11-03 03:56:00

【问题描述】：

我在 Django 中构建了一个应用，它使用 Spotify API Python 库 Spotipy，并使用 spotipy.util.prompt_for_user_token() 命令生成令牌并访问我的私有库：

import spotipy
import spotipy.util as util
import os, ast

#Spotify API keys
scope = "playlist-read-private"
uir = "http://localhost:8000"
username = "<MY_USERNAME>"

spotify_uid = os.environ["SPOTIFY_UID"]
spotify_usec = os.environ["SPOTIFY_USEC"]
print "retrieved keys from OS"

#set up access
def get_access():
  try:
    token = util.prompt_for_user_token(username, scope, spotify_uid, spotify_usec, uir)
    print "SUCCESS"
    return spotipy.Spotify(auth=token)
  except:
    print "FAILED TO LOAD"

我希望应用程序具有 ui 登录而不是硬编码登录，但我不知道怎么做。

目前，我有一个“登录”按钮，它尝试通过 javascript 触发登录页面重定向，方法是使用用户名参数调用上述代码，但这会打开一个新页面，控制台中有以下内容：

User authentication requires interaction with your
        web browser. Once you enter your credentials and
        give authorization, you will be redirected to
        a url.  Paste that url you were directed to to
        complete the authorization.


Opening https://accounts.spotify.com/authorize?scope=playlist-read-     private&redirect_uri=http%3A%2F%2Flocalhost%3A8000&response_type=code&client_id=<CLIENT_ID> in your browser


Enter the URL you were redirected to: [30/Jun/2016 15:53:54] "GET /?code=<TOKEN>HTTP/1.1" 200 2881 

注意： 大括号中的文本已被替换，因为它们是私钥。

我希望它具有与本网站处理登录的方式类似的功能： http://static.echonest.com/SortYourMusic/

【问题讨论】：

您找到解决方案了吗？

【参考方案1】：

为了实现这一点，我最终放弃了 spotipy 模块，只使用了 javascript。我看到您使用的是用户授权 api 流程，这很好，因为您的服务器可以安全地发送您的密钥。将其移至应用程序的前端时，您不能这样做，而是必须使用 Implicit Grant 流：

#In your main page's <script>:
var loginSpotify = function()
        var SPOTIPY_CLIENT_ID = "Your Client ID Here"
        var SPOTIPY_REDIRECT_URI = "Your Django Callback View Here (www.example.com/callback/)"
        var spotifyScope = "playlist-read-private"
        var spotifyAuthEndpoint = "https://accounts.spotify.com/authorize?"+"client_id="+SPOTIPY_CLIENT_ID+"&redirect_uri="+SPOTIPY_REDIRECT_URI+"&scope="+spotifyScope+"&response_type=token&state=123";
        window.open(spotifyAuthEndpoint,'callBackWindow','height=500,width=400');
        //This event listener will trigger once your callback page adds the token to localStorage
        window.addEventListener("storage",function(event)
            if (event.key == "accessToken")
                var spAccessToken = event.newValue;
                //do things with spotify API using your access token here!!
            
        );
    

调用上述方法将打开一个新的弹出窗口，该窗口将引导用户通过 spotify 的登录。一旦授权，窗口将重定向到您指定的 Django 视图。让该视图加载一个回调页面，其唯一目的是从其 URI 收集访问令牌：

#in your views.py:
def callback(request):
    return render(request, 'YourApp/spotifyLoginFinish.html',)

当该页面加载时，在弹出窗口中，它的 URI 将包含您寻求的授权，例如：http://www.example.com/callback/#access_token=BQDoPzyrkeWu7xJegj3v1JDgQXWzxQk2lgXrQYonXkXIrhmjeJVS38PFthMtffwlkeWJlwejkwewlHaIaOmth_2UJ2xJrz2x-Voq0k0T0T4SuCUdIGY3w3cj5CpULkFla9zwKKjvdauM2KoUIQa1vULz-w8Da83x1&token_type=Bearer&expires_in=3600&state=123

如果你使用 jquery 或者不使用 jquery，但有很多方法可以在页面加载时调用 JS 函数。因此，现在您需要做的就是在回调页面加载后解析 URI，然后您就可以获得访问令牌。然后你就完成了这个弹出回调窗口，所以你可以通过将访问令牌添加到 localStorage 来将访问令牌传递回你的主页。请记住我们如何在您的主页上创建一个事件侦听器来监视 localStorage，以便您知道它何时在那里。这是您希望在回调页面上使用的代码示例（它使用一些 jquery，但在页面加载时有常规的 JS 方法）：

#In spotifyLoginFinish.html's <script>:
$('document').ready(function()
        //i leave 'parseHash()' as an exercise for the reader, all it does is take the uri string(see above ex of what this looks like) and get the access_token from it
        var spotifyAccessToken = parseHash(String(window.location.hash));
        //you must clear localStorage for main page listener to trigger on all(including duplicate) entries
        localStorage.clear();
        localStorage.setItem('accessToken', spotifyAccessToken);
        window.close();
);

现在您的弹出窗口已自行关闭，您又回到了主窗口，位于本文第一段代码中的 localStorage 事件侦听器函数中。它将从 localStorage 获取令牌，一切就绪！希望对您有所帮助，如果不起作用，请发表评论。

【讨论】：

嗨！您在获取存储中设置的访问令牌后有一个建议，如何搜索歌曲？当我单击搜索按钮时，我有一个搜索功能。我是否只是将其复制并粘贴到“//在此处使用您的访问令牌使用 spotify API 执行操作！！”的位置？你在那部分放了什么

我对学习如何使用这部分代码特别感兴趣，因为我已经能够获取存储在本地存储中的访问令牌。我只是不知道该去哪里：window.addEventListener("storage", function(event) if (event.key == "accessToken") var spAccessToken = event.newValue; //do things with spotify API using your access token here!! )

@user2030942 获得访问令牌后，您需要参考 Spotify Api 文档并查看可用的各种端点。如果您尝试搜索歌曲，您想要的端点可能是搜索：developer.spotify.com/web-api/search-item 您将向该端点发送 GET 请求。您的请求将在其标头中包含您的令牌，并在 URL 中包含搜索参数。该文档将告诉您可以期望得到什么样的响应格式。该文档有代码示例，但如果不够，请发布一个新问题并在此处链接，我会尝试回答。