温馨提示:本文翻译自stackoverflow.com,查看原文请点击:iframe - Different JavaScript origin for the same web app on each computer causes Error: redirect_uri_mismatc
google-apps-script iframe web-applications google-signin google-apps-script-web-application

iframe - 每台计算机上同一Web应用程序的不同JavaScript来源均导致错误:redirect_uri_mismatc

发布于 2020-03-27 11:25:11

我已经使用Google Apps脚本发布了一个带有Google登录信息的网络应用。每次您在另一台计算机上登录自己的Google帐户访问此网络应用程序时,都会出现错误:“ redirect_uri_mismatch”。

我发现在每台登录google帐户的计算机上,已发布的Web应用程序在请求链接中具有不同的javaScript来源,并且我已将此链接添加到Google开发人员控制台上用于此计算机登录的Authorized JavaScript来源中,也可以使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>

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

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

查看更多

查看更多

提问者
Naoa Lee
被浏览
152
TheMaster 2019-07-03 22:42

这可能不起作用,但是您可以在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的位置。如果0luiframe中存在其他内容,我们将其替换为0lu