将omniauth facebook登录转换为弹出窗口
将omniauth facebook登录转换为弹出窗口
提问于 2010-12-21 00:10:41
我正在rails上使用omniauth gem，它在登录用户时效果很好，但每次它都会把你带到fb登录页面，然后把你重定向回来。我想知道是否有一种方法可以像大多数页面一样，在弹出窗口中显示fb登录，然后在完成后重新加载父div。有什么想法吗？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-12-29 08:54:50
当然，你很容易就能做到。
在您的视图中：
=link_to "Log in with Facebook", omniauth_authorize_path(:user, :facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400在您的application.js中：
function popupCenter(url, width, height, name) {
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});然后在你的回调视图中：
:javascript
if(window.opener) {
window.opener.location.reload(true);
window.close()
}这将在一个居中的600x400弹出窗口中弹出您的Facebook身份验证，然后当用户从身份验证返回时，视图将关闭弹出窗口并刷新父页面。如果用户按住ctrl键并单击链接，或者没有启用Javascript，它就会优雅地降级。
Stack Overflow用户
发布于 2012-06-29 01:59:09
发帖以防对他人有帮助。我使用的是Chris Heald的答案，但是在javascript的最后一点关闭所有新窗口链接时遇到了麻烦。例如，如果我在Facebook上发布了一个指向我的网站的链接，当用户点击该链接时，Chrome中的新窗口将自动关闭，因为条件只检查" if (window.opener)“。
我最终使用全局变量(popupValue)解决了这个问题。可能有更优雅的解决方案，但我想分享一下，以防其他人遇到同样的问题：
function popupCenter(url, width, height, name) {
var left = (screen.width/2)-(width/2);
var top = (screen.height/2)-(height/2);
popupValue = "on";
return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top );
}
$(document).ready(function(){
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});
if(window.opener && window.opener.popupValue === 'on') {
delete window.opener.popupValue;
window.opener.location.reload(true);
window.close()
}
});Stack Overflow用户
发布于 2014-02-21 06:06:35
我最终使用了Facebook的JS SDK，因为它更容易。
# In facebook.js.coffee
jQuery ->
$('body').prepend('<div id="fb-root"></div>')
$.ajax
url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
dataType: 'script'
cache: true
window.fbAsyncInit = ->
FB.init(appId: 'YOUR-APP-ID', cookie: true)
$('#sign_in').click (e) ->
e.preventDefault()
FB.login (response) ->
window.location = '/auth/facebook/callback' if response.authResponse
$('#sign_out').click (e) ->
FB.getLoginStatus (response) ->
FB.logout() if response.authResponse
true然后在您的视图中：
<%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in" %>
<%= link_to "Sign out", signout_path, id: "sign_out" %>这直接来自Sergio Gutierrez的提示- https://coderwall.com/p/bsfitw
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4491433
复制相关文章
相似问题
腾讯云开发者
