如何通过Vue实现调用谷歌授权登录并获取用户通讯录的功能？

本文共计962个文字，预计阅读时间需要4分钟。

调用谷歌授权，获取用户通讯录信息+业务背景+业务需求，用户本人填写信息，推荐给朋友，请求导出用户谷歌邮箱的通讯录，用户选择，并返回到页面

调用谷歌授权，获取用户通讯录信息

业务背景

• 业务端要求，用户本人填写信息，推荐到朋友，要求可以导出用户谷歌邮箱的通讯录，让用户选择，并且回显到页面 ##步骤
• 在谷歌开发者平台 ， 创建一个项目，我的理解是，我们的页面就是这个项目，要由我们的项目，对谷歌发起授权请求，就类似微信小程序，向官方发起授权，请求昵称和头像的这个场景，所以，后面我们的这个项目也要通过谷歌的审核。
• 来到api服务

• 这时候就到了我们这个项目的管理后台
• 然后要创建一个用户凭据，拿到我们项目的id和key

• 配置下面的域名，也就是让谷歌知道，用户从哪个域名发起请求事合理的，可以用本地localhost进行测试。不能用局域网IP
• 然后在API库中，选择我们要用的API，我的需求是获取通讯录，所以我启用了people API
• 在API库里，都会有用法和说明，我是自己去他的git上拉取的，看了下代码流程，然后自己改动，git上的代码很简洁
• OAuth 同意屏幕 就是我们的应用在授权时，会跳出如下的界面

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