ノードJSと角度JSを使用したFacebookオープン認証

Question

私はノードと角度プログラミングを初めて利用しています。私はノードと角度jを使ってオープン認証を試みています。ブラウザのコンソールは、次のようなエラーがスローされます -

XMLHttpRequestが= https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ...％3A3000％2Fauth％2Ffacebook％2Fcallback &範囲=メール&のclient_idをロードすることはできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:3000'はアクセスできません。

私は、オープン認証にpassport-facebookとpassportモジュールを使用しています。

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 /ルート/ 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(); 
     }   
    } 
}]) 

このエラーを修正する際にお役立てください。

Answer 1

Facebookにアプリケーションを有効なクライアントとして登録しましたか？その場合は、リダイレクトURIがFBで有効なリダイレクトURIとして登録されていることを確認してください。

ありがとう、 Soma。

Answer 2

Facebookの認証戦略では、ユーザーがFacebookにログインし、Facebookアカウント情報にアクセスするための「アプリ」権限が必要です。これはXHRではできません。なぜなら、ユーザーがまだログインしていない場合、Facebookのログイン情報を入力してFacebookにログインする方法があるからです。リクエストがXHR経由で送信された場合、Facebookの「アプリ」がリクエストしているパーミッションはどのようにユーザーが承認しますか？

これは、OAuthまたはOpenIDを利用するすべてのPassport戦略に適用されます。 ユーザーのブラウザは、A）認証プロバイダにログインするか、B）アプリケーションで要求しているアクセス許可を承認できるように、認証プロバイダのサイトに直接移動する必要があります。ユーザーが完了すると、認証プロバイダー（あなたのFacebookの場合）は、ユーザーのブラウザーをアプリケーションのエンドポイントにリダイレクトしてから、アプリケーションが認証プロバイダーからの情報を要求するために使用する何らかのトークン（電子メールアドレス、氏名など）