Question

所以我有一个应用程序需要使用连接到instagram api，获取用户数据和显示该数据。

我的应用程序需要像这样工作：在他/她单击“连接”按钮的页面上使用。然后将它们连接到instagram api，并在同一页面上保留REMAIN。然后使用当前的Instagram信息填充页面。

目前，我的项目结构如下：

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

我在跟随this时遇到了一点打嗝，这只是关于如何使用node / 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工作，我重定向到确认页面，代码按预期显示。

我的问题/问题现在......如何将其连接回我的客户端应用程序？现在我的服务器有这些数据，如何将该数据发送回我的客户端应用程序？

我的组件现在很简单：

<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 /确认端口上监视数据？希望这很清楚。我尽量保持简洁。

Answer 1

您不会将数据从服务器发送到客户端，而是从客户端向服务器发出请求，然后服务器回复数据。但是，还需要几个步骤。

这样的事情：

客户点击连接
客户端被重定向到身份验证页面
客户端使用Instagram进行身份验证
客户端将重定向回您的网站，其中包含网址
服务器使用该代码从Instagram API获取访问令牌
服务器保存此特定用户的访问令牌
服务器现在可以使用该访问令牌对Instagram API进行查询
客户现在可以向服务器询问任何数据并将其显示在页面上

如何在使用instagram api时正确构建vue / node应用程序

1 个答案: