使用谷歌登录按钮闪烁

Question

我用vue-3开发一个前端应用程序，需要实现用google登录。 我设法让整个流程正常工作，但有一件事真正让我烦恼，即页面加载后按钮会闪烁一次：

这是我的简化代码：

<template>
  <div>
    <div style="height: 44px; width: 250px">
      <div id="g_id_onload"
           :data-client_id="googleClientId"
           data-callback="handleGoogleCredentialResponse"
           data-auto_prompt="false"></div>
      <div class="g_id_signin" data-type="standard"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      googleClientId: import.meta.env.VITE_API_GOOGLE_CLIENT_ID,
    };
  },
  mounted() {
    this.loadGoogleSdk();

  },
  methods: {
    // Load the Google SDK and render the button
    loadGoogleSdk() {
      const script = document.createElement('script');
      script.src = 'https://accounts.google.com/gsi/client';

      script.onload = () => {
        google.accounts.id.initialize({
          client_id: this.googleClientId,
          callback: this.handleGoogleCredentialResponse,
        });
        google.accounts.id.renderButton(
            document.querySelector('.g_id_signin'),
            {theme: 'outline', size: 'large', shape: 'pill'}
        );
      };
      document.head.appendChild(script);
    },
  },
};
</script>

知道如何解决这个问题吗？

Answer 1

您同时使用 HTML 和 JavaScript 使用 Google SDK 登录。您只需要使用其中一个即可。我猜这就是您看到闪烁问题的原因。