Comment structurer correctement l'application vue/node lors de l'utilisation d'instagram api

Question

J'ai donc une application qui nécessite de se connecter à l'API instagram, de récupérer des données utilisateur et d'afficher ces données.

Mon application doit fonctionner comme ceci: l'utilisation se fait sur une page où il clique sur un bouton "connecter". Ils sont ensuite connectés à l'API instagram, et REMAIN sur la même page. La page est ensuite remplie avec leurs informations instagram actuelles.

Actuellement, j'ai un projet qui est structuré comme celui-ci:

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

je suis tombé sur un petit hoquet en suivant this qui est juste un tutoriel sur la façon de settup auth utilisateur avec nœud/instagram api.

Dans mon projet de serveur, j'ai 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) 
    }) 
} 

Si je vais à mon port du serveur: http://localhost:8081/auth/instagram je peux voir que la connexion à INSTAGRAM œuvres, et Im redirigés vers la page de confirmation, le code est affiché comme prévu.

MON NUMÉRO/QUESTION est maintenant ... comment puis-je le relier à mon application client? Maintenant que mon serveur dispose de ces données, comment renvoyer ces données à mon application client?

Mon élément est simple en ce moment:

<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> 

Ai-je besoin de mettre en place un rendu côté serveur vue? Existe-t-il une façon plus simple de faire en sorte que mon application cliente surveille les données au niveau du port d'authentification/confirmation sur mon application serveur? J'espère que c'est clair. Im essayant de rester aussi concis que possible.

Answer 1

Vous n'envoyez pas les données du serveur au client, mais faites plutôt une demande du client au serveur qui répond alors avec les données. Cependant, quelques étapes supplémentaires sont nécessaires.

Quelque chose comme ceci:

1. clics clients se connectent
2. client est redirigé vers la page auth
3. client authentifie avec Instagram
4. client est redirigé vers votre site avec le code = xxxxxxxx dans la URL
5. Le serveur utilise ce code pour obtenir un jeton d'accès de l'API Instagram
6. Le serveur enregistre l'ac CESS jeton pour cet utilisateur spécifique
7. Server peut désormais effectuer des requêtes à l'API Instagram avec ce jeton d'accès
8. client peut maintenant demander au serveur pour toutes les données et l'afficher sur la page