Express, Create-React-App & Pass twitter

Question

Ich Einrichtung Twitter oauth auf meiner create-react-app Anwendung durch eine Hilfsfunktion (über axios) am vorderen Ende den passport oauth Prozess auf meinem Backend zu initiieren. Ich bin derzeit in der Entwicklung, so hosten ich meinen Express-Server auf Port 3001 und mein Front-End auf Port 3000 mit einem Proxy auf dem Front-End zu Port 3001. Ich habe CORS Berechtigungen über die cors Npm-Paket eingerichtet.

Egal, welche Konfiguration ich versuche, ich kann den OAuth-Prozess von Twitter nicht abschließen. Ich habe versucht, Ports zu wechseln, die gleichen Ports behalten; Ich habe versucht, mein Backend mit express-http-proxy zu proxygen.

ich verwendet habe http://127.0.0.1 statt localhost in meiner beiden Callback-Funktion und meinem ersten API-Aufruf, beide Ports versuchte 3000 und 3001.

Ich bin an dem Punkt, wo ich nicht sicher bin, wo ich falsch liege oder wenn ich die passport-twitter für andere Lösungen aufgeben muss.

In jedem Fall habe ich immer die folgende Fehlermeldung erhalten:

Failed to load https://api.twitter.com/oauth/authenticate? 
oauth_token=alphanumericcoderedactedherebyme: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://localhost:3000' is 
therefore not allowed access. 

Je nach Konfiguration ich versucht habe, bekomme ich als Ursprung null oder http://localhost:3001 oder http://127.0.0.1.

Hinweis: Ich habe mein Backend-API aus anderen Gründen erfolgreich mehrmals aufgerufen, z. B. zum Herstellen einer Verbindung mit Yelp Fusion API. Außerdem verwende ich Middleware, um meine Sitzungsdaten zu protokollieren, und ich kann sehen, dass ich erfolgreich oauth_token und oauth_token_secret von Twitter bekomme. Der Anruf wird auf der nächsten Etappe der oauth Prozess versagt:

[0] *************SESSION MIDDLEWARE*************** 
[0] Session { 
[0] cookie: 
[0] { path: '/', 
[0]  _expires: 2018-01-06T20:20:31.913Z, 
[0]  originalMaxAge: 2678400000, 
[0]  httpOnly: true }, 
[0] 'oauth:twitter': 
[0] { oauth_token: 'alphanumericcoderedactedherebyme', 
[0]  oauth_token_secret: 'alphanumericcoderedactedherebyme' } } 
[0] 
[0] Logged In: 
[0] __________ false 
[0] ********************************************** 

Hier relevante Teile meines Codes -

BACKEND CODE

SERVER.JS

// Dependencies 

const express = require("express"); 
const cors = require("cors"); 
const passport = require('passport'); 

// Initialize Express Server 
const app = express(); 

// Specify the port. 
var port = process.env.PORT || 3001; 
app.set('port', port); 

app.use(passport.initialize()); 
app.use(passport.session()); 

//enable CORS 
app.use(cors()); 

//set up passport for user authentication 
const passportConfig = require('./config/passport'); 

require("./controllers/auth-controller.js")(app); 

// Listen on port 3000 or assigned port 
const server = app.listen(app.get('port'), function() { 
    console.log(`App running on ${app.get('port')}`); 
}); 

PASSPORT.JS

const passport = require('passport'); 
const TwitterStrategy = require('passport-twitter').Strategy; 

passport.use(new TwitterStrategy({ 
    consumerKey: process.env.TWITTER_CONSUMER_KEY, 
    consumerSecret: process.env.TWITTER_CONSUMER_SECRET, 
    callbackURL: process.env.NODE_ENV === 'production' ? process.env.TWITTER_CALLBACK_URL : 'http://localhost:3000/auth/twitter/callback' 
    }, 
    function(accessToken, refreshToken, profile, done) { 
     ...etc, etc, etc 

AUTH-CONTROLLER.JS

const router = require('express').Router(); 
const passport = require('passport'); 

module.exports = function(app) { 
    router.get('/twitter', passport.authenticate('twitter')); 

    router.get('/twitter/callback', 
     passport.authenticate('twitter', { 
      successRedirect: '/auth/twittersuccess', 
      failureRedirect: '/auth/twitterfail' 
     }) 
    ); 

    router.get('/twittersuccess', function(req, res) { 
     // Successful authentication 
     res.json({ user: req.user, isAuth: true }); 
    }) 

    router.get('/twitterfail', function(req, res) { 
     res.statusCode = 503; 
     res.json({ err: 'Unable to Validate User Credentials' }) 
    }) 

    app.use('/auth', router); 
} 

FRONTEND CODE

HELPERS.JS

import axios from 'axios'; 

export function authUser() { 
    return new Promise((resolve, reject) => { 
     axios.get('/auth/twitter', { 
      proxy: { 
       host: '127.0.0.1', 
       port: 3001 
      } 
     }).then(response => { 
      resolve(response.data); 
     }).catch(err => { 
      console.error({ twitterAuthErr: err }) 
      if (err) reject(err); 
      else reject({ title: 'Error', message: 'Service Unavailable - Please try again later.' }); 
     }); 
    }); 
} 

---

---

UPDATE ich festgestellt, dass Passport-Authentifizierung funktioniert auf meinem Backend-Port. Ich habe den Endpunkt direkt im Browser aufgerufen und wurde an die Twitter-Auth weitergeleitet, die dann zu meinem Rückruf den neuen Benutzer zurückgab, der in meinem Schema gespeichert war und in den Sitzungsdaten gespeichert wurde.

Das bedeutet, das Problem liegt in der Verwendung von Create-React-App auf einem anderen Port als mein Backend.

http://127.0.0.1:3001/auth/twittersuccess

"user": { 
    "_id": "redactedbyme", 
    "name": "Wesley L Handy", 
    "__v": 0, 
    "twitterId": "redactedbyme", 
    "favorites": [], 
    "friends": [] 
}, 
"isAuth": true 

Answer 1

ich nicht eine Lösung für das Problem auf der Hand, nach mehreren Entwicklern Beratung und Buchung dieser Frage in anderen Foren finden konnte.

Allerdings ist this blogpassport-twitter nicht für RESTful Apis optimiert. Das gleiche Blog bietet eine hilfreiche Anleitung für die Verwendung von thispassport-twitter-token Strategie zusammen mit react-twitter-authhere

Das Problem betrifft die Tatsache gefunden, dass mit Create-React-App der Anwendung läuft auf zwei verschiedenen Servern, eine für das Front-End und einem anderen für den Rücken. Es gibt keinen Weg um das CORS Problem ohne eine Reihe von Kommunikation zwischen dem Front-End und Back-End, die Pass nicht erlaubt. Passport ist ein großartiges Tool für die Verarbeitung von OAuth auf einem einzelnen Server. In OAuth wird jedoch einiges an Hin- und Her benötigt, was mehr Komplexität erfordert.

Die tutorial by Ivan Vasiljevic ist ein hilfreicher Ausgangspunkt, um diese Komplexität zu verstehen und durchzuarbeiten.