Vue/Django集成Google OAuth2报pop_up_closed_by_user错误

当前实现存在3个核心代码逻辑问题，外加可能的配置项错误，共同导致选完账号后权限页加载失败、抛出pop_up_closed_by_user错误：

• 未等待GAPI初始化完成就开放登录调用：gapi.client.init是异步操作，现有代码没有等待该方法执行完成，也没有做初始化状态标记。如果用户点击登录时初始化流程还没跑完，gapi.auth2.getAuthInstance()拿到的是未就绪的实例，调用signIn会直接导致授权流程中断，弹窗无法正常加载权限申请页。
• 登录状态监听重复绑定：把isSignedIn.listen写在了登录触发方法内部，每次点击登录都会新增一个重复的监听器，不仅会造成内存泄漏，还会扰乱授权流程的状态判断，导致回调逻辑执行异常。
• 未捕获初始化阶段错误：现有代码没有处理gapi.load和gapi.client.init的异常，一旦因为配置错误导致初始化失败，前端没有任何感知，用户点击登录只会触发无效的授权请求，最终返回模糊的弹窗关闭错误。

除了代码逻辑问题，以下配置错误也会触发完全相同的现象：

• Google Cloud控制台的OAuth客户端未配置当前前端运行地址为授权JavaScript来源，包括本地开发的localhost带端口地址、线上正式域名，地址必须带HTTP/HTTPS协议，不要带尾部路径斜杠。
• 使用了非Web类型的OAuth Client ID，比如误用了安卓、iOS或桌面端类型的客户端ID。
• 浏览器开启了广告拦截、弹窗拦截插件，拦截了授权弹窗内的权限页资源加载。

初始化逻辑（建议放在Vue组件mounted生命周期内执行） #

import { gapi } from "gapi-script";

export default {
  data() {
    return {
      isGapiReady: false,
      authInstance: null
    }
  },
  mounted() {
    gapi.load("client:auth2", () => {
      gapi.client.init({
        clientId: '887210531667-lvd6kkdqmei6c5uavr5eaa6k0lfj99tr.apps.googleusercontent.com',
        scope: 'profile email',
        prompt: 'select_account'
      }).then(() => {
        this.authInstance = gapi.auth2.getAuthInstance()
        // 登录状态监听仅在初始化完成后绑定1次
        this.authInstance.isSignedIn.listen((isSignedIn) => {
          console.log('登录状态变更:', isSignedIn)
          // 此处可补充状态变更后的业务逻辑，比如获取token传给Django后端校验
        })
        this.isGapiReady = true
      }).catch(err => {
        console.error('Google登录初始化失败:', err)
      })
    })
  },
  methods: {
    async loginWithGoogle() {
      if (!this.isGapiReady || !this.authInstance) {
        console.error('登录模块尚未加载完成，请稍后重试')
        return
      }
      try {
        const user = await this.authInstance.signIn()
        const authRes = user.getAuthResponse()
        const userInfo = user.getBasicProfile()
        console.log('登录成功，用户ID Token:', authRes.id_token)
        // 此处调用Django后端接口，传入id_token完成本站登录态校验与写入
      } catch (err) {
        console.error('登录失败:', err)
        // 此处可细分错误场景做用户提示，比如用户主动取消、权限拒绝等
      }
    }
  }
}

配套注意事项 #

• 登录按钮可以在isGapiReady为false时置为禁用状态，避免用户在模块未加载完成时点击触发异常。
• 后端Django校验Google登录时，不要直接信任前端传的用户信息，必须在服务端拉取Google的公钥校验id_token的签名与有效性，避免伪造登录请求。

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