在我的node.js express app中,我使用passport.js集成了Facebook身份验证。我可以在弹出窗口中打开Facebook登录页面,然后进行登录。在此阶段,重定向发生在弹出窗口中。但我需要关闭弹出窗口并在父窗口中进行重定向(,即父窗口将重定向)。我将在这里粘贴完整的代码虽然我认为主要问题在于模板文件(.ejs)。
我在SO中的类似问题中找不到任何解决方案。
// Passport session setup.
passport.serializeUser(function(user, done) {
done(null, user);
});
passport.deserializeUser(function(obj, done) {
done(null, obj);
});
// Use the FacebookStrategy within Passport.
passport.use(new FacebookStrategy({
clientID: config.facebook_api_key,
clientSecret:config.facebook_api_secret ,
callbackURL: config.callback_url
},
function(accessToken, refreshToken, profile, done) {
console.log(" id = "+profile.id);
process.nextTick(function () {
//Check whether the User exists or not using profile.id
//Further DB code.
profile.user_id="00000444000555";
return done(null, profile);
});
}
));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
//app.set('view engine', 'jade');
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({ secret: 'keyboard cat', key: 'sid'}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(__dirname + '/public'));
//Router code
app.get('/', function(req, res){
res.render('index', { user: req.user });
});
app.get('/account', ensureAuthenticated, function(req, res){
console.log(req.user);
res.render('account', { user: req.user });
});
//Passport Router
app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', {
successRedirect : '/',
failureRedirect: '/login'
}),
function(req, res) {
res.redirect('/');
});
app.get('/logout', function(req, res){
req.logout();
res.redirect('/');
});
function ensureAuthenticated(req, res, next) {
if (req.isAuthenticated()) { return next(); }
res.redirect('/login')
}
app.listen(8000);
模板文件是:
<script type="text/javascript">
if (window.location.hash && window.location.hash == '#_=_') {
if (window.history && history.pushState) {
window.history.pushState("", document.title, window.location.pathname);
} else {
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = '';
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}
}
</script>
<% if (!user) { %>
<div style="width:500px;height:180px;">
<h2 style="font-size:40px;">Welcome! Please log in.</h2>
<a href="javascript:void(0)" onclick=" window.open('/auth/facebook','',' scrollbars=yes,menubar=no,width=500, resizable=yes,toolbar=no,location=no,status=no')"><img src="fb-login.jpg" width="151" height="24"></a>
</div>
<% } else { %>
<script type="text/javascript">
window.parent.location.href ="/";
window.close();
</script>
<h2>Hello, <%= user.displayName %>.</h2>
<% } %>
答案 0 :(得分:19)
我上面的评论可能缺少一个完整的答案,所以这是我在我的网站上做的完整解决方案。
在我的节点后端,我创建了一条路由,基本上路由到成功认证后称为after-auth.html的特殊页面,如此
app.get('/auth/twitter/callback',
auth.passport.authenticate('twitter', { failureRedirect: '/failedLogin.html' }),
function(req, res) {
res.redirect('/after-auth.html');
});
我的after-auth.html页面只有javascript,它将焦点放回到父页面上并自行关闭
<script type="text/javascript">
if (window.opener) {
window.opener.focus();
if(window.opener.loginCallBack) {
window.opener.loginCallBack();
}
}
window.close();
</script>
您可能还会注意到我调用了一个名为loginCallBack的函数。我使用它作为一个钩子,因此父浏览器知道在成功验证后更新其模型/视图。例如,在我的loginCallBack中,我检查用户是否已登录并删除所有&#34;登录&#34;按钮并用用户的个人资料图片替换它们 e.g。
var loginCallBack = function() {
loginCntr.checkLogin();
}
答案 1 :(得分:2)
我们自己一直在努力,并最终编写了一个简单的javascript插件来帮助我们older post
在客户端使用它会是这样的:
<button id="button">Facebook Login</button>
<script>
document.getElementById("button").onclick = function () {
popupTools.popup('/popup-url', "Facebook Connect", {}, function (err, user) {
if (err) {
alert(err.message);
} else {
// save the returned user in localStorage/cookie
}
})
</script>
在服务器上:
passport.use(new FacebookStrategy({
clientID: process.env.FACEBOOK_ID,
clientSecret: process.env.FACEBOOK_SECRET,
callbackURL: '/calback-url',
}, function (accessToken, refreshToken, profile, done) {
// process facebook profile into user
}));
app.post('/popup-url', passport.authenticate('facebook'))
app.get('/callback-url',
passport.authenticate('facebook'),
function (req, res) {
res.end(popupTools.popupResponse(req.user))
}
);
希望人们会发现这很有用。
答案 2 :(得分:0)
最简单的解决方案是:res.send('<script>window.close()</script>');