Bottle项目中Instagram客户端认证无法获取Access Token问题求助

嘿，我之前在做类似的Instagram客户端侧认证时也踩过这个坑！你说能在URL里看到token但拿不到，核心原因其实是客户端侧认证返回的token是在URL的锚点（#）后面，而浏览器不会把锚点部分的内容发送给后端服务器，所以Bottle的后端直接用request.query是拿不到的。下面给你几个可行的解决办法：

一、前端提取锚点中的Token，再传给Bottle后端 #

这是最直接的方案，因为锚点内容只有浏览器能访问到，所以我们先用JavaScript提取token，再通过AJAX把它传给Bottle的后端接口。

1. 前端处理代码（放在你的redirect_uri页面中） #

window.addEventListener('load', function() {
    // 去掉URL开头的#，解析锚点里的参数
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const accessToken = hashParams.get('access_token');
    
    if (accessToken) {
        // 把token发送到Bottle后端的接口
        fetch('/receive-instagram-token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ access_token: accessToken })
        })
        .then(res => res.json())
        .then(data => {
            console.log('Token已成功传给后端:', data);
            // 这里可以做后续的页面跳转或提示
        })
        .catch(err => console.error('传输token出错:', err));
    }
});

2. Bottle后端对应的接收路由 #

from bottle import Bottle, request, jsonify, response

app = Bottle()

@app.post('/receive-instagram-token')
def receive_token():
    # 获取前端传来的JSON数据
    req_data = request.json
    access_token = req_data.get('access_token')
    
    if access_token:
        # 这里可以根据需求处理token，比如存入session、数据库，或者调用Instagram API
        print(f"拿到的Instagram Token: {access_token}")
        response.status = 200
        return jsonify({"status": "success", "message": "Token已接收"})
    else:
        response.status = 400
        return jsonify({"status": "error", "message": "未获取到有效的Token"})

二、检查Redirect URI的配置一致性 #

别忽略这个细节！Instagram会严格校验你发起请求时的redirect_uri和你在开发者后台配置的地址是否完全一致：

• 要注意HTTP/HTTPS的区别（比如后台配的是https，请求里不能写http）
• 末尾的斜杠也要一致（比如后台是https://your-domain.com/callback，请求里不能写成https://your-domain.com/callback/）
• 不能带多余的参数，必须和后台配置的完全匹配

如果配置不一致，即使能跳转到页面，也可能出现token无法正常解析的情况。

三、避免直接在后端模板中获取Token #

如果你之前尝试在Bottle的模板里直接读取token，那肯定是不行的——因为模板是后端渲染的，渲染时浏览器还没有处理URL的锚点部分，只有等页面加载完成后，前端JS才能拿到这部分内容。

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