Google One Tap UI Not Showing - google-signin

I am trying to show Google One Tap UI on a barebone template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div id="g_id_onload"
data-client_id="00000-xx000rrr.apps.googleusercontent.com"
data-context="signin"
data-login_uri="https://example.com/login/"
data-auto_select="true">
</div>
</body>
</html>
It showing nothing! I tried on incognito, configured oauth consent screen and whitelisted the localhost domain (with ssl).
What am I missing here?

As is this will automatically log in a user that has given consent to your app. If anything you'll see a popup that says signing in.
What you need is to include the HTML for the button to show up. Like this
<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>
Also it won't work at all over http, the site has to be https.
you can check here for a generator
https://developers.google.com/identity/gsi/web/tools/configurator

As a simple first test, you might try using a callback and console.log() to output the credential. Then add your back-end server into the mix once you're happy with the UI and confirm your understanding of the sign-in flow.
Incognito mode is the best way to ensure you've not accidentally triggered the exponential cooldown timer.
Visit https://myaccount.google.com/security, Signing in to other sites to find your app, revoke it's permissions to reset the sign-in flow, and to confirm the global opt-out is enabled.
Removing data-auto_select will display the One Tap popup, including it will instead show the automatic sign-in prompt on return visits.

Related

Check dynamic web page is modified

I want to check if page https://m.nn.ru/f/1238 has been updated periodically.
I ran
curl https://m.nn.ru/f/1238 | head -c 4096
And it's output is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="1;url=https://passport.ngs.ru/check/?name=ngs_token&return=http%3A%2F%2Fm.nn.ru%2Ff%2F1238" />
<title>Redirecting to https://passport.ngs.ru/check/?name=ngs_token&return=http%3A%2F%2Fm.nn.ru%2Ff%2F1238</title>
</head>
<body>
Redirecting to https://passport.ngs.ru/check/?name=ngs_token&return=http%3A%2F%2Fm.nn.ru%2Ff%2F1238.
</body>
</html>
So I am redirected to login page and brought back to m.nn.ru/f/1238
When I open m.nn.ru/f/1238 in browser it doesn't show the redirection link but the contents of m.nn.ru/f/1238 (though I am not logged in and I think there are no cookies set)
How to get the contents of https://m.nn.ru/f/1238 ?
Another alternative is to use https://nn.ru/community/hobby/advance which has a 301 redirect
I found a workaround. I installed elinks text-mode browser and save the page:
elinks https://m.nn.ru/f/1238 > 1

OG tags not working with react-helmet and Netlify

I cannot for the life of me figure this out. The following site is hosted on Netlify and prerendering is enabled. When inspecting the page, all of the OG tags are correct. These tags are injected using react-helmet.
https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays
When scraping the above URL on the Facebook debugger, it responds with:
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
The only one of those errors/warnings that should be there is the app_id, which I don't care about.
I've waited well over 48 hours for caches to clear, I've tried scraping with query strings appended to the URL, and the images have absolute URLs. But not even the description tag is pulling through.
Can somebody that uses react-helmet and Netlify please shed some definitive light onto this problem?
This is related to a known prerendering issue.
My fix was to remove the <!DOCTYPE html> declaration from the index.html file as a temporary workaround until the above issue is resolved.
While I can't tell you exactly why. your SSR is not working correctly. Go to Chrome DevTools and click the 3 vertical dots next to Console:
Select Networking Conditions, then uncheck Select Automatically and enter Googlebot/2.1 (+http://www.google.com/bot.html):
Now refresh the page and notice that all you see on the site is some plaintext saying "html" and even your javascript bundle is missing. This is what your html looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="fragment" content="!">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Brownie Points</title>
<link href="/static/css/2.3bf0f3c5.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Note that Netlify SSR is in Beta but I personally didn't have those issues with it. Have you done any other steps other than enable it? I have tested it to be working with a CRA generated app before.

How to Properly Setup an Exit/Panic Button with Multiple Redirects

I have a site that that I've built that is for a Women's Shelter, and it requires the 'exit button' or 'panic button'.. many sites just exit you to Google or another friendly site.. I see a few questions on here that solve the problem in one way or another, but this one my client is most interested in:
http://www.ncadv.org/
Can someone tell me how they're doing this? When you click on the 'safety exit' button, it redirects a BUNCH of times to different sites (thus filling the history quickly with other friendly sites).. I really like this approach, I just can't figure how they're doing it. Any ideas? I'd thought originally they were directing to sites that have their own redirect pages set up, but if you copy the initial link in a new window, it only redirects one time.
Probably via HTTP Referer. To test, run the following in command line:
curl --header "Referer: http://www.ncadv.org/" http://abconlinenews.info/localnews.php
The link, http://abconlinenews.info/localnews.php is the first outgoing link on the button.
The response (when passed an HTTP referer with ncadv.org) is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<title>ABCNews.com: Daily News, Breaking News and Video Broadcasts - ABC News</title>
<script>
function trigger() {
setTimeout("setPage();",20);
}
function setPage() {
window.location="/localnewstoday.php";
}
</script>
</head>
<body onload="trigger();">
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
<hr>
<address>Apache/2.2.16 (Debian) Server at http://abconlinenews.info Port 80</address>
</body>
</html>
From there, it's probably referers and redirects all the way down ;)
One thing you might consider is using javascript to keep the history clear. If you use "location.replace('www.google.com');" for example, it will replace the current entry with the new url and there won't be a history entry to go back to.
If you used a function and passed urls to it via onClick events, you could eliminate any history from being tracked at all.

OGP endpoints that point to Facebook entities being incorrectly parsed by FB crawler?

Our app renders Like buttons that point back to an actual Facebook page. However, instead of pointing the Like button's href directly to the FB url, we proxy it through our servers through an opengraph endpoint. This is helpful because it allows us to have more detailed analytics on when these endpoints are used (amongst other things.) When these endpoints are hit with a user agent like 'facebookexternalhit', they render something like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta property="fb:app_id" content="158708354177049" />
<meta property="og:site_name" content="BandPage" />
<meta property="og:url" content="http://www.facebook.com/stormystrongmusic" />
<meta property="og:type" content="band" />
<meta property="og:title" content="Stormy Strong" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://graph.facebook.com/20501829906/picture" />
<title>Stormy Strong</title>
<link rel="canonical" href="http://www.facebook.com/stormystrongmusic"/>
</head>
<body>
</body>
</html>
Note that both og:url and the link rel="canonical" point to the actual Facebook Page. In practice, this looks like it behaves fine when we try running the link through Facebook's debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bandpage-s.com%2Fogp%2F11601543111380992
However, there is a problem where, after an interval, the Like buttons appear to not resolve back to the page anymore. This results in the Like count being off, the button not being 'Liked' if you already like the page, etc. Manually triggering a re-scrape by going to the OG debugger url above solves the problem, for a time.
Obviously manually re-triggering these scrapes is not a tenable solution. Are there multiple scraper behaviors happening here? It seems like the scraper that is triggered w/ the debugger is different than the one that periodically re-scrapes automatically.
Why does this happen? Is there anything we can do to get around this, except for getting rid of our ogp endpoint 'middle-man' here? This seems like a perfect utilization of og:url.

Favicon not working on my login page

I have a favicon on my website. It does not show up when i go to my login page, but works perfectly after logging in. I am using forms authentication on my website.
If the favicon is in your root directory, most browsers should display it automatically.
I visited the page and did not receive a favicon (as you suggested) but checked the source and noticed you do not link to the favicon explicitly. Try to add a line similar to the following in your own <head> section:
<link href='corbyhaas/favicon.ico' type='image/png' rel='icon' />
For more information, check out w3's How To Favicon.
Edit: This is the source I see for the head tag in your login page.
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Styles/masterstyle.css" />
<title>OnCall APP_ADMIN</title>
</head>
Obviously you're including the necessary information in the rest of your application; just do the same thing in whatever builds the <head> tag on the login page.

Resources