javascript - how to know from gmail/fb login form that user has successfully logged in, while log in with gmail/fb? -
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); homecoming childwindow; } $("a.popup").click(function(e) { popupcenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authpopup"); e.stoppropagation(); homecoming false; }); </script> 1) on header sign in link there.
2) when click on sign in open modal popup (twitter bootstrap).
3) there 2 options there google(image logo) , facebook(image logo) sign in.
4) when click on 1 (suppose google image means sign in gmail account) window open gmail login form.
5) there come in login details what should happen after successful login kid window should close reloading parent window. what happening after successful login kid window reloading , getting sign in in kid window.
my question how can know gmail/fb login form user has logged in ??
how reload parent window kid window?
provided kid , parent within same origin, in child's code can this:
opener.location.reload(); if aren't, same origin policy kick in , prevent cross-origin call. in case, can utilize postmessage tell parent window reload:
in parent:
window.addeventlistener("message", function(e) { if (e.origin !== "http://the kid window's url") { // ignore message, don't know sender return; } if (e.data === "reload") { location.reload(); } }, false); in child:
opener.postmessage("reload", "http://the parent's url"); example:
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 window (re)loaded var p = document.createelement('p'); p.innerhtml = "(re)loaded on " + new date(); document.body.appendchild(p); // hooks button open 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> javascript ruby-on-rails facebook twitter-bootstrap omniauth
No comments:
Post a Comment