Javascript 如何更改Google登录以显示配置文件信息而不是console.log

我已经使用谷歌提供的教程在我的网站上实现了谷歌登录。但是，我不想将配置文件信息存储在console.log中，而是想将其显示在我的网页上。这是我目前拥有的代码：

<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
    function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId());
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());
    };
</script>

函数onSignIn（谷歌用户）{
var profile=googleUser.getBasicProfile（）；
log（“ID:+profile.getId（））；
log（'Full Name:'+profile.getName（））；
log（'给定名称：'+profile.getGivenName（））；
console.log（'Family Name:'+profile.getFamilyName（））；
log（“图像URL:+profile.getImageUrl（））；
log（“Email:+profile.getEmail（））；
};

---

如何更改此设置？

首先，如果您还没有这样做，您需要从开始

如果已经这样做了，请继续将必要的代码嵌入到HTML中。要做到这一点，首先必须在

和

标记之间添加这一行，以引用谷歌平台

    <script src="https://apis.google.com/js/platform.js" async defer></script>

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

这只是为了演示。当然，向用户显示用户数据毫无意义。但是你能用它做的是无限的。

---

例如，您可以获取ID并将用户引导到各自的页面。

感谢您的回复，我刚刚尝试实现了此解决方案，但它似乎不起作用。它会出现错误“uncaughtreferenceerror:$is not defined”，您的HTML中有Jquery吗？如果没有，您必须下载它，或者提供类似

的引用，如果您已经有了它，那么这个错误可能是由脚本引用的错误定位触发的。有没有办法使用JavaScript来实现它？我已经尝试通过更改最后一行代码来实现，但它仍然不起作用

  <script>
function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
   var data = '';
     data += '<ul>';
     data += '<li><img src="' + profile.getImageUrl() + '"/></li>';
     data += '<li>ID: ' + profile.getId() + '</li>';
     data += '<li>Full Name: ' + profile.getName() + '</li>';
     data += '<li>Given Name: ' + profile.getGivenName() + '</li>';
     data += '<li>Family Name: ' + profile.getFamilyName() + '</li>';
     data += '<li>Email: ' + profile.getEmail() + '</li>';
     data += '</ul>';
  document.getElementsByClassName("aClassOfYourOwn")[0].innerHTML =data;
};
</script>

<div class="aClassOfYourOwn"></div>

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

<a href="#" onclick="signOut();">Sign out</a>

<script>
function signOut() {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut().then(function () {
    console.log('User signed out.');
    var data = 'There is no user signed in';
    document.getElementsByClassName("g-signin3")[0].innerHTML =data;
  });
}
</script>