blocks|key|1058884|text|当然，你很容易就能做到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1058885|在您的视图中：|1058886|=link_to+"Log+in+with+Facebook",+omniauth_authorize_path(:user,+:facebook),+:class+=>+"popup",+:"data-width"+=>+600,+:"data-height"+=>+400|code-block|syntax|javascript|1058887|在您的application.js中：|1058888|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="%2Bwidth%2B",height="%2Bheight%2B",toolbar=no,left="%2Bleft%2B",top="%2Btop);
}

$("a.popup").click(function(e)+{
++popupCenter($(this).attr("href"),+$(this).attr("data-width"),+$(this).attr("data-height"),+"authPopup");
++e.stopPropagation();+return+false;
});|1058889|然后在你的回调视图中：|1058890|:javascript
++if(window.opener)+{
++++window.opener.location.reload(true);
++++window.close()
++}|1058891|这将在一个居中的600x400弹出窗口中弹出您的Facebook身份验证，然后当用户从身份验证返回时，视图将关闭弹出窗口并刷新父页面。如果用户按住ctrl键并单击链接，或者没有启用Javascript，它就会优雅地降级。|1058892|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Sure, you can easily.

In your view:

<pre><code>=link_to "Log in with Facebook", omniauth_authorize_path(:user, :facebook), :class =&gt; "popup", :"data-width" =&gt; 600, :"data-height" =&gt; 400
</code></pre>

In your application.js:

<pre><code>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;
});
</code></pre>

And then in your callback view:

<pre><code>:javascript
 if(window.opener) {
 window.opener.location.reload(true);
 window.close()
 }
</code></pre>

This'll pop up your Facebook auth in a centered 600x400 popup, then when the user returns from authentication, the view will close the popup and refresh the parent page. It degrades gracefully if a user ctrl-clicks the link, or doesn't have Javascript enabled, too.

blocks|key|1058930|text|发帖以防对他人有帮助。我使用的是Chris+Heald的答案，但是在javascript的最后一点关闭所有新窗口链接时遇到了麻烦。例如，如果我在Facebook上发布了一个指向我的网站的链接，当用户点击该链接时，Chrome中的新窗口将自动关闭，因为条件只检查"+if+(window.opener)“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1058931|我最终使用全局变量(popupValue)解决了这个问题。可能有更优雅的解决方案，但我想分享一下，以防其他人遇到同样的问题：|1058932|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="%2Bwidth%2B",height="%2Bheight%2B",toolbar=no,left="%2Bleft%2B",top="%2Btop+++++);
}

$(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()
}
});|code-block|syntax|javascript|1058933|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Posting in case it helps others. I was using Chris Heald's answer but ran into trouble with the final bit of javascript closing any new window links. For example, if I posted a link to my site onto Facebook, when users clicked the link the new window would automatically close in Chrome because the condition only checks for "if(window.opener)"

I ended up solving this with the use of a global variable (popupValue). There may be more elegant solutions but thought I'd share in case others hit the same issue:

<pre><code>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 &amp;&amp; window.opener.popupValue === 'on') {
 delete window.opener.popupValue;
 window.opener.location.reload(true);
 window.close()
}
});
</code></pre>

blocks|key|844461|text|我最终使用了Facebook的JS+SDK，因为它更容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|844462|#+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|code-block|syntax|javascript|844463|然后在您的视图中：|844464|<%25=+link_to+"Sign+in+with+Facebook",+"/auth/facebook",+id:+"sign_in"+%25>
<%25=+link_to+"Sign+out",+signout_path,+id:+"sign_out"+%25>|844465|这直接来自Sergio+Gutierrez的提示-+https://coderwall.com/p/bsfitw|offset|length|844466|entityMap|0|LINK|mutability|MUTABLE|url|https://coderwall.com/p/bsfitw^0|0|0|0|0|Q|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I wound up using Facebook's JS SDK since it's easier.

<pre><code># In facebook.js.coffee
jQuery -&gt;
 $('body').prepend('&lt;div id="fb-root"&gt;&lt;/div&gt;')

 $.ajax
 url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
 dataType: 'script'
 cache: true

window.fbAsyncInit = -&gt;
 FB.init(appId: 'YOUR-APP-ID', cookie: true)

 $('#sign_in').click (e) -&gt;
 e.preventDefault()
 FB.login (response) -&gt;
 window.location = '/auth/facebook/callback' if response.authResponse

 $('#sign_out').click (e) -&gt;
 FB.getLoginStatus (response) -&gt;
 FB.logout() if response.authResponse
 true
</code></pre>

Then in your views:

<pre><code>&lt;%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in" %&gt;
&lt;%= link_to "Sign out", signout_path, id: "sign_out" %&gt;
</code></pre>

This is directly from Sergio Gutierrez's tip here - <a href="https://coderwall.com/p/bsfitw" rel="nofollow">https://coderwall.com/p/bsfitw</a>

I'm using the omniauth gem with rails and it works great with loging in users, but everytime it takes you to the fb login page then redirects you back. I was wondering if there is a way to do what most pages do and show the fb login in a popup and then reload the parent div once that is complete. Any ideas?

Thanks!

Turn omniauth facebook login into a popup

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问将omniauth facebook登录转换为弹出窗口
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将omniauth facebook登录转换为弹出窗口EN