如何在nuxt组件中正确放置google登录代码

Question

Google在https://developers.google.com/identity/sign-in/web中提供了友好的.html代码。我在.html文件中尝试了此代码，并且工作正常。用户登录后，每次加载页面时，onSignin将被吊销，这意味着用户信息将被登录到控制台中但是，如果我在nuxt组件中使用此代码，则只会运行登录过程，不会撤销onSignIn函数，并且不会显示任何错误。这是我的代码：

<template>
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
</template>
<script>
/* eslint-disable */
function onSignIn(googleUser) {
  // Useful data for your client-side scripts:
  var profile = googleUser.getBasicProfile()
  console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
  console.log('Full Name: ' + profile.getName())
  console.log('Given Name: ' + profile.getGivenName())
  console.log('Family Name: ' + profile.getFamilyName())
  console.log('Image URL: ' + profile.getImageUrl())
  console.log('Email: ' + profile.getEmail())

  // The ID token you need to pass to your backend:
  var id_token = googleUser.getAuthResponse().id_token
  console.log('ID Token: ' + id_token)
}
export default {
  head() {
    return {
      meta: [
        {
          name: 'google-signin-scope',
          content: 'profile email'
        },
        {
          name: 'google-signin-client_id',
          content: process.env.GOOGLE_CLIENT_ID
        }
      ],
      script: [
        {
          src: 'https://apis.google.com/js/platform.js',
          defer: true,
          async: true
        }
      ]
    }
  }
}
</script>

我确定process.env.GOOGLE_CLIENT_ID是正确的，因为我在浏览器上运行时已经检查了dom树。如果您知道错误在哪里，请告诉我，谢谢。

Answer 1

Vue SFC的脚本是独立的，并且您已经在此范围内声明了onSignIn。是的，这不会飞。

幸运的是，您只需在onSignIn范围内添加window函数：

window.onSignIn = onSignIn

[通常，您已经做好了。但是，对于该用例，甚至还有专用的软件包：google-signin-vue。我不建议您盲目使用它。而是查看源代码，并根据需要找到想要的功能。