我使用带有 Facebook 策略的 Passport 进行身份验证。我在客户端使用 angular，在服务器端使用 express。
当用户单击使用 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);
};
索引.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 策略上有一些错误，您可以注释掉电子邮件字段(引用我上面的代码)
它具有相同的白屏行为。我尝试过 chrome 和 safari。
最佳答案
方法一:
您成功重定向到主页 - 似乎是“/”，但您没有提到主页路线。
在您的主页 route 。您可以通过 console.log('page hit') 查看重定向时页面是否从服务器呈现
方法 2:Facebook 将 # 附加到 auth 回调 url。如果您使用的 Angular 路由可能会被解释为您未定义的路由并且不会加载任何页面
关于angularjs - 来自重定向的快速 Passport 身份验证空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28133478/