angularjs - part - Problemas angulares/de nodo/expreso/pasaporte entre dominios: habilitar la autenticación de CORS Passport en Facebook

spring security angular 2

Question

Han pasado dos días y un millón intenta habilitar CORS cuando se intenta autenticar a un usuario con Facebook usando Passport en NodeJS / Express.

El error que recibo en Chrome es este:

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. 

Las rutas que utilizo son tan simples como eso:

// =====================================
// 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''
    }));

Así es como se llama a la ruta en mi archivo angularJS (también he intentado configurar withCredentials: true):

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

    }).error(function(response){

    });

He probado una docena de soluciones que encontré aquí en StackOverflow y otros foros.

1. Intenté agregar esto antes de mis rutas en los archivos route.js:

   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. Intenté agregar esto en el archivo server.js (tenga en cuenta que cambié el encabezado a setHeader pero probé ambos):

   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. Intenté agregar esto en mi archivo app.js (configuraciones angularJS):

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

De todos modos, no sé qué más hacer. Todo lo que encontré en línea no funcionó. ¿Hay alguna posibilidad de que tenga algo que ver conmigo utilizando AngularJS Routing? No veo ninguna razón por la que esto importe, pero me quedé sin suposiciones.

Mi situación es muy similar a esta: Angular / Nodo / Express / Pasaporte - Problemas al conectarse a Facebook (CORS)

¡Gracias por adelantado!

Answer 1

Cree una etiqueta html para hacer la solicitud GET en su lugar, Facebook no permite XMLHttpsRequests.

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

Answer 2

También tuve un problema con el inicio de sesión de Facebook y los cors, pero no con Passport en NodeJS / Express, mi aplicación es java (spring mvc) + angular. Me las arreglé para pasar el problema modificando mi función de inicio de sesión de fb inicial:

$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);
    });
}

con

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

¡Espero eso ayude!

Answer 3

Tenía este problema y casi llegué al punto en el que estaba convencido de que no podía encontrar una solución, pero volvía a ver un sencillo tutorial ( http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/ ) lo resolvió por mí. Estaba intentando hacer una llamada a la API de Angular a Node.js, que siempre te traerá esos errores XMLHttpRequest a pesar de lo que configures en el servidor, ¡CORS o no! CORS no es el elemento fijo: si abrió su consola de red Chrome, encontrará que su solicitud a Google o Facebook o cualquier sitio de terceros está fuera de su control para cambiar, se activó a partir de un redireccionamiento 302 que se envió a Su interfaz, algo que Angular.js o cualquier otro marco no tiene poder de control, por lo que no puede agregar "Control de acceso, permitir el origen" a esa solicitud de todos modos.

La solución es simplemente hacer que el botón o texto que dice "Iniciar sesión con _____" sea un ENLACE. Un enlace literal <a href="/auth/facebook"></a> . Eso es.

Por supuesto, también me encontré con muchos otros obstáculos y trampas en el proceso. Intenté no usar el middleware predeterminado para passport.authenticate (''facebook''), pero intenté envolverlo en una function(req, res, next){ ... } , pensando que haría algo, pero no .