欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue調(diào)用谷歌授權登錄獲取用戶通訊錄的實現(xiàn)示例

 更新時間:2022年07月14日 15:17:10   作者:slc6666  
本文主要介紹了vue調(diào)用谷歌授權登錄獲取用戶通訊錄的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

調(diào)用谷歌授權,獲取用戶通訊錄信息

業(yè)務背景

  • 業(yè)務端要求,用戶本人填寫信息,推薦到朋友,要求可以導出用戶谷歌郵箱的通訊錄,讓用戶選擇,并且回顯到頁面 ##步驟
  • 在谷歌開發(fā)者平臺 , 創(chuàng)建一個項目,我的理解是,我們的頁面就是這個項目,要由我們的項目,對谷歌發(fā)起授權請求,就類似微信小程序,向官方發(fā)起授權,請求昵稱和頭像的這個場景,所以,后面我們的這個項目也要通過谷歌的審核。
  • 來到api服務

  • 這時候就到了我們這個項目的管理后臺
  • 然后要創(chuàng)建一個用戶憑據(jù),拿到我們項目的id和key

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

  • 我的理解就是這個屏幕就是同意屏幕,如果我們的應用沒通過谷歌的驗證,他就會提示我們的應用不安全。
  • 要想通過,這邊有流程官方介紹

  • 我開發(fā)的時候,只是發(fā)布到正式了,沒通過就是了。在開發(fā)環(huán)境沒問題。
  • 然后就能拿到數(shù)據(jù)了。 全部的代碼
   // 初始化谷歌授權登錄
    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)用出登錄授權
        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調(diào)用谷歌授權登錄獲取用戶通訊錄的實現(xiàn)示例的文章就介紹到這了,更多相關vue谷歌授權登錄獲取通訊錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue $set 給數(shù)據(jù)賦值的實例

    vue $set 給數(shù)據(jù)賦值的實例

    今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue-router 報錯NavigationDuplicated的解決方法

    Vue-router 報錯NavigationDuplicated的解決方法

    這篇文章主要介紹了Vue-router 報錯NavigationDuplicated的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • vue3輸入單號和張數(shù)如何自動生成連號的單號

    vue3輸入單號和張數(shù)如何自動生成連號的單號

    最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點擊確定自動生成固定數(shù)量的連號物流單號,本文重點介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧
    2024-02-02
  • vue復合組件實現(xiàn)注冊表單功能

    vue復合組件實現(xiàn)注冊表單功能

    這篇文章主要為大家詳細介紹了vue復合組件實現(xiàn)注冊表單功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 3種vue組件的書寫形式

    3種vue組件的書寫形式

    這篇文章主要為大家詳細介紹了3種vue組件的書寫形式,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue3中實現(xiàn)歌詞滾動顯示效果

    Vue3中實現(xiàn)歌詞滾動顯示效果

    本文分享如何在Vue 3中實現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實現(xiàn),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • 如何解決this.$refs.form.validate()不執(zhí)行的問題

    如何解決this.$refs.form.validate()不執(zhí)行的問題

    這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • 關于vue里頁面的緩存詳解

    關于vue里頁面的緩存詳解

    今天小編就為大家分享一篇關于vue里頁面的緩存詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vite+Electron快速構建VUE3桌面應用的實現(xiàn)

    Vite+Electron快速構建VUE3桌面應用的實現(xiàn)

    本文主要介紹了Vite+Electron快速構建VUE3桌面應用的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue.js數(shù)據(jù)響應式原理解析

    vue.js數(shù)據(jù)響應式原理解析

    這篇文章主要介紹了vue.js數(shù)據(jù)響應式原理解析,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下
    2022-08-08

最新評論