So I'm adding a "sign in with Twitter" button onto my web site. I display the twitter sign in in a popup window. When the user signs into to twitter they are redirected back to a page on my site which calls a javascript function on the window.opener to notify the page that sign in has completed and to refresh.
The problem is after twitter redirects the user back to my site window.opener is null. The script works fine if I bypass the twitter sign in page. Also this appears to be a IE issue, as it works fine in firefox.
Any ideas?
Thanks in advance!
check window.opener is null after redirect. If you provide a page of your own domain in the popup first it doesnt loose is parent information. At least that how it works for me.
Maybe you could use a lightbox containing an iframe for the Twitter sign-in. Then you can use "top" instead of "window.opener".
Related
I am working on a web app using Firebase and Vanilla JavaScript. Let's say I have home page index.html, when user clicks to sign in, a popup appears where he will enter details. Since he signs in it means the URL should be localhost:5000/signin. Is it possible to do it with JavaScript from frontend or is there a need to add Node.js to redirect user respectively.
I am confused how this works and would appreciate if someone could explain how should I approach this.
You can change the url without changing or reloading the page in modern browsers.
window.history.pushState({}, 'Signin', '/signin');
Or you can use replaceState since you are using modal, however it will break back button functionality.
Please look at pushState
This will work:
<script>
function signin() {
window.open("/signin", "_blank", "width=500,height=300")
}
</script>
You can change width and height to your sign-in page width and height. Also, you can add some other properties to your popup. For more information visit https://www.w3schools.com/jsref/met_win_open.asp
This also might be helpful if you want to make your page maximized How to open maximized window with Javascript?
There is a question Facebook OAuth "Unsupported" in Chrome on iOS where there are fixes with manually redirecting to login screen and back to the original url.
But, I have situation when login button is in the iframe within popup on some page. This popup could be displayed on multiple sites.
Redirect_uri should be the page of facebook application, in this example iframe inside popup. I need it to be redirecting on the original page.
Any ideas?
Update:
Even with Manual login flow, it doesn't work. It's not redirecting me anywhere after login. Just same facebook window with message "Please close this tab to proceed".
It's a bold thing to state, but since Chrome's latest update their interpretation of window.location.replace seems wrong. I have a site loading content in an iframe, to be able to add a toolbar on top. This toolbar can be disabled. When the toolbar is disabled a cookie is set. Every time a page is loaded the cookie is checked, if the cookie is there the user is redirected directly to the site normally loaded in the iframe, like this:
if($.cookie("noframe")==true)
window.location.replace='http://www.amazingjokes.com/';
This worked great 'till Chrome's latest update. People were sent straight to the site if they had the iframe disabled, and clicking 'back' sent them to my main page.
Not anymore...
People are now redirected back to the page loading the frame, with the cookie set they're redirected back to -in this case- amazingjokes.com. This is behavior of window.location.replace is now identical to :
window.location.href='http://www.amazingjokes.com/';
But this is not the behavior I'm looking for. I could set another cookie to track the redirect, but that's creating more and more overhead. And the 'replace' option should cover this. Is there a workaround? Or should this be reported as a bug at Chrome?
Here is what is happening...
My website redirects to Third Party Website which uses window.location to redirect back to my website. All this is happenining inside a pop up window.
The issue i am facing is in Chrome, after the redirect window.close is undefined along with some other attributes like window.opener
Any idea how can I close this window ?
Don't have much control over how redirection is happening as its a third party website.
I changed window.location in one of my pages to redirect to another page and in that page this issue was reproducible.
EDIT:
The issue was not window.location redirection but something else ... Trying to debug it further, have found a solution though and answered in this question.
Once the open window navigates to a domain that is not the same as the parent, you no longer have access to the window from the parent.
To workaround this you can have a page on your site that just contains an iframe with the src attribute set to the appropriate 3rd party website url.
The first answer in this question worked:
Issue with window.close and chrome
window.open('','_self', '');
window.close();
This works... the only reasong that i can think of is, on calling window.open window object is reinitialized in the pop up and hence window.close() does not return undefined.
I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!
Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved
You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.
By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().