每台计算机上同一 Web 应用程序的不同 JavaScript 源导致错误:redirect_uri_mismatch

Posted

技术标签:

【中文标题】每台计算机上同一 Web 应用程序的不同 JavaScript 源导致错误:redirect_uri_mismatch【英文标题】:Different JavaScript origin for the same web app on each computer causes Error: redirect_uri_mismatch 【发布时间】:2019-11-13 16:46:36 【问题描述】:

我发布了一个使用 Google 应用脚本通过 Google 登录的 WebApp。每次您在另一台计算机上登录您的 google 帐户访问此网络应用时,都会出现错误:“redirect_uri_mismatch”。

我看到在每台计算机登录到 google 帐户时,已发布的 web 应用程序在请求链接中具有不同的 javascript 来源,我已将此链接添加到 Google 开发人员控制台上的 Authorized JavaScript origins 以用于此计算机登录以及使 Google登录工作。

我希望我的 console.developers.google.com 只有一个授权的 JavaScript 源(链接应用脚本)。我希望所有用户访问和登录都没有错误“redirect_uri_mismatch”

如果有成千上万的用户很不方便,如何改进?

代码 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>

在另一台计算机上登录时出错:

链接的更改以黄色突出显示:

【问题讨论】:

问题是什么 网络应用程序如何设置为执行方式?提供的访问权限是什么?“只有我”?另一台具有相同 Google 帐户或不同 Google 帐户的计算机? @TheMaster 脚本使用任何计算机和任何谷歌帐户用户。我部署为 Web 应用程序并以我的身份执行该应用程序,并且有权访问该应用程序的人是任何人。我需要改变什么? @Naoa 我无法重现该问题。我总是得到0lu 这可能行不通,但您可以使用 &lt;script&gt;if(!/-0lu/.test(location.href)) location.href = location.href.toString().replace(/-\dlu/,'-0lu');&lt;/script&gt; 之类的默认设置为 0 【参考方案1】:

这可能不起作用,但您可以在 index.html 中使用此脚本默认为 0:

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

您的网络应用 script.google.com 有一个沙盒 iframe *[DIGIT]lu-script.googleusercontent.com。我们只是尝试使用正则表达式更改此 iframe 的位置。如果 0lu 以外的其他内容作为 iframe 存在,我们将其替换为 0lu

【讨论】:

感谢您的捐赠,我在几台不同的电脑上试了试,都成功了!

以上是关于每台计算机上同一 Web 应用程序的不同 JavaScript 源导致错误:redirect_uri_mismatch的主要内容,如果未能解决你的问题,请参考以下文章

在同一网络上不同计算机上运行的进程之间进行通信的推荐方式

可以在同一台计算机上运行具有不同配置文件的同一应用的两个实例吗?

Qt UDpsocket 在同一台计算机上工作,但不在同一网络上的两台计算机上工作

Java网络编程

Java网络编程入门

如何向 Internet 公开 Web API 以授予与同一网络上的不同计算机连接的能力