将omniauth facebook登录变为弹出窗口

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与Devise结合使用,那么Chris Heald的解决方案就会出现问题.问题是,当你重新加载窗口(即在登录页面),设计将带您到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的解决方案,我不可能做到这一点,所以..非常感谢你!