58

我正在使用带有rails的omniauth gem，它在登录用户时效果很好，但是每次它把你带到fb登录页面然后将你重定向回来。我想知道是否有一种方法可以完成大多数页面的操作并在弹出窗口中显示 fb 登录，然后在完成后重新加载父 div。有任何想法吗？

谢谢！

4

4 回答 4

125

当然，你可以轻松。

在您看来：

=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-click 链接，或者也没有启用 Javascript，它会优雅地降级。

于 2010-12-29T00:54:49.783 回答
29

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

所以我对使用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 等）返回的哈希找到或创建用户后，我们会调用 Devise 函数sign_in_and_redirect。但是我们还不能重定向（记住，现在，用户当前在一个弹出窗口中）所以我们只是sign_in用户。

接下来，我们需要将用户试图访问的 url 传递给视图，我们可以使用 Devise 的方法获取该 url 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>

这样，用户在登录后会被重定向到正确的 url，并显示正确的 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);
}

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

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

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

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

于 2012-03-06T21:27:11.347 回答
4

发布以防万一它帮助别人。我正在使用 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()
}
});
于 2012-06-28T17:59:08.650 回答
3

我最终使用了 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

于 2014-02-20T22:06:35.223 回答