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.
Related
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
I have a web application that can be installed as PWA. Once installed the problem appears on Android devices with Chrome.
If a user is logged out the application will redirect to an authentication service that is hosted on a separate server. Once a user has logged in the application redirect him to main page of app. PWA is opened automatically at this point. I don't want this.
Does anybody know a way to prevent automatically opening PWA when a user open a site in browser?
It was noticed on Android 8.0 with Google Chrome 74.0.3729.157.
Also if an authentication page is rendered inside iframe PWA is not opened automatically.
Finally I get it.
PWA is installed as WebAPK so Android open my application automatically when an auth server returns redirect to my application https://developers.google.com/web/fundamentals/integration/webapks.
A way exists to prevent that by defining a scope parameter in manifest.json. But it is not my case because all my application is in the root.
Finally I use iframe to render an auth page instead of redirection to auth service directly.
How can I detect whether the user browsing to my website has installed my app, and redirect to it on the click of a button in the banner like yelp?
I only need help with the detecting and redirecting from the browser. Yelp manages to do it. I tried messing with universal links, but I'm not sure how to detect that the user does not have the app and to then redirect him/her to the app store.
Yelp uses a company called Branch (Full disclosure, I work there). We have some complicated infrastructure that allows us to tell when a particular device has the app installed or not.
I'm using facebook and google plus login in my website and it is working fine at all devices except Iphone, I make a lot of searching I found that google has been block native apps from make authentication since 2017
update : the website I'm developing is a splash screen that opened to the user when he try to connect to cisco meraki access point to authenticate him and give him access to the internet ,
when an iphone mobile try to connect to the access point the splash screen opened in the native browser of it so the facebook and google plus buttons doesn't work
Do you have any suggestions or solutions about that issue?
I recently resolved this issue on a website I manage with these steps:
login to console.developers.google.com,
EDIT your APP, under;
Authorized JavaScript origins, and Authorized redirect URIs,
Enter:
http://yoursitenamehere.com
https://yoursitenamehere.com if it has ssl and
Save
Refresh your page and try to sign-in now.
For facebook:
sign-in to your facebook developers platform
under facebook login
go to Settings
Valid OAuth Redirect URIs
(after filling your app domain details, Copy and Paste the code below Ctrl&Shift V) https://example.com/?SuperSocializerAuth=Facebook (replace the example.com with the domain name you're activating social login for)
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.