Django项目集成Gmail API JavaScript代码失效问题求助

针对你遇到的授权弹窗正常弹出但回调函数不执行的问题，以下是几个排查和解决方向：

1. 检查谷歌OAuth客户端配置 #

确保谷歌云控制台中你的OAuth 2.0客户端ID的配置正确：

• 已授权的JavaScript来源：必须包含你的Django项目域名（本地开发一般是http://localhost:8000）
• 已授权的重定向URI：添加当前集成Gmail API的页面完整地址（比如http://localhost:8000/gmail/），如果使用弹出式授权，重定向URI需要和当前页面匹配，否则授权后无法正确回调。

2. 调整Django的内容安全策略（CSP） #

如果你的项目启用了CSP（比如通过django-csp中间件），需要允许相关域名的脚本和请求：

• 允许https://accounts.google.com用于授权弹窗加载
• 允许https://www.googleapis.com用于Gmail API请求
• 若使用内联脚本，需添加'unsafe-inline'到CSP的script-src规则中，或者将脚本移到外部文件。

3. 修正gapi初始化和回调绑定时机 #

很多时候问题出在gapi未完全加载就初始化tokenClient，导致回调绑定失效。建议将tokenClient的初始化放在gapi加载完成的回调里，并且提前绑定好回调函数，而不是每次点击授权按钮时再绑定：

// 全局初始化函数
function initGmailClient() {
  gapi.client.init({
    apiKey: '你的API_KEY',
    clientId: '你的CLIENT_ID',
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest'],
    scope: 'https://www.googleapis.com/auth/gmail.readonly'
  }).then(() => {
    // 提前初始化tokenClient并绑定回调
    window.tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: '你的CLIENT_ID',
      scope: 'https://www.googleapis.com/auth/gmail.readonly',
      callback: async (resp) => {
        if (resp.error) throw resp;
        document.getElementById('signout_button').style.visibility = 'visible';
        document.getElementById('authorize_button').innerText = 'Refresh';
        await listLabels();
      }
    });
  }, (error) => {
    console.error('GAPI初始化失败:', error);
  });
}

// 页面加载完成后加载gapi
window.addEventListener('load', () => {
  gapi.load('client:auth2', initGmailClient);
});

// 授权点击事件简化
function handleAuthClick() {
  if (gapi.client.getToken() === null) {
    tokenClient.requestAccessToken({prompt: 'consent'});
  } else {
    tokenClient.requestAccessToken({prompt: ''});
  }
}

4. 排查页面隐性刷新 #

检查Django模板中是否有其他脚本、表单自动提交等行为，导致授权完成后页面被隐性刷新，打断回调执行。可以通过浏览器开发者工具的网络面板查看是否有额外的页面请求，或者在回调函数开头添加console.log('回调触发')验证是否真的没执行。

5. 控制台深度排查 #

虽然你说控制台无报错，但建议仔细检查控制台的警告信息（比如CSP警告、跨域警告），以及网络面板中授权请求的返回状态，确认授权请求是否成功完成，是否有重定向到错误地址。

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