How to post the 'Username' of a JS google login form?

Question

I'm making a web app, and in this web app, users can login with their Google Account. I've got the sign in and sign out part working. In the console log I can check the 'ID', 'Name', 'Image' and 'Email' of the logged in user.

Now I want to let the user know that they are always logged in. I made a script with a variable of the 'Name'. I get no errors but the 'Name' variable stays blanc when I check it on the website.

function onSignIn(googleUser) {
        var profile = googleUser.getBasicProfile();
          console.log('ID: ' + profile.getId()); 
          console.log('Name: ' + profile.getName());
          console.log('Image URL: ' + profile.getImageUrl());
          console.log('Email: ' + profile.getEmail()); 
      }
      </script>    
    </div>

    <p id="name"></p>

      <script>
        function nameUser() {
          var name = profile.getName();
        }

        var userName = {
          userText:"Logged in as:" + name,
          wholeUserName: function() {
                return this.userText;
              }
        }

        x = userName.wholeUserName();
          document.getElementById("name").innerHTML = x; 
      </script>

Am I totally on the wrong path to post a username? This almost seems to work, but I can't figure out the 'Name' part.

Answer 1

You can do something like this:

<p id="name"></p>
<script>

    function onSignIn(googleUser)
    {
        // Get the user
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId());
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());

        // Set the name
        document.getElementById("name").innerHTML = "Logged in as:" + profile.getName();
    }

</script>