vue調(diào)用用在很多場景，今天為大家介紹如何用谷歌授權(quán)登錄獲取用戶通訊錄

　　當前背景

　　業(yè)務端要求，用戶本人填寫信息，推薦到朋友，要求可以導出用戶谷歌郵箱的通訊錄，讓用戶選擇，并且回顯到頁面 ##步驟

　　在谷歌開發(fā)者平臺， 創(chuàng)建一個項目，我的理解是，我們的頁面就是這個項目，要由我們的項目，對谷歌發(fā)起授權(quán)請求，就類似微信小程序，向官方發(fā)起授權(quán)，請求昵稱和頭像的這個場景，所以，后面我們的這個項目也要通過谷歌的審核。

　　來到api服務

　　下面進入到項目管理后臺

　　然后要創(chuàng)建一個用戶憑據(jù)，拿到我們項目的id和key

　　配置下面的域名，也就是讓谷歌知道，用戶從哪個域名發(fā)起請求事合理的，可以用本地localhost進行測試。提醒注冊不能用局域網(wǎng)IP。

　　然后在API庫中，選擇我們要用的API，我的需求是獲取通訊錄，所以我啟用了people API。

　　這樣就會在API庫里，都會有用法和說明，我是自己去他的git上拉取的，看了下代碼流程，然后自己改動，git上的代碼很簡潔

　　OAuth 同意屏幕 就是我們的應用在授權(quán)時，會跳出如下的界面

　　以上屏幕就是統(tǒng)一，假如我們的應用沒有通過谷歌的驗證，那出現(xiàn)的提示就會以應用不安裝。

　　想要通過，看看下面官方流程：

　　一般在開發(fā)的時候，只是發(fā)布到正式了，沒通過就是了。在開發(fā)環(huán)境沒問題。

　　這樣就可以拿到數(shù)據(jù)。 以下全部的代碼

　　// 初始化谷歌授權(quán)登錄
　　initClient() {
　　// Client ID and API key from the Developer Console
　　let CLIENT_ID =
　　'你申請的ID',
　　API_KEY = '你申請的密碼',
　　// Array of API discovery doc URLs for APIs used by the quickstart
　　DISCOVERY_DOCS = [
　　'https://www.googleapis.com/discovery/v1/apis/people/v1/rest',
　　],
　　// Authorization scopes required by the API; multiple scopes can be
　　// included, separated by spaces.
　　SCOPES = 'https://www.googleapis.com/auth/contacts.readonly',
　　authorizeButton = document.getElementById('authorize_button'),
　　that = this
　　gapi.client
　　.init({
　　// apiKey: API_KEY,
　　clientId: CLIENT_ID,
　　discoveryDocs: DISCOVERY_DOCS,
　　scope: SCOPES,
　　})
　　.then(
　　function () {
　　console.log('谷歌登錄初始化成功')
　　// Listen for sign-in state changes.
　　gapi.auth2
　　.getAuthInstance()
　　.isSignedIn.listen(that.updateSigninStatus)
　　// Handle the initial sign-in state.
　　// that.updateSigninStatus(
　　// gapi.auth2.getAuthInstance().isSignedIn.get()
　　// )
　　authorizeButton.onclick = that.handleAuthClick
　　},
　　function (error) {
　　console.log(error)
　　// appendPre(JSON.stringify(error, null, 2))
　　}
　　)
　　},
　　/**
　　* Called when the signed in status changes, to update the UI
　　* appropriately. After a sign-in, the API is called.
　　*/
　　updateSigninStatus(isSignedIn) {
　　// 是否登錄
　　if (isSignedIn) {
　　console.log('已登錄')
　　this.listConnectionNames()
　　} else {
　　console.log('未登錄')
　　}
　　},
　　/**
　　* Sign in the user upon button click.
　　*/
　　handleAuthClick() {
　　// 是否登錄
　　let flag = gapi.auth2.getAuthInstance().isSignedIn.get()
　　if (flag) {
　　// 如果已經(jīng)登錄，就直接彈出窗口
　　this.listConnectionNames()
　　} else {
　　// 未登錄就調(diào)用出登錄授權(quán)
　　gapi.auth2.getAuthInstance().signIn()
　　}
　　},
　　/**
　　* Sign out the user upon button click.
　　*/
　　handleSignoutClick(event) {
　　gapi.auth2.getAuthInstance().signOut()
　　},
　　listConnectionNames() {
　　let peopleMsg = [],
　　that = this
　　gapi.client.people.people.connections
　　.list({
　　resourceName: 'people/me',
　　pageSize: 100,
　　personFields: 'names,emailAddresses',
　　})
　　.then(function (response) {
　　var connections = response.result.connections
　　if (connections.length > 0) {
　　for (let i = 0; i < connections.length; i++) {
　　var person = connections[i]
　　if (person.names && person.emailAddresses) {
　　let obj = {
　　name: person.names[0].displayName,
　　email: person.emailAddresses[0].value,
　　id: i,
　　}
　　peopleMsg.push(obj)
　　}
　　}
　　} else {
　　that.$message({
　　message: 'No connections found.',
　　type: 'warning',
　　})
　　}
　　that.peopleMsg = peopleMsg
　　that.popDialog(peopleMsg)
　　})
　　.catch((err) => {
　　console.log(err)
　　})
　　},
　　// 在mounted的時候初始化一下窗口
　　mounted() {
　　// 谷歌登錄授權(quán)初始化
　　gapi.load('client:auth2', that.initClient)
　　},

　　以上就是關(guān)于用vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實現(xiàn)的敘述。