web-dev-qa-db-de.com

Domänenübergreifende Probleme mit Angular/Node/Express/Passport - Aktivieren Sie die Facebook-Authentifizierung von CORS Passport

Es ist zwei Tage her und eine Million Versuche, CORS zu aktivieren, wenn Sie versuchen, einen Benutzer über Passport in NodeJS/Express bei Facebook zu authentifizieren.

Der Fehler, den ich in Chrome bekomme, ist folgender:

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%3A8080%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=598171076960591. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access. 

Die Routen, die ich benutze, sind so einfach:

// =====================================
// FACEBOOK ROUTES =====================
// =====================================
// route for facebook authentication and login

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

// handle the callback after facebook has authenticated the user
app.get('/auth/facebook/callback',
    passport.authenticate('facebook', {
        successRedirect : '/home',
        failureRedirect : '/login'
    }));

So wird die Route in meiner angleJS-Datei aufgerufen (ich habe auch versucht, withCredentials: true einzustellen):

$http.get('/auth/facebook')
    .success(function(response) {

    }).error(function(response){

    });

Ich habe ein Dutzend Lösungen ausprobiert, die ich hier auf StackOverflow und anderen Foren gefunden habe.

  1. Ich habe versucht, dies auf den Routen vor den Routen in den Routen.js-Dateien hinzuzufügen:

    app.all('*', function(req, res, next) {
      res.header('Access-Control-Allow-Origin', '*');
      res.header("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
      res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
      res.header('Access-Control-Allow-Credentials', true);
    
      if ('OPTIONS' == req.method) {
          res.send(200);
      } else {
          next();
      }
    });
    
  2. Ich habe versucht, dies auf der server.js-Datei hinzuzufügen (beachten Sie, dass ich den Header in setHeader geändert habe, aber ich habe beide versucht):

    app.use(function(req, res, next) {
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
      res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
      res.setHeader('Access-Control-Allow-Credentials', true);
    
      if ('OPTIONS' == req.method) {
        res.send(200);
      } else {
        next();
      }
    
     });
    
     require('./app/routes.js')(app, passport);
    
  3. Ich habe versucht, dies in meiner app.js-Datei (angleJS-Konfigurationen) hinzuzufügen:

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.withCredentials = true;
    

Ich weiß sowieso nicht, was ich sonst noch tun soll. Alles, was ich online gefunden habe, hat nicht funktioniert. Gibt es eine Chance, dass ich mit AngularJS Routing etwas zu tun habe? Ich sehe keinen Grund, warum dies eine Rolle spielen würde, aber ich hatte keine Ahnung.

Meine Situation ist dieser Situation sehr ähnlich: Angular/Node/Express/Passport - Probleme beim Verbinden mit Facebook (CORS)

Danke im Voraus!

25
Larissa Leite

Ich hatte dieses Problem und war fast an dem Punkt angelangt, an dem ich überzeugt war, dass ich keine Lösung finden konnte, aber ein einfaches Tutorial noch einmal betrachtet ( http://mherman.org/blog/2013/11/10/social-authentication- with-passport-dot-js/ ) hat es für mich gelöst. Ich habe versucht, einen API-Aufruf von Angular an Node.js auszuführen, der Ihnen immer diese XMLHttpRequest-Fehler bringt, ungeachtet dessen, was Sie auf dem Server konfigurieren, CORS oder nicht! CORS ist nicht das Thema. Wenn Sie Ihre Chrome-Netzwerkkonsole geöffnet haben, werden Sie feststellen, dass Ihre Anfrage an Google oder Facebook oder die Website eines Drittanbieters außerhalb Ihrer Kontrolle liegt. Sie wurde durch eine 302-Weiterleitung ausgelöst, die an das Gerät gesendet wurde Ihr Frontend, etwas, das von Angular.js oder einem anderen Framework nicht gesteuert werden kann. Daher können Sie dieser Anforderung ohnehin nicht wirklich "Zugriffskontrolle erlauben Ursprung" hinzufügen.

Die Lösung besteht einfach darin, die Schaltfläche oder den Text "Anmelden mit _____" zu einem LINK zu machen. Eine wörtliche <a href="/auth/facebook"></a>-Verknüpfung. Das ist es.

Natürlich traf ich dabei auch auf viele andere Stolpersteine ​​und Gotchas. Ich habe versucht, die Standard-Middleware nicht für passport.authenticate ('facebook') zu verwenden, aber ich habe versucht, sie in eine function(req, res, next){ ... } zu packen. Ich dachte, das würde etwas tun, aber es tut nichts.

28
Gary

Ich hatte auch ein Problem mit Facebook-Login und -Cors, aber nicht mit Passport in NodeJS/Express, . Meine Anwendung ist Java (Spring MVC) + eckig. Ich habe es geschafft, das Problem zu umgehen, das meine anfängliche fb-Login-Funktion geändert hat: 

$scope.loginWithFacebook = function () {
    $http({
        method: 'GET',
        url: 'auth/facebook',
        dataType: 'jsonp'
    }).success(function(data){
        console.log('loginWithFacebook success: ', data);
    }).error(function(data, status, headers, config) {
        console.log('loginWithFacebook error: ', data);
    });
}

mit

$scope.loginWithFacebook = function() {
    $window.location = $window.location.protocol + "//" + $window.location.Host + $window.location.pathname + "auth/facebook";
};

Ich hoffe es hilft!

3
Horia Ion

Erstellen Sie ein HTML-Tag, um stattdessen die GET-Anforderung auszuführen. Facebook lässt keine XMLHttpsRequests zu.

So: <a href="http://localhost:8080/auth/facebook">sign in with facebook</a>

0
Matt Pengelly