Question

我使用护照和Facebook策略进行身份验证。我在客户端使用angular并为服务器端表示。当用户单击使用Facebook登录并成功通过身份验证时，我将重定向回主页面。但是当我回来时，我总是得到空白页。刷新后，页面再次正常。

这是我的实施：

facebook.js：

'use strict';
var passport = require('passport'),
    url = require('url'),
    FacebookStrategy = require('passport-facebook').Strategy,
    config = require('../config'),
    user = require('../../app/user/user.server.controller');

module.exports = function() {
    // Use the Passport's Facebook strategy
    passport.use(new FacebookStrategy({
            clientID: config.facebook.clientID,
            clientSecret: config.facebook.clientSecret,
            callbackURL: config.facebook.callbackURL,
            profileFields: ['id', 'displayName', 'email'],
            passReqToCallback: true
        },
        function(req, accessToken, refreshToken, profile, done) {
            // Set the user's provider data and include tokens
            var providerData = profile._json;
            providerData.accessToken = accessToken;
            providerData.refreshToken = refreshToken;

            var providerUserProfile = {
                username: profile.displayName,
                email: profile.email,
                provider: 'facebook',
                providerId: profile.id,
                providerData: providerData
            };

            // Save the user OAuth profile
            user.saveOAuthUserProfile(req, providerUserProfile, done);
        }
    ));
};

配置/ passport.js

'use strict';
var passport = require('passport'),
    mongoose = require('mongoose');

module.exports = function() {
    var User = mongoose.model('User');

    passport.serializeUser(function(user, done) {
        done(null, user.id);
    });

    passport.deserializeUser(function(id, done) {
        User.findOne({
            _id: id
        }, '-password -salt', function(err, user) {
            done(err, user);
        });
    });

    require('./strategies/local.js')();
    require('./strategies/twitter.js')();
    require('./strategies/facebook.js')();
    require('./strategies/google.js')();

};

user.server.route.js

// Invoke 'strict' JavaScript mode
'use strict';

// Load the module dependencies
var user = require('./user.server.controller'),
    passport = require('passport');

// Define the routes module' method
module.exports = function(app) {
    // Set up the 'signup' routes
    app.route('/signup')
        .get(user.renderSignup)
        .post(user.signup);

    // Set up the 'signin' routes
    app.route('/signin')
        .get(user.renderSignin)
        .post(passport.authenticate('local', {
            successRedirect: '/',
            failureRedirect: '/signin',
            failureFlash: true
        }));

    // Set up the Facebook OAuth routes
    app.get('/oauth/facebook', passport.authenticate('facebook', {
        failureRedirect: '/signin'
    }));
    app.get('/oauth/facebook/callback', passport.authenticate('facebook', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the Twitter OAuth routes
    app.get('/oauth/twitter', passport.authenticate('twitter', {
        failureRedirect: '/signin'
    }));
    app.get('/oauth/twitter/callback', passport.authenticate('twitter', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the Google OAuth routes
    app.get('/oauth/google', passport.authenticate('google', {
        scope: [
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/userinfo.email'
        ],
        failureRedirect: '/signin'
    }));
    app.get('/oauth/google/callback', passport.authenticate('google', {
        failureRedirect: '/signin',
        successRedirect: '/'
    }));

    // Set up the 'signout' route
    app.get('/signout', user.signout);
};

index.ejs

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
    <title><%= title %></title>


</head>
<body>


<section ng-view></section>


<script type="text/javascript">
    window.user = <%- user || 'null' %>;
</script>


<script type="text/javascript" src="/public/lib/angular/angular.js"></script>
<script type="text/javascript" src="/public/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/lib/angular-resource/angular-resource.js"></script>

<script type="text/javascript" src="/public/article/article.client.module.js"></script>
<script type="text/javascript" src="/public/article/article.client.controller.js"></script>
<script type="text/javascript" src="/public/article/article.client.route.js"></script>
<script type="text/javascript" src="/public/article/article.client.resource.js"></script>

<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.module.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.controller.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.route.js"></script>
<script type="text/javascript" src="/public/projectTemplate/projectTemplate.client.resource.js"></script>
<script type="text/javascript" src="/public/projectTemplate/taskTemplate.client.resource.js"></script>


<script type="text/javascript" src="/public/index/index.client.module.js"></script>
<script type="text/javascript" src="/public/index/index.client.route.js"></script>
<script type="text/javascript" src="/public/index/index.client.controller.js"></script>


<script type="text/javascript" src="/public/user/user.client.module.js"></script>
<script type="text/javascript" src="/public/user/authentication.client.service.js"></script>



<script type="text/javascript" src="/public/application.js"></script>


</body>
</html>

index.client.view.html：

<section ng-controller="IndexController">

    <div data-ng-show="!authentication.user">
        <a href="/signup">Signup</a>
        <a href="/signin">Signin</a>
    </div>
    <div data-ng-show="authentication.user">
        <h1>Hello <span data-ng-bind="authentication.user.fullName"></span></h1>
        <a href="/signout">Signout</a>
        <ul>
            <li><a href="/#!/article">List Articles</a></li>
            <li><a href="/#!/article/create">Create an Article</a></li>
        </ul>

        <ul>
            <li><a href="/#!/projectTemplate">List Project Templates</a></li>
            <li><a href="/#!/projectTemplate/create">Create a Project Template</a></li>
        </ul>


    </div>



</section>

编辑：我正在使用本书的示例代码：

https://www.packtpub.com/books/content/support/17478

您可以在此处下载代码。选择最后一章。它在Facebook策略上有一些错误，你可以注释掉电子邮件领域（参考我上面的代码）

它具有相同的白屏行为。我尝试过镀铬和野生动物园。

Answer 1

方法1：你成功重定向到主页 - “/”似乎你没有提到主页路线。在您的主页路线。你可以使用console.log（'page hit'）查看重定向时是否从服务器呈现页面

方法2：Facebook将＃附加到auth回调网址。如果您正在使用角度路由，可以将其解释为您未定义的路由，并且不会加载页面

Answer 2

Facebook在回调网址的末尾添加了一个虚假的哈希值（#_=_）。见Github issue here。这有点混乱。您需要一个特殊的案例来处理和/或剥离它。 Github问题中有一些修复。

从重定向表达护照身份验证空白页

2 个答案: