最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

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

業(yè)務背景

  • 業(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)時,會跳出如下的界面

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

  • 我開發(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)示例的文章就介紹到這了,更多相關(guān)vue谷歌授權(quán)登錄獲取通訊錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue正則表達式限制input的輸入范圍

    Vue正則表達式限制input的輸入范圍

    我們有時需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達式限制文本框只能輸入數(shù)字、小數(shù)點、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧
    2023-12-12
  • vue和better-scroll實現(xiàn)列表左右聯(lián)動效果詳解

    vue和better-scroll實現(xiàn)列表左右聯(lián)動效果詳解

    這篇文章主要介紹了vue和better-scroll實現(xiàn)列表左右聯(lián)動效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • Vue中插入HTML代碼的方法

    Vue中插入HTML代碼的方法

    這篇文章主要介紹了Vue中插入HTML代碼的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue中的row布局靠右對齊

    vue中的row布局靠右對齊

    這篇文章主要介紹了vue中的row布局靠右對齊,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue+element+electron仿微信實現(xiàn)代碼

    vue+element+electron仿微信實現(xiàn)代碼

    這篇文章主要介紹了vue+element+electron仿微信實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • Vue封裝localStorage設(shè)置過期時間的示例詳解

    Vue封裝localStorage設(shè)置過期時間的示例詳解

    這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下
    2024-06-06
  • vue腳手架安裝以及安裝失敗問題解決辦法

    vue腳手架安裝以及安裝失敗問題解決辦法

    我們通常會用到腳手架vuecli創(chuàng)建項目,此時需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問題的解決辦法,需要的朋友可以參考下
    2022-07-07
  • VSCode插件安裝完成后的配置(常用配置)

    VSCode插件安裝完成后的配置(常用配置)

    這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • vue在html標簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比

    vue在html標簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比

    這篇文章主要給大家介紹了關(guān)于vue在html標簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下
    2023-03-03
  • Vue+FormData+axios實現(xiàn)圖片上傳功能的項目實戰(zhàn)

    Vue+FormData+axios實現(xiàn)圖片上傳功能的項目實戰(zhàn)

    本文主要介紹了Vue+FormData+axios實現(xiàn)圖片上傳功能的項目實戰(zhàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-06-06

最新評論

云浮市| 洛扎县| 博白县| 丘北县| 涞水县| 阳曲县| 门源| 沙田区| 临洮县| 临高县| 祁门县| 五台县| 华亭县| 安乡县| 邳州市| 赤城县| 博白县| 德清县| 甘德县| 合水县| 西华县| 山西省| 宝丰县| 明星| 都江堰市| 山阳县| 晋江市| 镇原县| 乡宁县| 泌阳县| 区。| 德清县| 徐闻县| 穆棱市| 壤塘县| 门源| 乐安县| 资兴市| 石首市| 靖远县| 江北区|