vue怎么调用谷歌授权登录获取用户通讯录

发布时间：2022-07-15 10:27:07 作者：iii
来源：亿速云阅读：220

Vue怎么调用谷歌授权登录获取用户通讯录

在现代Web应用中，用户授权登录和获取用户数据是非常常见的需求。谷歌提供了OAuth 2.0授权机制，允许开发者通过谷歌账号登录并获取用户的个人信息，包括通讯录。本文将详细介绍如何在Vue.js项目中调用谷歌授权登录，并获取用户的通讯录。

准备工作

在开始之前，确保你已经具备以下条件：

一个谷歌账号。
一个Vue.js项目。
Node.js和npm/yarn已安装。

创建谷歌API项目

登录谷歌云控制台。
点击“创建项目”按钮，输入项目名称并点击“创建”。
在项目创建完成后，进入“API和服务” > “仪表板”。
点击“启用API和服务”按钮，搜索并启用“Google People API”。

配置OAuth 2.0客户端ID

在“API和服务” > “凭据”页面，点击“创建凭据”按钮，选择“OAuth客户端ID”。
选择“Web应用程序”作为应用类型。
在“授权重定向URI”中输入你的Vue.js应用的回调URL，例如：http://localhost:8080/auth/google/callback。
点击“创建”按钮，记下生成的客户端ID和客户端密钥。

安装Vue.js项目

如果你还没有Vue.js项目，可以通过以下命令创建一个新的Vue.js项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

集成谷歌登录SDK

在public/index.html文件中添加谷歌登录SDK的脚本：

<script src="https://apis.google.com/js/platform.js" async defer></script>

在src/main.js中配置谷歌客户端ID：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

window.gapiLoaded = () => {
  window.gapi.auth2.init({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
  }).then(() => {
    new Vue({
      render: h => h(App),
    }).$mount('#app');
  });
};

new Vue({
  render: h => h(App),
}).$mount('#app');

实现谷歌授权登录

在src/components/GoogleLogin.vue中创建一个新的组件：

<template>
  <div>
    <button @click="signIn">Sign in with Google</button>
  </div>
</template>

<script>
export default {
  methods: {
    signIn() {
      window.gapi.auth2.getAuthInstance().signIn().then((googleUser) => {
        this.$emit('signin-success', googleUser);
      }).catch((error) => {
        this.$emit('signin-error', error);
      });
    },
  },
};
</script>

在src/App.vue中使用该组件：

<template>
  <div id="app">
    <GoogleLogin @signin-success="onSignInSuccess" @signin-error="onSignInError" />
  </div>
</template>

<script>
import GoogleLogin from './components/GoogleLogin.vue';

export default {
  components: {
    GoogleLogin,
  },
  methods: {
    onSignInSuccess(googleUser) {
      console.log('Sign in success:', googleUser);
      this.getUserContacts(googleUser);
    },
    onSignInError(error) {
      console.error('Sign in error:', error);
    },
    getUserContacts(googleUser) {
      const accessToken = googleUser.getAuthResponse().access_token;
      // 调用Google People API获取通讯录
    },
  },
};
</script>

获取用户通讯录

在src/App.vue中添加getUserContacts方法：

getUserContacts(googleUser) {
  const accessToken = googleUser.getAuthResponse().access_token;
  fetch('https://people.googleapis.com/v1/people/me/connections?personFields=names,emailAddresses', {
    headers: {
      'Authorization': `Bearer ${accessToken}`,
    },
  }).then(response => response.json()).then(data => {
    console.log('User contacts:', data);
  }).catch(error => {
    console.error('Error fetching contacts:', error);
  });
}

处理授权和错误

在src/App.vue中添加错误处理逻辑：

onSignInError(error) {
  console.error('Sign in error:', error);
  if (error.error === 'popup_closed_by_user') {
    alert('Sign in popup was closed by user.');
  } else {
    alert('An error occurred during sign in.');
  }
}

在getUserContacts方法中添加错误处理：

getUserContacts(googleUser) {
  const accessToken = googleUser.getAuthResponse().access_token;
  fetch('https://people.googleapis.com/v1/people/me/connections?personFields=names,emailAddresses', {
    headers: {
      'Authorization': `Bearer ${accessToken}`,
    },
  }).then(response => {
    if (!response.ok) {
      throw new Error('Failed to fetch contacts');
    }
    return response.json();
  }).then(data => {
    console.log('User contacts:', data);
  }).catch(error => {
    console.error('Error fetching contacts:', error);
    alert('Failed to fetch contacts. Please try again.');
  });
}

总结

通过以上步骤，我们成功地在Vue.js项目中集成了谷歌授权登录，并获取了用户的通讯录。整个过程涉及到了谷歌API项目的创建、OAuth 2.0客户端ID的配置、Vue.js项目的安装、谷歌登录SDK的集成、授权登录的实现、用户通讯录的获取以及错误处理。希望本文能够帮助你顺利实现这一功能。

在实际开发中，你可能还需要考虑更多的细节，例如用户授权的范围、刷新令牌的处理、用户数据的存储等。此外，确保在生产环境中使用HTTPS来保护用户数据的安全。

如果你有任何问题或建议，欢迎在评论区留言。祝你开发顺利！