vue调用谷歌授权登录获取用户通讯录的实现示例

业务背景
业务端要求，用户本人填写信息，推荐到朋友，要求可以导出用户谷歌邮箱的通讯录，让用户选择，并且回显到页面 ##步骤

在谷歌开发者平台 ， 创建一个项目，我的理解是，我们的页面就是这个项目，要由我们的项目，对谷歌发起授权请求，就类似微信小程序，向官方发起授权，请求昵称和头像的这个场景，所以，后面我们的这个项目也要通过谷歌的审核。

来到api服务

这时候就到了我们这个项目的管理后台

然后要创建一个用户凭据，拿到我们项目的id和key

配置下面的域名，也就是让谷歌知道，用户从哪个域名发起请求事合理的，可以用本地localhost进行测试。不能用局域网IP

然后在API库中，选择我们要用的API，我的需求是获取通讯录，所以我启用了people API

在API库里，都会有用法和说明，我是自己去他的git上拉取的，看了下代码流程，然后自己改动，git上的代码很简洁

OAuth 同意屏幕 就是我们的应用在授权时，会跳出如下的界面

我的理解就是这个屏幕就是同意屏幕，如果我们的应用没通过谷歌的验证，他就会提示我们的应用不安全。

要想通过，这边有流程官方介绍

我开发的时候，只是发布到正式了，没通过就是了。在开发环境没问题。

然后就能拿到数据了。 全部的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15