vue -authenticate Twitter auth, res. json () не отвечает клиенту после получения access_token и всплывающее окно не закрывается - PullRequest
Новая
       86

vue -authenticate Twitter auth, res. json () не отвечает клиенту после получения access_token и всплывающее окно не закрывается

0 голосов
/ 20 июня 2020

Я работал над созданием приложения twitter emu и пытался получить токен доступа пользователя и секрет токена доступа для публикации твитов. Мне удалось получить Twitter access_token и access_token_secret в моем приложении express. но всплывающее окно не закрывается, и ответ JSON от моего express приложения не возвращается клиенту. Ответ JSON отображается во всплывающем окне (http://127.0.0.1: 4000 / auth / twitter / callback? Oauth_token = xxxxxxxxxx & oauth_verifier = xxxxxxxxxxxxxxxx ), но клиент не отвечает и всплывающее окно не закрывается. Ответ должен быть возвращен на http://127.0.0.1: 8080 или http://localhost: 8080

Я отредактировал пример сервера. js of vue -authenticate, чтобы получить access_token и accss_token_secret потому что мне не нужно сохранять токен запроса Twitter. Помогите, пожалуйста, как я могу получить ответ JSON обратно своему клиенту.

Ma c OS10.15.4
Chrome: 83.0 .4103.61
vue: 2.6.12
URL-адрес клиентского приложения: http://localhost:8080/#/auth/OpenAuth, npm run dev
URL-адрес приложения express4: http://127.0.0.1:4000/auth/twitter и http://127.0.0.1:4000/auth/twitter/callback
URL-адрес обратного вызова приложения Twitter ( на сайте разработчика Twitter) установлен как http://127.0.0.1:4000/auth/twitter/callback

Вот это serever. js Я изменил аутентификацию twitter, как показано ниже.

Я добавил функцию обратного вызова для twitter. первая часть для токена запроса. 

function twitterAuth(req, res) {
  if (!req.body.oauth_token) {
    oauthService.getOAuthRequestToken({ oauth_callback: req.body.redirectUri }, function (error, oauthToken, oauthTokenSecret, results) {
      if (error) {
        res.status(500).json(error)
      } else {
        // **** this response is not responded to the client too ***
        res.json({
          oauth_token: oauthToken,
          oauth_token_secret: oauthTokenSecret
        })
      }
  } 
}

app.get('/auth/twitter/callback', function(req, res, next){
  let oauth_token = req.query.oauth_token
  let oauth_verifier = req.query.oauth_verifier

  if (req.query.oauth_token) {
    oauthService.getOAuthAccessToken(oauth_token, null, oauth_verifier, function (error, oauthAccessToken, oauthAccessTokenSecret, results) {
      if (error) {
        res.status(500).json(error)
      } else {
        var verifyCredentialsUrl = 'https://api.twitter.com/1.1/account/verify_credentials.json'
        var parameters = {
          oauth_consumer_key: config.auth.twitter.clientId,
          oauth_token: oauthAccessToken,
          oauth_nonce: ('vueauth-' + new Date().getTime()),
          oauth_timestamp: timestamp.now(),
          oauth_signature_method: 'HMAC-SHA1',
          oauth_version: '1.0'
        }

        var signature = oauthSignature.generate('GET', verifyCredentialsUrl, parameters, config.auth.twitter.clientSecret, oauthAccessTokenSecret)

        Axios.get('https://api.twitter.com/1.1/account/verify_credentials.json', { 
          headers: {
            Authorization:  'OAuth ' +
              'oauth_consumer_key="' + config.auth.twitter.clientId + '",' +
              'oauth_token="' + oauthAccessToken + '",' +
              'oauth_nonce="' + parameters.oauth_nonce + '",' +
              'oauth_timestamp="' + parameters.oauth_timestamp + '",' +
              'oauth_signature_method="HMAC-SHA1",'+
              'oauth_version="1.0",' +
              'oauth_signature="' + signature + '"'
          }
        }).then(function (response) {
          console.log('FINISHED!!')
          // *********
          // This json is displayed onto the popup window and never sent back to the client function.
          // *********
          res.json({
            access_token: oauthAccessToken,
            access_token_secret: oauthAccessTokenSecret,
            profile: response.data
          })
        }).catch(function (err) {
          console.log(err.response.data.errors)
          res.status(500).json(err.response.data.errors)
        })
      }
    })
  } else {
    next(new Error("you're not supposed to be here."));
  }
});

Код клиента здесь. 

import Vue from 'vue'
import VueAxios from 'vue-axios'
import VueAuthenticate from 'vue-authenticate'
import axios from 'axios'

Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
  tokenName: 'access_token',
  baseUrl: 'http://127.0.0.1:4000', // Your API domain
  providers: {
    twitter: {
      clientId: 'xxxxxxxxxxxxxxx',
      url: '/auth/twitter',
      redirectUri: 'http://127.0.0.1:4000/auth/twitter/callback'
    }
  }
})

export default {
  methods: {
    authenticate: function (provider) {
      this.$auth.authenticate(provider).then(function (authResponse) {
        // ****** not reached here *****
        console.log('Auth Success!!')
        console.log('Provider: ', provider)
        console.log('authResponse: ', authResponse)
        // Execute application logic after successful social authentication
      })
    }
  }
}
...