Was mache ich mit einem spotify API-Authentifizierungsumleitungs-URI in Django?

Question

Ich habe eine app in Django gebaut, die Spotipy, ein Spotify-API Python-Bibliothek, und verwendet den Befehl spotipy.util.prompt_for_user_token() als solche verwendet ein Token und Zugriff auf meine private Bibliothek als solche zu generieren:

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" 

Ich mag würde Die App hat einen Login anstelle eines hardcoded Login, aber ich kann nicht herausfinden, wie.

Im Moment habe ich eine 'Login' Taste, die versucht, die Login-Seite Umleitung über Javascript, durch den Aufruf der oben genannten Code mit einem Benutzernamen Parameter, aber das öffnet eine neue Seite und das folgende ist in der Konsole:

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 

Anmerkung:der Text in Klammern Karat ersetzt wurden, da sie private Schlüssel waren.

Ich möchte es auf eine ähnliche Funktionalität haben, wie diese Website-Logins Griffe: http://static.echonest.com/SortYourMusic/

Answer 1

Um dies zu implementieren ich alle zusammen das spotipy Modul verlassen endete und nur mit Hilfe von Javascript. Ich sehe Ihre Verwendung der Benutzerautorisierung API-Fluss, der in Ordnung ist, weil Ihr Server Ihren geheimen Schlüssel sicher senden kann. Wenn diese an das Frontend Ihrer Anwendung verschieben, können Sie dies nicht tun und stattdessen die Implicit Grant Fluss verwenden müssen:

#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!! 
      } 
     }); 
    } 

die obige Methode aufrufen, wird ein neues Popup-Fenster öffnen, die den Benutzer durch Spotify-Login nehmen. Nach der Autorisierung wird das Fenster zu der von Ihnen angegebenen Django-Ansicht umgeleitet. Haben diese Ansicht eine Rückruf Seite, deren einziger Zweck wird laden Sie das Zugriffstoken von seiner URI zu sammeln:

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

Wenn dass Seite geladen wird, in dem Popup-Fenster, es ist URI die Gewährung enthalten Sie suchen, ex: http://www.example.com/callback/#access_token=BQDoPzyrkeWu7xJegj3v1JDgQXWzxQk2lgXrQYonXkXIrhmjeJVS38PFthMtffwlkeWJlwejkwewlHaIaOmth_2UJ2xJrz2x-Voq0k0T0T4SuCUdIGY3w3cj5CpULkFla9zwKKjvdauM2KoUIQa1vULz-w8Da83x1&token_type=Bearer&expires_in=3600&state=123

IDK, wenn Sie jQuery verwenden oder nicht, aber es gibt eine Reihe von Möglichkeiten, eine JS-Funktion beim Laden der Seite aufzurufen. Jetzt müssen Sie nur noch den URI analysieren, sobald die Callback-Seite geladen ist, und Sie erhalten Ihr Zugriffstoken. Dann sind Sie mit diesem Popup-Callback-Fenster fertig, damit Sie das Access-Token an Ihre Hauptseite zurückgeben können, indem Sie es zu localStorage hinzufügen. Denken Sie daran, wie wir auf Ihrer Hauptseite einen Ereignis-Listener erstellt haben, um die localStorage zu sehen, damit Sie wissen, wann sie da ist. Hier ist ein Beispiel für den Code, den Sie auf Ihre Callback Seite wollen würde (es verwendet einige jquery aber es gibt regelmäßige JS Wege von Sachen zu tun beim Laden der Seite):

#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(); 
}); 

Jetzt Ihr Popup hat sich geschlossen und du bist zurück in Ihr Hauptfenster in der localStorage-Ereignis-Listener-Funktion aus dem ersten Codeabschnitt in diesem Post. Es wird das Token von localStorage erhalten und du bist fertig! Hoffe, das hilft, bitte Kommentar, wenn es nicht funktioniert.