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

Question

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

我的应用程序需要像这样工作：在他/她单击“连接”按钮的页面上使用。然后将它们连接到 instagram api，并保持在同一页面上。然后用他们当前的 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 服务端渲染吗？有没有更简单的方法让我的客户端应用程序在我的服务器应用程序上的身份验证/确认端口监视数据？希望这很清楚。我尽量保持简洁。

Answer 1

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

类似这样的：

1. 客户端点击连接
2. 客户端被重定向到认证页面
3. 客户通过 Instagram 进行身份验证
4. 客户端被重定向回您的网站，网址中包含 code=xxxxxxxx
5. 服务器使用该代码从 Instagram API 获取访问令牌
6. 服务器保存此特定用户的访问令牌
7. 服务器现在可以使用该访问令牌查询 Instagram API
8. 客户端现在可以向服务器请求任何数据并将其显示在页面上