如何在使用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

回答

相关问题