Node API – 如何将Facebooklogin链接到Angular前端?

重写这个问题更清楚。

我已经使用passport-facebook在我的网站上处理与Facebook的login。

我的前端是在Angular,所以我现在知道需要了解什么是调用API路线的正确方法。 我已经有几个使用Angular的$http服务调用 – 但是作为这个login与Facebook实际上重新路由的Facebook页面,我仍然可以使用通常的:

 self.loginFacebook = function )() { var deferred = $q.defer(); var theReq = { method: 'GET', url: API + '/login/facebook' }; $http(theReq) .then(function(data){ deferred.resolve(data); }) return deferred.promise; } 

或者它是完全正确/安全/正确的程序,直接在窗口位置中的URL:

 self.loginFacebook = function (){ $window.location.href = API + '/login/facebook'; } 

而且,从这个我怎样才能从API发回一个令牌? 我似乎无法修改callback函数来做到这一点?

 router.get('/login/facebook/callback', passport.authenticate('facebook', { successRedirect : 'http://localhost:3000/#/', failureRedirect : 'http://localhost:3000/#/login' }) ); 

谢谢。

我被堆积在同一个问题上。

第一部分:

我允许在后端使用Cors和前端我使用$ httpProvider,像这样:

 angular.module('core', [ 'ui.router', 'user' ]).config(config); function config($httpProvider) { $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.headers.common['X-Requested-With']; $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }; 

第二部分:

  <a href="/api/auth/facebook" target="_self" class=""><span class="fa fa-facebook"></span> Login with facebook</a> 

这调用我的authentication/脸书路线,使用护照redirect到Facebook页面,允许用户进行身份validation。

如果用户授予访问权限,则调用callback/ api / auth / facebook / callback,并且facebook.strategy将用户保存到configuration文件数据。

保存用户后,我创build一个特殊的令牌与脸谱令牌,身份证和电子邮件。 这个信息被用来validation每次用户访问前面的私有状态。

我的路线是这样的:

 router.get('/facebook', passport.authenticate('facebook', { session: false, scope : 'email' })); // handle the callback after facebook has authenticated the user router.get('/facebook/callback', passport.authenticate('facebook', {session: false, failureRedirect: '/error' }), function(req, res, next) { var token = jwt.encode(req.user.facebook, config.secret); res.redirect("/fb/"+token); }); 

在前端,我使用一个状态来捕获/ fb /:令牌,并将令牌分配给我的本地存储,然后每次用户转到一个私有部分时,令牌被发送到后端并validation,如果validation通过,则validation函数返回带有解码数据的令牌。

唯一不好的是,我不知道如何redirect到以前的状态,当用户点击loginFacebook。

此外,我不知道你是如何使用callback,但你需要有域名,以允许从Facebookredirect。 我已经在digitalocean中创build了一个服务器小滴来testing这个facebook策略。 在策略中,你必须把真正的域放在callback函数中,像这样:

 callbackURL: "http://yourdomain.com/api/auth/facebook/callback" 

在你放置secretId和clientSecret的同一个对象中。 然后,在你的Facebook开发者的应用程序中,你必须允许这个域名。

对不起,我的英语,我希望这个信息可以帮助你。

根据你的前端,你需要一些逻辑来实际调用你的节点/ express API。 你的HTML元素可能看起来像

  <a class='btn' href='login/facebook'>Login</a> 

点击这个元素将使用/ login / facebook的端点呼叫您的Express路由器。 那简单。