如何在Streamlit中获取OAuth2.0隐式流含#URL里的Access Token？

问题根源 #

浏览器不会将URL的hash片段（#后的部分）发送给服务器，所以Streamlit的Python后端无法直接读取这部分内容，必须通过前端JavaScript处理后传递到后端。

解决方案一：JS重定向将hash转为查询参数 #

通过插入前端JS代码，解析hash中的Access Token并重定向到当前页面，把token放在查询参数（?后）中，让Streamlit可以通过st.query_params获取：

import streamlit as st

# 插入处理hash的前端脚本
st.components.v1.html("""
<script>
  if (window.location.hash) {
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const accessToken = hashParams.get('access_token');
    if (accessToken) {
      // 重定向页面，将token转为查询参数
      window.location.href = `${window.location.pathname}?access_token=${accessToken}`;
    }
  }
</script>
""", height=0)

# 读取查询参数中的token
access_token = st.query_params.get('access_token')
if access_token:
    st.write("成功获取Access Token")
    # 此处可添加token的后续业务逻辑
else:
    st.write("未检测到Access Token")

解决方案二：JS直接传递token到Streamlit后端 #

无需重定向，利用Streamlit的消息机制，将hash中的token直接传递到Python端：

import streamlit as st
from streamlit.components.v1 import html

# 插入传递token的前端脚本
html("""
<script>
  window.onload = () => {
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const accessToken = hashParams.get('access_token');
    if (accessToken) {
      // 通过postMessage将token传入Streamlit查询参数
      window.parent.postMessage({
        type: 'streamlit:setQueryParams',
        params: { access_token: accessToken }
      }, '*');
    }
  };
</script>
""", height=0)

# 读取传递后的token
access_token = st.query_params.get('access_token')
if access_token:
    st.success("Access Token已获取")
    # 后续业务逻辑处理

额外建议 #

• 如果内部OAuth提供商支持，可尝试调整回调配置，将token放在查询参数中（隐式流默认用hash是出于安全考量，需评估风险）。
• 处理token时避免明文展示，确保敏感数据的安全性。

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