使用Node JS和Angular JS进行Facebook开放认证

时间:2016-05-01 16:11:42

标签: javascript angularjs node.js cors passport-facebook

我是节点和角度编程的新手。我正在尝试使用节点和角度js进行开放式身份验证。浏览器控制台抛出以下错误 -

XMLHttpRequest无法加载https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ...%3A3000%2Fauth%2Ffacebook%2Fcallback& scope = email& client_id =。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://localhost:3000”访问。

我使用了passport-facebook和护照模块进行开放式身份验证。

以下是代码:

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

应用程序/路由/ 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);

            });
    }));
};

角度控制器。处理Facebook登录按钮的点击事件。

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();
        }         
    }
}])

请帮助解决此错误。

2 个答案:

答案 0 :(得分:0)

您是否将Facebook的申请注册为有效客户?如果是这样,请确保您的重定向uri已注册为FB的有效重定向uri。

谢谢你, 索玛。

答案 1 :(得分:0)

Facebook版权策略要求用户登录Facebook并允许您的应用程序"允许访问您的Facebook帐户信息。使用XHR无法做到这一点,因为如果用户尚未登录,用户如何输入他们的Facebook凭据登录Facebook?用户如何批准您的Facebook" app"请求是否通过XHR发送请求?

这适用于使用OAuth或OpenID的所有Passport策略。 用户的浏览器必须直接转到身份验证提供商的网站,以便他们可以A)登录身份验证提供商或B)批准您的权限请求您的申请。一旦用户完成该操作,auth提供商(在您的情况下为Facebook)将使用某种令牌将用户的浏览器重定向到您的应用程序的端点,然后您的应用程序将使用该令牌从身份验证提供程序(如电子邮件地址,全名等)