What I'm looking for:
I want to test for the 403 disallowed_useragent error (unless there is something else to test for) and when the error is present I can create a way for the user to continue.
Background/The Problem:
I have a Google Scripts signup sheets app with a Google OAuth button to login to the Admin functions.
Everything in the resulting webpage works the way I'd like, if it's accessed from a web browser.
However, this script was made for our church and placed both on a website and within an app builder (Subsplash), and when someone tries to login (from the script from within the app) it's returning a 403 disallowed_useragent error. I don't have much control over the app builder, or the resulting app: Subsplash (https://www.subsplash.com/).
- I am reaching out to Subsplash to see if there is something they can do on their end, but in the meantime, or in the even that there isn't anything they can do, I'm looking for a solution that I can do on my end.
After researching the error, and potential fixes, it appears the problem is that Subspash is rendering my webpage in a WebView and, for security reasons, OAuth won't work in a WebView.
Researching the Problem:
I found references to using googlechrome://navigate?url=www.example.com but that didn't do anything from within the WebView on my Android phone.
This was the closest question to what I'm looking for: Google OAuth for websites in embedded browsers
In the answer:
I would like to avoid going down the road of detecting the user-agent web-side and force the user to open the link in Safari.
I don't know that sounds like a pretty decent solution to me. It may feel a like over kill a little but if it works go with it.
So I headed down the path of detecting the user-agent web-side and ran into this article: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent which basically tells you to avoid it at all costs, and only if necessary, try to detect the missing feature instead.
- This makes sense, because for some mobile/browser options, it'll work fine, but not all.
- Also, maintaining all availiable browsers/mobile scenarios, does sound like a headache (and I'm programming this in my freetime, not as a job, so less maintenance would be best! Not to mention, at some point, it'll get turned over to someone without a background in programming!)
- Not to mention, I don't have access to all different mobiles, etc. And may only find out that something doesn't work when someone with a different device tells me. (One I don't have to test with!)
Back to the solution:
I'm not sure what to look for, but the best case scenario would be to be able to test that clicking on a Google Login button will return the 403 error, and that I can somehow catch that and show something different.
If it is possible to search for a specific feature that is missing from a WebView (before even showing the Google Sign button) that would be acceptable also.
As a last resort, I'm not even sure what else to search for in my quest for an answer. So if you won't have a full answer, but can point me in a direction, that would be super helpful as well.
Some Code
Reminder!! This works for a website rendering!
page.html
<head>
...
<meta name="google-signin-client_id" content="....apps.googleusercontent.com">
...
</head>
<body>
...
<div id="google-signin-button" class="g-signin2" data-onsuccess="onSignIn"></div>
<div id="not-logged-in-message">
<br />Please login to access Admin Functions.
<!-- This anchor tag doesn't do anything -->
<br /><a href='googlechrome://navigate?url=script.google.com/...'>Open outside the app</a>
</div>
...
<?!= HtmlService.createHtmlOutputFromFile('javaScript').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('adminScript').getContent(); ?>
</body>
javaScript.html
...
<!-- Google Login https://developers.google.com/identity/sign-in/web/sign-in -->
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
...
adminScript.html
<script>
...
// https://developers.google.com/identity/sign-in/web/reference
function init ()
{
gapi.load ('auth2', function () {
/* Ready. Make a call to gapi.auth2.init or some other API */
$('#loading-message').val ("").empty ();
});
}
// Trouble Shooting: https://stackoverflow.com/questions/41448014/google-script-oauth2-error-redirect-uri-mismatch
// Make sure redirect faces production script
function onSignIn (googleUser)
{
console.log ("Calling onSignIn");
var google_profile = googleUser.getBasicProfile ();
console.log ('ID: ' + google_profile.getId ()); // Do not send to your backend! Use an ID token instead.
console.log ('Name: ' + google_profile.getName ());
console.log ('Image URL: ' + google_profile.getImageUrl ());
console.log ('Email: ' + google_profile.getEmail ()); // This is null if the 'email' scope is not present.
displayAdminInfoCall (google_profile);
fillAdminNavs (google_profile);
}
...
</script>
