Question

我正在使用带有rails的omniauth gem，它可以很好地登录用户，但每次它都会带你到fb登录页面然后重定向你。我想知道是否有办法做大多数页面的操作并在弹出窗口中显示fb登录，然后在完成后重新加载父div。有什么想法吗？

谢谢！

Answer 1

当然，你很容易。

在您看来：

=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，它会优雅地降级。

Answer 2

好的，如果您将OmniAuth与设计结合使用，那么Chris Heald的解决方案就会出现问题。问题是，当您重新加载窗口（即登录页面上）时，Devise会将您带到root_path，完全忽略您尝试访问的URL并将产生错误消息“您已登录”。这是有道理的，因为Devise通过重定向到主页来保护登录用户无法访问登录页面。通过在登录后立即重新加载登录页面，您将最终遇到此问题。

所以我使用设计的人的解决方案如下：

# add this wherever needed in your_authentications_or_callbacks_controller.rb
sign_in user
@after_sign_in_url = after_sign_in_path_for(user)
render 'callback', :layout => false

通常情况下，在使用某个提供商（Facebook，Twitter等）返回的哈希查找或创建用户之后，我们会调用设计函数sign_in_and_redirect。但是我们还不能重定向（记住，现在，用户当前处于弹出窗口中）所以我们只是sign_in用户。

接下来，我们需要传递用户尝试访问视图的网址，我们可以使用Devise的方法after_sign_in_path_for获取该网址。

最后，我们需要渲染视图。由于我们只使用视图调用一些JavaScript，因此无需渲染布局，因此我们将其关闭以免使我们放慢速度。以下是该观点：

# views/your_authentications_or_callbacks/callback.html.erb
<script type="text/javascript">
  window.opener.location = '<%= @after_sign_in_url %>';
  window.close();
</script>

这样，用户在登录后会被重定向到正确的网址，并显示正确的Flash消息。

禁用JavaScript

经过一些测试后，我意识到这个解决方案不允许在没有JavaScript的情况下进行身份验证，所以我想做一个附录。

function popupCenter(linkUrl, width, height, name) {
    var separator = (linkUrl.indexOf('?') !== -1) ? '&' : '?',
        url = linkUrl + separator + 'popup=true',
        left = (screen.width - width) / 2,
        top = (screen.height - height) / 2,
        windowFeatures = 'menubar=no,toolbar=no,status=no,width=' + width +
            ',height=' + height + ',left=' + left + ',top=' + top;
    return window.open(url, name, windowFeatures);
}

此处的更改是使用JavaScript向网址添加名为popup的简单参数。 OmniAuth将足以存储添加到请求URL的任何查询参数。所以最后我们在控制器中检查那个参数。如果它存在，那是因为启用了JavaScript：

if request.env['omniauth.params']['popup']
  render 'callback', :layout => false
else
  redirect_to @after_sign_in_url
end

另外，请不要忘记对failure操作执行相同的操作，该操作在用户不接受登录时调用。

如果没有Chris Heald的解决方案，我无法做到这一点，所以......非常感谢你！

Answer 3

发布以防万一。我正在使用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()
}
});

Answer 4

我使用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

将omniauth facebook登录变为弹出窗口

4 个答案:

禁用JavaScript