如何從gmail/fb登錄表格中知道該用戶已成功登錄，同時使用gmail/fb登錄？

-1

軌道4 + Twitter的引導+的jquery +的JavaScript + Ominiauth如何從gmail/fb登錄表格中知道該用戶已成功登錄，同時使用gmail/fb登錄？

_header.html.erb

<span class="callno"><%= link_to "Sign in", {:controller => "web",:action => "sign_in_user"}, :role => 'button', 'data-toggle' => 'modal', 'data-target' => '#popup_div', :remote => true %></span>

web_controller.rb

def sign_in_user 

    end

sign_in_user.js.erb

$('#popup_div').html("<%= escape_javascript(render 'web/login_form') %>");

_login_form.html.erb

<div style="border-right: 1px solid #C0C0C0; margin-left: -11px; float: left; height: 252px"></div> 
     <h4>Sign In with</h4></br> 
     <a><%= link_to image_tag("web/fb_login.png", :alt => "facebook", :style => 'margin: 0 0 10% 20%'), user_omniauth_authorize_path(:facebook), :class => "popup", :"data-width" => 600, :"data-height" => 400, :onclick => "return closeloginform();" %> </a><br/><br/> 
     <a><%= link_to image_tag("web/google_login.png", :alt => "google", :style => 'margin: 0 0 0 20%'), user_omniauth_authorize_path(:google_oauth2), :class => "popup", :"data-width" => 600, :"data-height" => 500, :onclick => "return closeloginform();" %></a><br/><br/> 
    </div> 
<script type="text/javascript"> 

    function closeloginform(){ 
    $('#popup_div').modal('hide'); 
    } 

</script> 

<script type="text/javascript"> 
function popupCenter(url, width, height, name) { 
    var left = (screen.width/2)-(width/2); 
    var top = (screen.height/2)-(height/2); 
    childWindow = window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top); 
    return childWindow; 
    } 

    $("a.popup").click(function(e) { 
    popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup"); 
    e.stopPropagation(); return false; 
}); 
</script>

1）在標題登錄鏈接在那裏。

2）當我點擊登錄時，會打開一個模式彈出窗口（twitter bootstrap）。

3）有兩個選項將在那裏爲谷歌（圖片LOGO）和Facebook（圖片LOGO）標誌英寸

4）時，你會點擊任何一個（假設谷歌圖片意味着Gmail帳戶登錄）然後一個窗口將打開與Gmail登錄表單。

5）在那裏我將輸入登錄詳細信息，然後成功登錄後應該發生什麼子窗口應該重新加載父窗口。 成功登錄後發生了什麼只有子窗口正在重新加載並在子窗口中成功登錄。

我的問題如何從gmail/fb登錄表單中知道該用戶已成功登錄？

來源

2014-06-21 user3676578

是你的問題你的標題（*「如何重新從子窗口的父窗口？「*）或者你最後稱之爲你的問題（*」我怎麼能從gmail/fb登錄表單中知道該用戶已經成功登錄？「）*這些都不是同一個問題 –

謝謝你告訴我的錯誤.... :) – user3676578

Drat，我回答了錯誤的問題。:-) –

如何從子窗口重新加載父窗口？

提供孩子和家長都是一樣的起源之內，那麼在孩子的代碼，你可以這樣做：

opener.location.reload();

如果他們沒有，那麼Same Origin Policy會踢與防止交叉 - 原始電話。在這種情況下，你可以使用postMessage告訴父窗口重新加載：

在父：

window.addEventListener("message", function(e) { 
    if (e.origin !== "http://the child window's URL") { 
     // Ignore this message, we don't know the sender 
     return; 
    } 
    if (e.data === "reload") { 
     location.reload(); 
    } 
}, false);

在孩子：

opener.postMessage("reload", "http://the parent's URL");

例子：

parent.html：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Opener</title> 
</head> 
<body> 
<input type="button" value="Open Popup"> 
<script> 
(function() { 
    // Shows when this window was (re)loaded 
    var p = document.createElement('p'); 
    p.innerHTML = "(Re)loaded on " + new Date(); 
    document.body.appendChild(p); 

    // Hooks up the button to open the popup 
    document.querySelector("input").onclick = function() { 
     window.open("popup.html", "_blank", "width=500,height=500,menubar=no,toolbar=no"); 
    }; 
})(); 
</script> 
</body> 
</html>

popup.html：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Popup</title> 
</head> 
<body> 
<input type="button" value="Close"> 
<script> 
document.querySelector("input").onclick = function() { 
    if (opener) { 
     opener.location.reload(); // <========== 
    } 
    close(); 
}; 
</script> 
</body> 
</html>

來源

2014-06-21 08:09:08

@ TJ Crowder我沒有得到這個「孩子和父母都在同一起源」，你可以解釋plz .. – user3676578

@ user3676578：For web頁面，「origin」是協議，主機和端口的組合，因此'http：// www.example.com/foo.html'使用'http'，'www.example.com'和'80' （默認的HTTP端口），爲了讓父窗口和子窗口直接對話（'opener.location.reload（）'），這兩個頁面必須來自同一個源，所以'http：//www.example .com/foo.html'可以直接與'http：// www.example.com/bar.html'對話，但不能與'http：// en.example.com/bar.html'（因爲'en。 example.com'與「www.example.com」不是同一個主機）協議或端口也使其成爲「交叉來源」。 –

@ T.J. Crowder在我的代碼中，我如何添加這個相同的原點策略？你能解釋一下嗎... – user3676578

如何從gmail/fb登錄表格中知道該用戶已成功登錄，同時使用gmail/fb登錄？

回答

相關問題