3

I have published a WebApp with Google sign in using Google apps script. Every time you log into your google account on another computer to access this web-app, an error will appear: "redirect_uri_mismatch".

I see that on each computer login to google account, the published web app has different javaScript origin in the request link and I have add this link into Authorized JavaScript origins on the Google developer console for this computer login as well to make Google sign in work.

I want my console.developers.google.com to have just only one authorized JavaScript origin (link app script). I expect all users access and login without error "redirect_uri_mismatch"

It is inconvenient if there are thousands of users, how to improve?

code html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="google-signin-client_id" content="1xxxxxxxxxx-xxxxxxxxi87eht.apps.googleusercontent.com">
    <title>Oauth2 web</title>

    <!-- Google library -->
    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <!-- Jquery library to print the information easier -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <!-- Bootstrap library for the button style-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="profileinfo">
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>

<script>
            function onSignIn(googleUser) {
              var profile = googleUser.getBasicProfile();
              console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
              console.log('Name: ' + profile.getName());
              console.log('Image URL: ' + profile.getImageUrl());
              console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

              $("#profileinfo").append("<h2>Sup " + profile.getName() + ", welcome home my friend</h2>");
              $("#profileinfo").append("<img style='width:250px;height:250px' src='" + profile.getImageUrl() + "'><br><br>");
              $("#profileinfo").append("<p>Your email is: " + profile.getEmail() + "</p>");

            }
        </script>

<button type="button" class="btn btn-danger" onclick="signOut();">Sign out</button>

<script>
            function signOut() {
               var auth2 = gapi.auth2.getAuthInstance();
               auth2.signOut().then(function () {
                 console.log('User signed out.');
               $("#profileinfo").empty();
               $("#profileinfo").append("<h2>Goodbye old friend</h2>");
               });
            }
        </script>
</body>
</html>

Error when logging in on another computer: Error when logging in on another computer:

The change of the link is highlighted in yellow: The change of the link is highlighted in yellow

Marios
  • 26,333
  • 8
  • 32
  • 52
Naoa Lee
  • 135
  • 2
  • 19
  • 1
    what is the question – Pointy Jul 03 '19 at 03:37
  • How is the web app set to execute as? What's the access provided?"only me"? Another computer with the same Google account or a different Google account? – TheMaster Jul 03 '19 at 05:40
  • @TheMaster Script use any computer and any google account user. I deploy as web app with execute the app as me and who has access to the app is anyone. What do I need to change ? – Naoa Lee Jul 03 '19 at 06:15
  • @Naoa I'm not able to reproduce the issue. I always get `0lu` – TheMaster Jul 03 '19 at 06:26
  • 1
    This probably won't work, but you can default to `0` using something like ```` – TheMaster Jul 03 '19 at 06:32
  • @TheMaster Where should I put it? And how it runs – Naoa Lee Jul 03 '19 at 11:59
  • Preferably in the `` section of the html. Your web-app ``script.google.com`` has a sandboxed iframe ``*-script.googleusercontent.com``. We're just trying to change the ``location`` of this iframe using regex. If something other than ``0lu`` is present as iframe, We `replace` it to `0lu`. Most probably won't work, but that's the general idea. – TheMaster Jul 03 '19 at 12:38
  • @TheMaster I recently tested on several different computers and succeeded.Thank you for your enthusiasm !! Hope it works on other computers ^^ – Naoa Lee Jul 03 '19 at 13:39
  • @Naoa I posted my comment as answer. If it works, consider accepting the answer after sufficient testing. – TheMaster Jul 03 '19 at 14:44
  • Thanks @TheMaster help me edit title ^^ – Naoa Lee Jul 04 '19 at 01:44

1 Answers1

2

This may not work, but you can default to 0 using this script at index.html: 

<script>
  if(!/-0lu/.test(location.href)){ 
    location.href = location.href.toString().replace(/-\d+lu/,'-0lu');
  }
</script>

Your web-app script.google.com has a sandboxed iframe *[DIGIT]lu-script.googleusercontent.com. We're just trying to change the location of this iframe using regex. If something other than 0lu is present as iframe, We replace it to 0lu

TheMaster
  • 45,448
  • 6
  • 62
  • 85