angularjs - Node API - 如何将 Facebook 登录链接到 Angular 前端？

Question

重写这个问题以使其更清楚。

我使用 Passport-facebook 来处理我网站上的 facebook 登录。

我的前端是 Angular 的，所以我知道现在需要了解调用该 api 路由的正确方法是什么。我已经使用 Angular 的 $http 服务进行了多次调用 - 但是，由于使用 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 发回 token ？我似乎无法修改回调函数来做到这一点？

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

谢谢。

Answer 1

我也遇到了同样的问题。

第一部分:

我允许在后端使用 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>

这调用我的 auth/facebook 路由，使用 Passport 重定向到 Facebook 页面，允许用户进行身份验证。

如果用户授予访问权限，则会调用回调/api/auth/facebook/callback，并且 facebook.strategy 会保存用户的个人资料数据。

保存用户后，我使用 Facebook token 、ID 和电子邮件创建一个特殊 token 。此信息用于在用户每次访问前面的私有(private)状态时进行验证。

我的路线是这样的:

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/:token 并将 token 分配给我的本地存储，然后每次用户进入私有(private)部分时， token 都会发送到后端并进行验证，如果验证通过，然后验证函数返回带有解码数据的 token 。

唯一的坏处是我不知道如何重定向到用户点击 Facebook 登录时的先前状态。

另外，我不知道你如何使用回调，但你需要有域名才能允许来自 Facebook 的重定向。我在 digitalocean 中创建了一个服务器 Droplet 来测试这个 Facebook 策略。在策略中，您必须将真实域放入回调函数中，如下所示:

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

在放置 SecretId 和 clientSecret 的同一对象中。然后，在 Facebook 开发者的应用程序中，您必须允许该域。

抱歉我的英语不好，希望这些信息对您有帮助。