2016-05-01 13 views
0

Ich bin neu in der Knoten- und Winkelprogrammierung. Ich probiere offene Authentifizierung mit Knoten und eckigen js aus. Die Browser-Konsole führt den folgenden Fehler -Facebook Open Authentication mit Knoten JS und Angular JS

XMLHttpRequest nicht https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% laden ...% 3A3000% 2Fauth% 2Ffacebook% 2Fcallback & scope = E-Mail & client_id =. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Ursprung 'http://localhost:3000' ist daher nicht erlaubt.

Ich habe Pass-Facebook und Pass-Modul für die offene Authentifizierung verwendet.

Unten ist der Code:

server.js

var auth = require('./app/routes/auth'); 

passport.serializeUser(function(user, done) { 
    done(null, user.id); 
}); 

// used to deserialize the user 
passport.deserializeUser(function(id, done) { 
    User.findById(id, function(err, user) { 
     done(err, user); 
    }); 
}); 
app.use('/auth', auth); 

app/Routen/auth.js

var express = require('express'), 
    passport = require('passport'), 
    router = express.Router(), 
    mongoDB = require('mongoDB').MongoClient, 
    GoogleStrategy = require('passport-google-oauth').OAuth2Strategy; 

require('../configs/passport')(passport, mongoDB); 

router.post('/login', 
    passport.authenticate('local', { 
    successRedirect: '/profile', 
    failureRedirect: '/user/loginFailure' 
    }) 
); 

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

    // handle the callback after facebook has authenticated the user 
router.get('/facebook/callback', 
    passport.authenticate('facebook', 
    { 
     successRedirect : '/profile', 
     failureRedirect : '/' 
     } 
)); 

router.get('/loginFailure', function(req, res){ 
    res.send("Login Failed.."); 
}); 

module.exports = router; 


var FacebookStrategy = require('passport-facebook').Strategy; 
var fbConfig = require("./facebook.json"); 

module.exports = function(passport){ 

    passport.use(new FacebookStrategy({  
     clientID  : fbConfig.appID, 
     clientSecret : fbConfig.appSecret, 
     callbackURL  : fbConfig.callbackURL 

    },  
    function(token, refreshToken, profile, done) {   
     process.nextTick(function() {    
        var newUser = {}; 
        newUser.facebook.id = profile.id; 
        newUser.facebook.token = token; 
        newUser.facebook.name = profile.name.givenName + ' ' + profile.name.familyName; 
        newUser.facebook.email = profile.emails[0].value; 
         return done(null, newUser); 

      }); 
    })); 
}; 

Winkelregler. behandelt Click-Ereignis für Facebook-Login-Schaltfläche.

app.controller("authCtrl",["$scope", '$resource', function($scope, $resource){ 
    $scope.userid = ""; 
    $scope.password = ""; 

    $scope.authenticate = function(type){ 
     if(type === 'local'){ 
      var login = $resource('http://localhost:3000/auth/login'); 
      login.save({username: $scope.userid, password: $scope.password }); 
     }   
     else if(type === 'facebook'){ 
      var login = $resource('http://localhost:3000/auth/facebook'); 
      login.get(); 
     }   
    } 
}]) 

Bitte helfen Sie diesen Fehler zu beheben.

Antwort

0

Haben Sie Ihre Bewerbung bei Facebook als gültigen Kunden registriert? Wenn dies der Fall ist, vergewissern Sie sich, dass Ihr Weiterleitungs-URI als gültiger Weiterleitungs-URI mit dem FB registriert ist.

Vielen Dank, Soma.

+0

ja ich habe die Anwendung registriert. Die appID, appSecret und die Umleitungs-URL im Feld UAuth-Weiterleitungs-URIs der Registerkarte Erweitert. So ist es richtig gemacht? – Navaneeth

+0

Ja. Details finden Sie unter diesem Link [link] (https://auth0.com/docs/connections/social/facebook). Bitte ignorieren Sie den Auth0-Teil des Abschnitts im angegebenen Link. Der Fehler, den Sie erhalten, hängt mit der Cross-Origin-Ressourcenfreigabe (kurz CORS) zusammen, die nicht auftreten sollte, wenn Sie die Anwendung mit dem FB registrieren. –

+0

ja. Genau so habe ich es gemacht. Und wenn ich auf die URL des Fehlers klicke - https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%...%3A3000%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=clientID. Es gab mir die Authentifizierungszustimmungsseite und loggte mich erfolgreich ein. – Navaneeth

0

Die Facebook-Authentifizierungsstrategie erfordert, dass der Benutzer bei Facebook angemeldet ist und Ihrer "App" -Erlaubnis erlaubt hat, auf Ihre Facebook-Kontoinformationen zuzugreifen. Dies kann nicht mit einem XHR gemacht werden, denn wie würde der Benutzer seine Facebook-Zugangsdaten eingeben, um sich bei Facebook anzumelden, wenn der Benutzer nicht bereits angemeldet ist? Wie würde der Benutzer die Berechtigungen genehmigen, die Ihre Facebook "App" anfordert, wenn die Anfrage über XHR gesendet wird?

Dies gilt für alle Passport-Strategien, die OAuth oder OpenID verwenden. Der Browser des Benutzers muss direkt zur Website des Authentifizierungsanbieters gehen, damit er entweder A) sich an den Authentifizierungsanbieter anmelden kann oder B) die von Ihnen in der Anwendung angeforderten Berechtigungen genehmigen kann. Sobald der Nutzer dies getan hat, leitet der Auth-Provider (in Ihrem Fall Facebook) den Browser des Nutzers zurück zum Endpunkt Ihrer Anwendung mit einer Art Token, die Ihre Anwendung dann verwenden wird, um Informationen vom Auth-Provider anzufordern (wie E-Mail-Adresse, vollständiger Name, etc.)