身份验证是任何应用程序处理敏感数据的一个重要方面。无论是银行app还是社交媒体平台，用户都希望确保他们的信息是安全的。在国外，Google 登录是常用的身份验证机制，允许用户使用其 Google 凭证登录应用，这样做不但可以节省时间，还能提供更无缝的用户体验。

对于在 Vue 3 项目中实现 Google Sign-In，vue3-google-signin 就是一种简单且可自定义的实现方式。从显示 Google 登录按钮到获取和管理用户身份验证令牌，vue3-google-signin 将处理整个身份验证流程，因此细节方面无需费心。

安装

//npm
npm install -S vue3-google-signin

//yarn
yarn add vue3-google-signin

//pnpm
pnpm add vue3-google-signin

很好，然后我们可以使用用户的谷歌帐户凭据在应用程序中对用户进行身份验证。

用法

设置库轻而易举。你所需要做的就是将以下代码添加到应用程序的入口点（main.js 或 main.ts）。

import GoogleSignInPlugin from "vue3-google-signin"

app.use(GoogleSignInPlugin, {
  clientId: 'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',
});

// other config

app.mount("#app");

就是这样！现在让我们谷歌登录应用程序。我们可以使用以下代码将谷歌登录按钮添加到组件：

<script setup lang="ts">
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

// handle success event
const handleLoginSuccess = (response: CredentialResponse) => {
  const { credential } = response;
  console.log("Access Token", credential);
};

// handle an error event
const handleLoginError = () => {
  console.error("Login failed");
};
</script>

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

还可以试试 Google 新的 One Tap 身份验证，如果对话框的可见性仅限于用户登录应用程序，则在侧面显示一个小对话框或弹出窗口。

import { useOneTap, type CredentialResponse } from "vue3-google-signin";

useOneTap({
  onSuccess: (response: CredentialResponse) => {
    console.log("Success:", response);
  },
  onError: () => console.error("Error with One Tap Login"),
  // options
});