I'm building an app, where the auth flow goes as follows
user clicks login button
a login window opens.
The user is redirected to either Facebook, Google or Twitter, depending on the querystring of the window.
When the user comes back from fb/google/twitter, my backend generates an auth token, and the popup window uses postMessage to send the auth token to the main page, verifying the origin
the main page closes th window after receiving the token.
This flow works great on desktop devices, but not in mobile browsers, where window.open opens a new tab that can't be programmatically closed.
On mobile devices, I can redirect the user to the login screen, and send them back with the auth token in the hash fragment (oauth2 implicit flow), but I only want to do that when I have to. How do I detect whether window.close works without browser sniffing?
What I've tried
I've tried using a HTML/JS based modal dialog with an iframe in it, but Google's login page doesn't allow embedding it in an iFrame, I haven't tried with other providers
You can check if window.close() is supported by object detection:
if (window.close) {
alert ('window close is supported');
}
Do the check without paranthesis (), as you don't want to execute the function, but want to check for existance of the function/object.
Related
I want to create a login system where if the user logs in within their default browser I want them to automatically login in my web browser as well (this web browser is within my desktop app).
To explain it step by step:
the user clicks the "login" button on my website (the website is opened in my app in my own browser)
the default browser opens and navigates to my login page
the user logs in there
if login is successful my program/web browser catches the information
the user is automatically logged in in my web browser as well
My app is centered around the browser that I built, so I cannot change it.
I also cannot / would prefer not to have the users use my own browser to log in for two reasons:
it would require verification from Google (without it, Google warns users that the app is unsafe)
but more importantly, it makes the login process more difficult for the users (they would have to enter their email and password and go through 2FA again if they have it set up)
I thought I needed to create a custom URI scheme for my application and send the login information to my program but it sounds unsecure.
Maybe since I am communicating between different browsers, I should handle this with socket programming?
The tech I use:
for the web browser: Qt6 QWebEngineView
for the website: laravel and javascript
I am looking for ideas or road maps here. How can I do this securely?
I'm integrating a new payment method in my webpage.
This method use a webredirect to send the customer to the payment page.
The redirect is made using location.href=.... command, then usually my web page is unloaded and user is sent to payment site.
I have some issue when the link is somehow opened in other window or if the customer is browsing with a phone, when the link is handled by the app link and the payment app is opened.
The customer completes the payment in the second window or in the mobile app and then he focus again in my webpage, but my webpage is still because for its logic, the location.href was thrown.
I know I have somehow to handle an auto-refresh when the user comes back.
How can I understand if the location.href command has unload the page or if it is just opened by an application and my page is still there?
Usually 3rd party payment redirects happen on new window & is done via window.open
Caveats: User should allow the pop-ups in the browser
It gives a better control over the new Tab / Iframe opened & establish a bi-direction communication bridge to get the status and events bi-directionally through WindowProxy like closed or check referrer.
Alternatively you can hook into window.onbeforeunload and set a flag as below
example:
window.onbeforeunload = function(){
sessionStorage.isUnloaded = 1
}
and use the flag on window.onload to deduce if you moved away / closed / duplicate session.
I have an app developed in Ionic V4 which uses the deep link plugin, and a landing page developed with HTML and Javascript.
the landing page uses location.href = "com.orgName.appName://" to open the app.
The flow is:
a customer receives a link via SMS and when he clicks it he is redirected to a Landing page.
The landing page checks the operation system (Android or IOS) and then checks if the app is installed on the phone. If it is, it opens it and if not it takes the customer to the App Store/Google Play.
This used to work up until not long ago. now, it says "Redirect Blocked".
I read some articles and found out Chrome blocks the redirect on page load, so you need to create a button for the user to click, and then it works.
Our customer insists that the app/store will open without the user interaction.
I found an app which does that successfully, but I can't inspect to see how they did it because the logic is done on their server.
I've tried:
using location.href on page load or on load events
wrap the redirection in a SetTimeout
use window.open which works for the most part, but not on all devices + requires the user to allow popping windows.
using document.getElementById on a button, and invoking the click() function
On my site, we create a popup window which that gets redirected to Google authorization, with a RedirectUri back to my site after login specified. In the main window, we check the state of the popup window to determine whether or not a user has already logged in so that we can close this popup window.
Normally, once the user has logged in and the popup has been redirected back to my site, we can access the popup window in the main window. However, starting with the latest version of Chrome (v. 63.0.3239.132), we'll get the following error:
DOMException: Blocked a frame with origin "..." from accessing a cross-origin frame.
This seems related to this Chrome bug, however we aren't calling window.open from an iframe (it gets called from the main site). 63.0.3239.132 was also supposed to introduce a fix for this issue.
I don't always repro this issue: if a user is already logged into their Google account, the main window can access the popup window once the popup gets redirected back to my site. Also, after the initial redirect to Google authorization (to the account selector page), I can navigate the popup window back to my site, at which point the main window will be able to access the popup window once more.
This issue also don't repro in earlier versions of Chrome and other browsers.
I can't fix your problem but I can suggest an alternative way to go about what you are doing.
Rather than accessing the popup window directly from your main page, or the main page from your popup (window.opener), have you considered communicating between these pages (which are both served from your app) by using the browser's sessionStorage?
Your pages/windows will share sessionStorage so one or both can hook into the window.onstorage event to watch for changes made by the other.
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onstorage
I realise that this will require some redevelopment and therefore isn't strictly an answer to your problem, but I hope it is still a useful suggestion.
I'm working on a website that is focused on mobile users and uses a manifest to be opened standalone when added to the home screen. This works well, except for the Facebook login function. Whenever I try to login it opens the Facebook link in the browser outside the app. I then have to manually return to the app and reload the page to be logged on.
How can I stay inside the standalone app when logging in?
I tried using window.location as explained in this popular answer but no change. I also tried using window.open as explained here but again, no luck.
You can try it on this test page that has an adjusted manifest and login option to stay inside the test page. I used a Samsung Galaxy S5 for testing.
You should not stay inside your app while logging.
Redirecting the user to the Identity provider (Facebook) in your case it is the normal life-cycle of an Oauth2 login or Single Sign On login. On the OAuth2 server you can set the redirect url which is the address you want the user to be send after login.
https://developers.facebook.com/docs/facebook-login/web#redirecturl
Login to your facebook app account: https://developers.facebook.com/apps and change the redirect url from your app control panel.