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

Question

我在 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/

Answer 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 获取令牌，一切就绪！希望对您有所帮助，如果不起作用，请发表评论。