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

　　當(dāng)前背景

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

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

　　來(lái)到api服務(wù)

　　下面進(jìn)入到項(xiàng)目管理后臺(tái)

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

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

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

　　這樣就會(huì)在API庫(kù)里，都會(huì)有用法和說(shuō)明，我是自己去他的git上拉取的，看了下代碼流程，然后自己改動(dòng)，git上的代碼很簡(jiǎn)潔

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

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

　　想要通過(guò)，看看下面官方流程：

　　一般在開發(fā)的時(shí)候，只是發(fā)布到正式了，沒(méi)通過(guò)就是了。在開發(fā)環(huán)境沒(méi)問(wèn)題。

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

　　// 初始化谷歌授權(quán)登錄
　　initClient() {
　　// Client ID and API key from the Developer Console
　　let CLIENT_ID =
　　'你申請(qǐng)的ID',
　　API_KEY = '你申請(qǐng)的密碼',
　　// 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的時(shí)候初始化一下窗口
　　mounted() {
　　// 谷歌登錄授權(quán)初始化
　　gapi.load('client:auth2', that.initClient)
　　},

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