Different JavaScript origin for the same web app on each computer causes Error: redirect_uri_mismatch

Question

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:

The change of the link is highlighted in yellow:

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
– TheMaster, Commented Jul 3, 2019 at 5: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
– Naoa Lee, Commented Jul 3, 2019 at 6:15
@Naoa I'm not able to reproduce the issue. I always get 0lu — TheMaster
– TheMaster, Commented Jul 3, 2019 at 6:26
This probably won't work, but you can default to 0 using something like <script>if(!/-0lu/.test(location.href)){ location.href = location.href.toString().replace(/-\dlu/,'-0lu');}</script> — TheMaster
– TheMaster, Commented Jul 3, 2019 at 6:32

TheMaster · Accepted Answer · 2019-07-03 14:42:54Z

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

answered Jul 3, 2019 at 14:42

TheMaster

51.6k7 gold badges76 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naoa Lee Over a year ago

Thanks for your donations, I tried on several different computers and it works !

Collectives™ on Stack Overflow

Different JavaScript origin for the same web app on each computer causes Error: redirect_uri_mismatch

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related