如何知道从gmail/fb登录表单，用户已成功登录，而登录与gmail/fb

how to know from gmail/fb login form that user has successfully logged in, while log in with gmail/fb?

本文关键字：登录 fb gmail 成功 表单 何知道 用户      更新时间：2023-09-26

Rails 4 + Twitter Bootstrap + jquery + javascript + Ominiauth

_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) On Header Sign In Link .

2)当我将点击登录它将打开一个模式弹出(twitter bootstrap)。

3)有两个选项将有谷歌(图像LOGO)和facebook(图像LOGO)登录。

4)当你点击任何一个(假设谷歌图像意味着用gmail帐户登录)，然后一个窗口将打开gmail登录表单。

5)在那里我将输入登录详细信息，然后成功登录后应该发生什么子窗口应该关闭重新加载父窗口。成功登录后发生了什么子窗口正在重新加载并在子窗口中成功登录

我的问题我怎么能知道从gmail/fb登录表单，用户已成功登录??

如何从子窗口重新加载父窗口?

如果子元素和父元素在同一个原点，那么在子元素的代码中你可以这样做:

opener.location.reload();

如果它们不是，那么同源策略将启动并阻止跨源调用。在这种情况下，您可以使用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>
相关文章：