Google 登录 - 未定义 googleUser答案

【问题标题】：Google Sign In - googleUser is not definedGoogle 登录 - 未定义 googleUser
【发布时间】：2024-01-30 00:10:01
【问题描述】：

为了创建登录系统，我一直在关注 Google 登录教程，现在我有一个登录按钮，可以加载小部件以选择登录。点击后，应该会加载此功能：

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());
}

但是，一旦我选择了帐户并登录，什么都没有发生。在开发者控制台中，当我输入“googleUser”时，它只会显示：

Uncaught ReferenceError: googleUser is not defined

这是我所有的代码：

<!doctype html>
<html>
<head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
  
  <title>S6C Admin Panel</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="imports.html">

  <link rel="stylesheet" href="css/signin.css">
</head>

<body unresolved>
  <core-toolbar>
    <span flex>S6C Admin Panel</span>
    <core-icon-button onclick="takeBack()" icon="arrow-back">Back to S6C Website</core-icon-button>
  </core-toolbar>
  <img id="logo" src="../s6clogo.jpg"></img>
  <center>  
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
  </center>
  <script>
    function takeBack(){
      window.location.href = "http://s6c.org";
    }
    
    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());
    }
  </script>
</body>
</html>

注意运行 sn-p 将不起作用

【问题讨论】：

gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse() 的结果是什么？（登录后）。
当我将它输入到开发控制台时，它只会在新行上打印“Object {}”
奇怪的是它不起作用。既然您使用的是 webcomponents，那么使用 github.com/GoogleWebComponents/google-signin 是否适合您？
不，不幸的是它没有在我的测试中，只剩下 1 周的任务，所以我把它报废了，因为它不需要通过！不过干杯
添加onFailure回调登录按钮function onFailure(error){console.log(error)}<div class="g-signin2" data-onsuccess="onSignIn" data-onfailure="onFailure"></div>并查看返回的错误

标签： javascript html google-signin google-identity

【解决方案1】：

我遇到了同样的问题，使用Jarosław 的提示我设法解决了这个问题。

解决办法：

function onSignIn() {
  const googleUser = gapi.auth2.getAuthInstance().currentUser.get();
  const profile = googleUser.getBasicProfile();

  // do stuff here
}

【讨论】：

这是自 OAUTH v2 以来获取配置文件的正确方法

【解决方案2】：

尝试添加额外的元：

<meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-requestvisibleactions" content="https://schema.org/AddAction" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />

并确保在您的 google Api Manager、Credential 和 OAuth 2.0 客户端 ID 中，检查您的授权 JavaScript 来源，确保您输入运行页面的来源站点。如果您在 localhost 中开发，请添加 http://127.0.0.1 作为您的起源脚本。

【讨论】：