如何在使用instagram api時正確構建vue/node app

因此，我有一個應用程序需要使用連接到instagram api，獲取用戶數據並顯示該數據。如何在使用instagram api時正確構建vue/node app

我的應用程序需要這樣工作：使用是在他/她點擊「連接」按鈕的頁面上。然後將它們連接到instagram api，然後連接到同一頁面上的REMAIN。該頁面將填充當前的instagram信息。

目前，我有構造這樣一個項目：

myapp 
--client // All Vue.js files in here 
--server // All server endpoints here. ALSO WHERE INSTAGRAM CONNECTION HAPPENS

我而以下this這僅僅是如何settup與節點/ Instagram的API，用戶身份驗證的教程跑進一個小嗝。

在我的服務器項目，我有一個router.js：

const AuthenticationController = require('./controllers/AuthenticationController') 
const AuthenticationControllerPolicy = require('./policies/AuthenticationControllerPolicy') 
const config = require('./config/config.js') 

module.exports = (app) => { 
    app.post('/register', AuthenticationControllerPolicy.register, AuthenticationController.register) 
    app.post('/login', AuthenticationController.login) 

    //BELOW IS TAKEN FROM TUTORIAL MENTIONED ABOVE. 
    app.get('/auth/instagram', function (request, response) { 
    console.log(`REDIRECT URI ${config.instagram.authURL}`) 
    response.redirect(config.instagram.authURL) 
    }) 

    app.get('/auth/confirmed', function (request, response) { 
    console.log(`ARE WE IN HERE????? ${request.query.code}`) 
    response.send(request.query.code) 
    }) 
}

如果我去我的服務器端口：http://localhost:8081/auth/instagram我可以看到連接到Instagram的作品，和Im重定向到確認頁面，並代碼按預期顯示。

我的問題/問題現在......我怎麼連這回我的客戶端應用程序？現在我的服務器有這些數據，我該如何將這些數據發送回我的客戶端應用程序？

我的部件，現在很簡單：

<template> 
    <v-container> 
    <v-layout> 
     <v-flex xs6> 
     <panel title="Connect To Instagram"> 
      <form 
      name="ig-connect-form" 
      <v-btn 
       dark 
       class="red lighten-1" 
       @click="connect"> 
       Connect 
      </v-btn> 
      </form> 
     </panel> 
     </v-flex> 
    </v-layout> 
    </v-container> 
</template> 

<script> 
import AuthenticationService from '@/services/AuthenticationService' 

export default { 
    data() { 
    return { 
     igusername: '', 
     password: '', 
     error: null 
    } 
    }, 
    methods: { 
    async connect() { 
     try { 
     // This triggers the connection on my server.... how do I get data back from different server route now?? 
     console.log(response) 
     } catch (error) { 
     this.error = error.response.data.error 
     } 
    } 
    } 
} 
</script> 

<style scoped> 
</style>

我是否需要設立VUE服務器端渲染？有沒有更簡單的方法讓我的客戶端應用程序在我的服務器應用程序的auth/confirmation端口上查看數據？希望這是明確的。即時嘗試保持儘可能簡潔。

來源

2017-10-19 mufc

您不會將數據從服務器發送到客戶端，而是從客戶端向服務器發送請求，然後用數據迴應。但是，需要執行幾個步驟。

事情是這樣的：

客戶端點擊連接
客戶端將被重定向到身份驗證頁面
客戶端與Instagram的
客戶端重新回到您的網站與代碼= XXXXXXXX認證URL
服務器使用該代碼從Instagram API獲取訪問令牌
服務器將ac塞斯令牌此特定用戶現在
服務器可以查詢與該訪問令牌
客戶端的Instagram的API現在可以要求任何數據的服務器，並顯示在頁面上

來源

2017-10-19 12:36:15 pate

謝謝！...問題....第3步，那麼如果它從服務器發生，我如何顯示auth步到用戶？例如，目前當我點擊從本地主機連接按鈕：8080 /控制檯（客戶端）沒有重定向發生。但是當我去localhost：8081/auth/instagram（服務器）時，我正確地重定向到localhost：8080/console？代碼（客戶端）。表單服務器日誌我可以看到客戶端正在服務器...但客戶端本身沒有更新。也許我需要添加一些處理顯示控制檯/ *通配符？ – mufc

如何在使用instagram api時正確構建vue/node app

回答

相關問題