Facebook Открытая аутентификация с использованием Node JS и Angular JS

Я новичок в узловом и угловом программировании. Я пробую открытую аутентификацию с помощью node и angular 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» отсутствует на запрошенном ресурсе. Origin ‘http://localhost:3000» поэтому доступ запрещен.

Я использовал passport-facebook и модуль passport для открытой аутентификации.

Ниже приведен код:

сервер.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 / routes / 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 ответа

  1. Зарегистрировали ли вы свое приложение на Facebook в качестве действительного клиента? Если это так, пожалуйста, убедитесь, что ваш uri перенаправления зарегистрирован как действительный uri перенаправления с FB.

    Спасибо!,
    Сома.

  2. Стратегия Facebook auth требует, чтобы пользователь вошел в Facebook и разрешил вашему «приложению» доступ к информации вашей учетной записи Facebook. Это не может быть сделано с помощью XHR, потому что как пользователь вводит свои учетные данные Facebook для входа в Facebook, если пользователь еще не вошел в систему? Как бы пользователь одобрил разрешения, которые запрашивает ваше «приложение» Facebook, если запрос отправляется через XHR?

    Это относится ко всем паспортным стратегиям, использующим OAuth или OpenID. Браузер пользователя должен перейти непосредственно на сайт поставщика проверки подлинности, чтобы он мог A) войти в систему поставщика проверки подлинности или B) утвердить разрешения, запрашиваемые в приложении. Как только пользователь сделает это, поставщик аутентификации (в вашем случае Facebook) перенаправит браузер пользователя обратно на конечную точку вашего приложения с помощью какого-то маркера, который приложение будет использовать для запроса информации от поставщика аутентификации (например, адрес электронной почты, полное имя и т.д.