使用 Google Apps 脚本获取 gmail 地址，错误：redirect_uri_mismatch

问题描述 投票：0回答：3

我尝试使用我的应用程序脚本获取用户的 Gmail 地址。我咨询了好几个地方：

https://developers.google.com/identity/sign-in/web/sign-in

https://developers.google.com/apps-script/guides/html/

在我之前发布的问题中但无法做到，并且出现了一个新问题。

此代码文件gs：

function doGet(e) {
  
 var tmp = HtmlService.createTemplateFromFile("testapi");
 return tmp.evaluate(); 
    
}

此代码文件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>

create clientID console.developers.google.com

URL of Apps script

error

javascript html google-apps-script google-signin
3个回答
1
投票

我重现了您的步骤，它确实检索了 html，但是当您尝试登录时，弹出窗口中会抛出以下错误：

“Error: redirect_uri_mismatch

The JavaScript origin in the request, https://XXXXXXX-script.googleusercontent.com, does not match the ones authorized for the OAuth client.”

您需要复制错误消息中的 URL 并按照以下步骤操作：

1) 在 google cloud 中选择项目，然后转到凭据 -> Oauth 同意屏幕，在授权域中添加“googleusercontent.com”。

2) 编辑您的凭据并将您之前获得的 URL 添加到“Authorized JavaScript origins”部分。

3) 在新版本中部署为 Web 应用程序。

如果我理解正确，那应该可行，尽管需要指出如何部署网络应用程序的一些事情：

1) 如果您设置部署选项以访问应用程序的用户身份执行应用程序，则当您通过链接访问时，应用程序脚本将提示其自己的同意屏幕登录，然后当您单击登录选项时会自动使用已登录的用户登录。

2) 如果您设置部署选项以像您一样执行应用程序，并在访问选项中选择“任何人，甚至匿名”，则当您单击登录选项时，它会提示您预期的 oauth 同意屏幕以进行登录唯一的事情是，当您注销并再次单击登录按钮时，它会自动使用以前的凭据登录（在普通服务器中，它会再次提示您同意屏幕）。

无需实现 Oauth，您可以将部署选项设置为“1)”中的设置，然后使用 App Script 中的 User 对象来获取用户的电子邮件，尽管这是您从中可以获得的唯一信息 [1 ].

[1] https://developers.google.com/apps-script/reference/base/user

1
投票

如果我很清楚您想在前端获取电子邮件和用户个人资料信息，您就不需要做所有这些复杂的事情。

在后端创建此功能：

function getUser(){
  //Session.getEffectiveUser().getEmail(); // Just for scope
  var url = "https://www.googleapis.com/oauth2/v1/userinfo?alt=json";
  var param = {
    method      : "Get",
    headers     : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
    'muteHttpExceptions' :true
  };
  var html = UrlFetchApp.fetch(url,param);
  var data = JSON.parse(html.getContentText());
  Logger.log(JSON.stringify(data))
  /* Result is JSON
  {"id":"Google User ID","email":"[email protected]","verified_email":true,"picture":"https://xxxxxxxxxxxxxxxxx/photo.jpg"}
  */
  return data
}

现在在前端您可以调用此函数来获取用户详细信息:

function getUserDetails(){
  google.script.run
        .withSuccessHandler(function(user) {
            //Do some stuffs with user details
            // Email is in user.email
          })
        .withFailureHandler(function(msg) {
            console.log(msg);
          })
        .getUser(); 
}

当脚本请求 Session.getEffectiveUser().getEmail() 时，用户授予范围以允许获取用户信息。

然后您只需查询 https://www.googleapis.com/oauth2/v1/userinfo?alt=json 端点即可获取用户详细信息。

史蒂芬

0
投票

在 Google Apps 脚本内创建的 Web 应用始终在 IFRAME 内提供，并且无法在 IFRAME 外部访问。

因此标准的 Google 登录组件无法嵌入到这些应用程序中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.