vue使用vue-google-login,第三方google登录

7 篇文章 0 订阅
这篇博客介绍了如何在Vue项目中集成和使用vue-google-login组件,实现用户通过Google账号进行登录的功能。通过引入、注册组件及设置参数和回调方法,实现了获取用户基本信息并进行后续操作的流程。
摘要由CSDN通过智能技术生成
//下载
npm i vue-google-login
//引入
import GoogleLogin from 'vue-google-login'
//注册
components: {
    GoogleLogin
  },
    //使用
     <GoogleLogin
        class="bt bt-block _g hover w"
        :params="params"
        :onSuccess="onSuccess"
      >
        <img src="../../assets/images/google.png" alt="" />
        <strong>
          <span v-show="loginAndRegistration">LOG IN</span>
          <span v-show="!loginAndRegistration">CONTINUE</span>
          WITH GOOGLE</strong
        ></GoogleLogin
      >
   //调用方法
   async onSuccess (googleUser) {
   //获取返回的信息
      const user = googleUser.getBasicProfile()
      const info = {
        email: user.getEmail(),
        name: user.getName(),
        photo: user.getImageUrl(),
        token: user.getId()
      }
      const res = await store.dispatch('googleGogin', info)
      this.isSuccess(res)
    },
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 `vue3-google-login` 库在 Vue 3 中获取用户信息,你可以按照以下步骤进行操作: 1. 在 Vue 3 项目中安装 `vue3-google-login`: ```bash npm install vue3-google-login ``` 2. 在你的 Vue 组件中引入并使用 `vue3-google-login`: ```vue <template> <div> <google-login :clientId="YOUR_CLIENT_ID" @success="onSuccess" @failure="onFailure" ></google-login> <button v-if="isSignedIn" @click="getUserInfo">获取用户信息</button> <div v-if="userInfo"> <p>Name: {{ userInfo.name }}</p> <p>Email: {{ userInfo.email }}</p> <p>Profile Picture: {{ userInfo.picture }}</p> </div> </div> </template> <script> import { useGoogleLogin } from 'vue3-google-login' export default { setup() { const { signIn, signOut, isSignedIn, userInfo, getUserInfo } = useGoogleLogin({ clientId: 'YOUR_CLIENT_ID', scope: 'email profile', fetchBasicProfile: true, }) const onSuccess = (googleUser) => { // 登录成功回调函数 console.log('登录成功', googleUser) } const onFailure = (error) => { // 登录失败回调函数 console.log('登录失败', error) } return { signIn, signOut, isSignedIn, userInfo, getUserInfo, onSuccess, onFailure, } }, } </script> ``` 在以上示例代码中,我们使用 `useGoogleLogin` 自定义 hook 来处理谷歌登录。`useGoogleLogin` 返回了一些函数和数据,包括 `signIn` 和 `signOut`,用于登录和退出登录,`isSignedIn` 用于检查用户是否已登录,`userInfo` 用于存储用户信息,以及 `getUserInfo` 用于获取用户信息。 当用户成功登录时,`onSuccess` 回调函数将被触发,并且你可以在其中访问 `googleUser` 对象来获取更多用户信息。你可以根据需要将 `googleUser` 中的信息发送到后端进行处理。 当用户已登录并点击 "获取用户信息" 按钮时,`getUserInfo` 函数将被调用,该函数将更新 `userInfo` 数据并在模板中显示用户信息。 请确保将示例代码中的 `YOUR_CLIENT_ID` 替换为你自己的谷歌应用的客户端 ID。 希望这可以帮助到你!如果你有任何疑问,请随时问我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值