vue調用谷歌授權登錄獲取用戶通訊錄的實現示例
調用谷歌授權,獲取用戶通訊錄信息
業務背景
- 業務端要求,用戶本人填寫信息,推薦到朋友,要求可以導出用戶谷歌郵箱的通訊錄,讓用戶選擇,並且回顯到頁面 ##步驟
- 在谷歌開發者平臺 , 創建一個項目,我的理解是,我們的頁面就是這個項目,要由我們的項目,對谷歌發起授權請求,就類似微信小程序,向官方發起授權,請求昵稱和頭像的這個場景,所以,後面我們的這個項目也要通過谷歌的審核。
- 來到api服務
- 這時候就到瞭我們這個項目的管理後臺
- 然後要創建一個用戶憑據,拿到我們項目的id和key
- 配置下面的域名,也就是讓谷歌知道,用戶從哪個域名發起請求事合理的,可以用本地localhost進行測試。不能用局域網IP
- 然後在API庫中,選擇我們要用的API,我的需求是獲取通訊錄,所以我啟用瞭people API
- 在API庫裡,都會有用法和說明,我是自己去他的git上拉取的,看瞭下代碼流程,然後自己改動,git上的代碼很簡潔
- OAuth 同意屏幕 就是我們的應用在授權時,會跳出如下的界面
- 我的理解就是這個屏幕就是同意屏幕,如果我們的應用沒通過谷歌的驗證,他就會提示我們的應用不安全。
- 要想通過,這邊有流程官方介紹
- 我開發的時候,隻是發佈到正式瞭,沒通過就是瞭。在開發環境沒問題。
- 然後就能拿到數據瞭。 全部的代碼
// 初始化谷歌授權登錄 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) { // 如果已經登錄,就直接彈出窗口 this.listConnectionNames() } else { // 未登錄就調用出登錄授權 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() { // 谷歌登錄授權初始化 gapi.load('client:auth2', that.initClient) },
到此這篇關於vue調用谷歌授權登錄獲取用戶通訊錄的實現示例的文章就介紹到這瞭,更多相關vue谷歌授權登錄獲取通訊錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue實現Google第三方登錄的示例代碼
- 一文搞懂JavaScript中的this綁定規則
- 你知道vue data為什麼是一個函數
- 一篇文中告訴你JS中的"值傳遞"和"引用傳遞"
- Vue3中的ref和reactive響應式原理解析