Vue2集成Google GSI登录按钮提示callback不是函数如何解决

报错原因 #

谷歌身份服务（GSI）的HTML渲染模式下，data-callback属性指定的函数名默认会从全局window作用域查找，而你定义在Vue组件methods中的方法是挂载在组件实例上的，不在全局作用域，因此GSI找不到对应的函数，抛出上述错误。

解决方案 #

方案1：把回调函数挂载到全局作用域 #

操作简单，在组件挂载时把methods里的方法挂到window上，组件销毁时清除避免内存泄漏：

1. 修改template中data-callback属性，加引号指定函数名

<template>
  <section>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-callback="myCallbackFunction"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </section>
</template>

2. 修改script部分，添加生命周期钩子处理全局挂载

<script>
export default {      
  methods: {
    myCallbackFunction(response){
      // 此处处理登录回调逻辑，可从response中获取登录凭证
    }
  },
  mounted() {
    // 组件挂载时把方法挂到全局window
    window.myCallbackFunction = this.myCallbackFunction
  },
  beforeDestroy() {
    // 组件销毁时清除全局挂载的方法，避免内存泄漏
    delete window.myCallbackFunction
  }
}
</script>

方案2：使用JS API手动初始化（更推荐，不污染全局） #

不用HTML的自动渲染方式，直接用GSI提供的JS API手动初始化，回调直接绑定组件实例方法，更符合Vue开发规范：

1. 简化template，仅保留按钮容器

<template>
  <section>
    <div id="google-signin-btn"></div>
  </section>
</template>

2. 在mounted中手动初始化GSI和渲染按钮

<script>
export default {
  mounted() {
    // 确保GSI脚本已加载后执行初始化
    if (window.google) {
      this.initGoogleSignIn()
    }
  },
  methods: {
    initGoogleSignIn() {
      // 初始化GSI配置
      google.accounts.id.initialize({
        client_id: "YOUR_GOOGLE_CLIENT_ID",
        callback: this.myCallbackFunction, // 直接绑定组件方法，无需挂全局
        auto_prompt: false
      })
      // 渲染登录按钮
      google.accounts.id.renderButton(
        document.getElementById("google-signin-btn"),
        {
          type: "standard",
          size: "large",
          theme: "outline",
          text: "sign_in_with",
          shape: "rectangular",
          logo_alignment: "left"
        }
      )
    },
    myCallbackFunction(response) {
      // 处理登录逻辑
    }
  }
}
</script>

注意事项 #

• 请替换YOUR_GOOGLE_CLIENT_ID为你在谷歌云控制台申请的实际客户端ID
• 提前确认你项目的部署域名已添加到谷歌云控制台对应客户端的「授权JavaScript来源」列表中
• 如果是动态加载GSI脚本，需要在脚本加载完成的回调中执行初始化逻辑，避免出现google is not defined报错

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