谷歌登录示例

index.vue

<script setup lang="ts">
onMounted(() => {
  // 谷歌登录成功的回调 (调用登录接口)
  window.googleCallback = (response: { credential: string }) => {
    console.log("🚀🚀🚀 google response: ", response);
    handleLogin(response.credential);
  };
  // 检查 Google 对象是否存在
  if (window.google) {
    // 初始化 Google 登录实例
    window.google.accounts.id.initialize({
      client_id: GOOGLE_CLIENT_ID,
      callback: window.googleCallback,
    });
    // 初始化 Google 登录按钮
    window.google.accounts.id.renderButton(document.getElementById("google-btn"), {
      theme: "filled_blue",
      size: "large",
      shape: "circle",
    });
    // 显示 Google 登录提示
    window.google.accounts.id.prompt();
  }
});
</script>

<template>
  <div class="login app-content-wrapper">
    <div class="login-content app-content">
      <div id="google-btn">
        <div
          id="g_id_onload"
          :data-client_id="GOOGLE_CLIENT_ID"
          data-context="signin"
          data-ux_mode="popup"
          data-itp_support="true"
          data-callback="googleCallback"
        />
        <div
          class="g_id_signin"
          data-type="standard"
          data-shape="circle"
          data-theme="filled_blue"
          data-text="signin_with"
          data-size="large"
          data-logo_alignment="left"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>