I'm trying to use the Google Identity > Sign In With Google for Web on a test web application. I followed the Display the Sign In With Google button and the button (and the One Tap) show the way I expected in Google Chrome
Note how the button shows my name and email address already
But in Safari I get a generic button:
I'm able to login to my test app with Safari and Chrome, so it's not because it's my first login (which I noticed it's one reason why both Chrome and Safari will show a generic button)
I know that the button experience should be the same in Safari and Chrome because the "sign in with google" button in the documentation overview https://developers.google.com/identity/gsi/web/guides/overview looks right in both Safari and Chrome.
So what can prevent Safari from displaying my name and email in the button?
The button code:
<div id="g_id_onload"
data-client_id="<%=google_client_id%>"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="<%=login_uri%>"
data-nonce=""
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
The button looks different in Safari because Safari blocks third party cookies by default "Preferences > Privacy > Website tracking > Prevent cross-site tracking". See Apple Support > Prevent cross-site tracking in Safari on Mac
It seems that the ITP (Intelligent Tracking Protection) in Safari negates the "advanced" version of the "Sign in with Google" button.
In the Safari Privacy Report you can see that it blocked google.com
After disabling temporarily that option and reloading the page in Safari, the "Sign In with Google" button looks the same as in Chrome or Firefox.
Of course, the rest of the Safari users will have the "Prevent cross-site tracking" enabled so they will still see the other version of the button, unfortunately.
Related
I am pretty sure that I successfully connected to Whatsapp Web from a mobile browser an year or two back. I opened the site www.web.whatsapp.com, the usual desktop interface showed up, and I scanned the QR code using a whatsapp account on another phone, and I was logged in from the mobile browser just as I'd be from a desktop browser.
When I try it these days, as of 2020, it doesn't happen. The url www.web.whatsapp.com is automatically and invariably redirected to www.whatsapp.com.
Did they purposely block this avenue, or is it something to do with my devices?
Was this feature undesirable to Whatsapp in any way?
You have to tell your browser to open it as a desktop site.
On iPhone: click on Aa letters in the browser and click "Request Desktop Website".
On Android: click on three dots in the URL section and check "Desktop site".
I have an issue related to the popup window in a mobile safari browser. In mobile browser popup not showing but when I opened the same site in Mackbook safari browser it's showing, its also showing on the mobile app but when I opened it on the mobile safari browser it's not showing. I checked the browser settings for popup it on.
We are setting up a web app which serves as a wi-fi hotspot using coova chilli and the Javascript Facebook SDK.
The app has a "login with facebook" button that, once clicked, calls the FB.login() function, which opens a pop-up window where the user can insert his credentials and log in.
This solution is working correctly in desktop browsers but it's not working in mobile devices.
These are the problems I encountered:
Android device - When I connect to the wifi network, the system prompts a notification who says "Sign in to wifi network". Once clicked, the captive page opens up correctly. But when I click the fb login button, I am redirected to the url "http://m.facebook.com/v2.8/auth ..." which is correct, but then the windows freezes and I can see only a wsod.
IOS device - same as before, the cna triggers, the redirect to the fb login page works, but once I insert my credentials, the only thing I can see is a wsod.
Both issues can be bypassed by including apple.com, google.com and other domains used for auth in the hotspot walled garden, and then the user can log in to the network by using the device's browser - Safari or Chrome, it works - as pointed out in this discussion Facebook login on Apple CNA.
The thing is, we want to make it work on the "normal" workflow, that is, to make the app work correctly within the IOS captive network assistant and the Android "sign in to wi fi" functionality.
Do you have any idea how can we solve this? We searched far and wide without any success. Thank you.
EDIT
Solved by using PHP SDK instead of javascript. By generating a login link as explained here. This works also on mobile captive portal assistants such as ios and android ones because the fb login page is opened in the same window and not in popup/iframe. I hope this helps others that may encounter the same problem.
I developed an application that uses the Google + API to authenticate the user using the following code snippet:
<div class="g-signin"
data-callback="loginFinishedCallback"
data-clientid="{My Client ID}"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
data-cookiepolicy="single_host_origin"
>
</div>
This basically displays a Google Sign in button and when the user clicks on it, another window opens and they sign in. In desktop browsers everything works great but in mobile devices the second window opens and after the user logs in, Google doesn't close the login window so the user ends up staring at an empty page. In other words the callback function never gets called because the mobile browser doesn't close the new (login) window. Is there a way to work around this issue?
This is the javascript file Google provides:
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
Cannot comment--however I would like to see an answer for this question. I am having the same problem with Google login redirecting mobile devices to blank page. Desktop Google login works perfectly fine. I am using OAuth2.0.
EDIT:
I solved this problem for my own framework. After tracing through and using a ton of var dumps I realized where google's redirect was dying out. The problem was that when the page redirected from my site's control to Google's authentication control, my $_SESSION redirect was lost. My other social logins (FB and LinkedIn) work with this method, however I had to add a catch for google specific redirect. I checked if the redirect was set and if not, made sure to set it there.
I hope this helps with your problem.
I'm building a WebApp which uses video server push with:
<img id="vidsrc" src="video.cgi"/>
It works. And when saved as a WebApp using "Add to Home Screen" closing the app does as expected and stop receiving the server push.
However when running in mobile Safari, only closing the page will get it to stop. What I'm trying to figure out is how to get it to stop if the user clicks the Home button and closes mobile Safari so the push doesn't keep running in the background.
Because of what I've got to work with, editing video.cgi is not an option. And using video.cgi in an iframe isn't a good solution because of some other functionality in the page/app.
onBlur and onClose don't seem to do it, and I'm wondering if there's any way an HTML page or the good stuff in it can know that mobile Safari has been closed.
Unfortunately, you can't... Web apps are not allowed to access the device's software, so are not told when you have pressed the button.