Edit in JSFiddle 


              
<head>
    <meta charset='utf-8' >
  </head>
  <body>
    <!--Add a button for the user to click to initiate auth sequence -->
    <button id="authorize-button" style="visibility: hidden">Authorize</button>
    <script>
      var clientId = '837050751313';
var apiKey = 'AIzaSyCwpW0s7Q6rulWFZXk9vuvDbIob2oj7m-I';
var scopes = 'https://www.googleapis.com/auth/plus.me';


function handleClientLoad() {
  gapi.client.setApiKey(apiKey);
  window.setTimeout(checkAuth,1);
}

function checkAuth() {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
  return false;
}

function makeApiCall() {
  gapi.client.load('plus', 'v1', function() {
      var request = gapi.client.plus.people.get({
          'userId': 'me'
            });
      request.execute(function(resp) {
          var heading = document.createElement('h4');
          var image = document.createElement('img');
          image.src = resp.image.url;
          heading.appendChild(image);
          heading.appendChild(document.createTextNode(resp.displayName));

          document.getElementById('content').appendChild(heading);
        });
    });
}
</script>
 <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
    <div id="content"></div>
    <p>Retrieves your profile name using the Google Plus API.</p> 
</body>