如何在Django中提取URL片段里的Spotify登录回调数据

URL的哈希（#后）部分是浏览器端专属内容，不会随请求发送到服务器，所以后端无法通过request.get直接获取。以下是两种实用的解决方法：

方法1：前端解析后传给后端 #

直接在回调页面的前端代码里处理哈希参数，再发送给后端：

1. 获取并解析哈希字符串

// 解析哈希中的参数
function getHashParams() {
  const hash = window.location.hash.substring(1);
  return new URLSearchParams(hash);
}

// 提取所需的token
const params = getHashParams();
const accessToken = params.get('access_token');
const expiresIn = params.get('expires_in');

2. 将解析后的参数通过POST请求传给后端

// 发送到后端接口
fetch('/api/store-spotify-token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    access_token: accessToken,
    expires_in: expiresIn
  })
});

之后后端就能从请求体中拿到这些参数，进行后续存储或调用Spotify API的操作。

方法2：利用Supabase Auth的内置能力 #

既然你用Supabase实现登录，完全可以让Supabase帮你处理token的获取和存储：

1. 确保在Supabase控制台和Spotify开发者平台中，回调URL配置一致（比如http://127.0.0.1:8000/callback）
2. 前端登录成功后，直接从Supabase的session中获取Spotify凭证：

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('你的Supabase URL', '你的匿名密钥');

// 获取当前用户的session
const { data: { session }, error } = await supabase.auth.getSession();
if (session) {
  // session.provider_token就是Spotify的access_token
  const spotifyAccessToken = session.provider_token;
  // 用这个token调用Spotify API即可
}

这种方式无需手动解析哈希，Supabase会自动完成OAuth流程的收尾工作，把token绑定到用户会话中。

关键提醒 #

• 敏感token不要长期存放在前端本地存储，尽量通过后端处理或依赖Supabase的会话管理
• 回调URL必须在两个平台（Supabase、Spotify）配置完全一致，否则会触发授权错误

内容的提问来源于stack exchange，提问作者KevinL