vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例
調(diào)用谷歌授權(quán),獲取用戶通訊錄信息
業(yè)務(wù)背景
- 業(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)目也要通過谷歌的審核。
- 來到api服務(wù)

- 這時(shí)候就到了我們這個(gè)項(xiàng)目的管理后臺(tái)
- 然后要?jiǎng)?chuàng)建一個(gè)用戶憑據(jù),拿到我們項(xiàng)目的id和key

- 配置下面的域名,也就是讓谷歌知道,用戶從哪個(gè)域名發(fā)起請(qǐng)求事合理的,可以用本地localhost進(jìn)行測(cè)試。不能用局域網(wǎng)IP
- 然后在API庫(kù)中,選擇我們要用的API,我的需求是獲取通訊錄,所以我啟用了people API
- 在API庫(kù)里,都會(huì)有用法和說明,我是自己去他的git上拉取的,看了下代碼流程,然后自己改動(dòng),git上的代碼很簡(jiǎn)潔
- OAuth 同意屏幕 就是我們的應(yīng)用在授權(quán)時(shí),會(huì)跳出如下的界面

- 我的理解就是這個(gè)屏幕就是同意屏幕,如果我們的應(yīng)用沒通過谷歌的驗(yàn)證,他就會(huì)提示我們的應(yīng)用不安全。
- 要想通過,這邊有流程官方介紹

- 我開發(fā)的時(shí)候,只是發(fā)布到正式了,沒通過就是了。在開發(fā)環(huá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)示例的文章就介紹到這了,更多相關(guān)vue谷歌授權(quán)登錄獲取通訊錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法
這篇文章主要介紹了Vue-router 報(bào)錯(cuò)NavigationDuplicated的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02
vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能
這篇文章主要為大家詳細(xì)介紹了vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
如何解決this.$refs.form.validate()不執(zhí)行的問題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vite+Electron快速構(gòu)建VUE3桌面應(yīng)用的實(shí)現(xiàn)
本文主要介紹了Vite+Electron快速構(gòu)建VUE3桌面應(yīng)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08

