时间戳

首页 > 解决方案 > 授权和获取访问令牌后如何将用户传回前端客户端？

django - 授权和获取访问令牌后如何将用户传回前端客户端？

问题描述

我有一个 Django 后端和 React/Redux 前端，我正在尝试集成 Spotify API。我是一个完全的 django 菜鸟，所以请怜悯。我目前通过前端的常规 ol' 锚标记将用户发送到我的后端。然后我的后端将用户重定向到 Spotify 授权页面，然后该页面将他们重定向到另一个页面，该页面将授权代码换成我现在拥有的访问令牌。然而，这段代码和网址只是将我发送到我的后端 API。如何使用此访问令牌让用户回到前端？“我的”代码：

from django.views.generic.base import RedirectView, TemplateView
from rest_framework.response import Response
from rest_framework import generics, viewsets, permissions
from django.urls import reverse
from furl import furl
import requests


def build_authorize_url(request):
    params = {
        "client_id": "<client-id>",
        "response_type": "code",
        "redirect_uri": request.build_absolute_uri(
            reverse("spotify callback")
        ),
        "scope": " ".join(
            [
                'user-read-currently-playing',
                'user-modify-playback-state',
                'user-read-playback-state',
                'streaming',
                'app-remote-control',
                'playlist-read-collaborative',
                'playlist-modify-public',
                'playlist-read-private',
                'playlist-modify-private',
                'user-library-modify',
                'user-top-read',
                'user-read-playback-position',
                'user-read-recently-played',
            ]
        ),
    }
    print(params)

    url = (
        furl("https://accounts.spotify.com/authorize")
        .add(params)
        .url
    )
    print(url)

    return url


AUTH_HEADER = {
    "Authorization": "Basic "
    + base64.b64encode(
        "<my client id>:<my client secret>".encode()
    ).decode()
}


def handle_callback(request):
    code = request.GET["code"]

    response = requests.post(
        "https://accounts.spotify.com/api/token",
        data={
            "grant_type": "authorization_code",
            "code": code,
            "redirect_uri": request.build_absolute_uri(
                reverse("spotify callback")
            ),
        },
        headers=AUTH_HEADER,
    )

    return response.json()


class SpotifyLoginView(RedirectView):
    query_string = True

    def get_redirect_url(self, *args, **kwargs):
        return build_authorize_url(self.request)


class SpotifyCallbackView(generics.GenericAPIView):
    def get(self, request, *args, **kwargs):
        print(handle_callback(request))

        return Response(handle_callback(request))

标签： djangoreactjsreduxdjango-rest-frameworkspotify

解决方案

获得访问/刷新令牌后，您可以将用户重定向到您的前端 URL，并传递令牌值，就像来自 Spotify 的 Github 帐户的官方示例中一样（用 JS 编写，但想法相同）：

res.redirect('/#' +
  querystring.stringify({
    access_token: access_token,
    refresh_token: refresh_token
  })
);

您可以在此处阅读有关身份验证流程的更多信息。

推荐阅读