google-signin don't return user info

Question

I am using google-signin element from Google Web Components, but I don't know how to return user info.

<google-signin
      client-id="{{my-id}}" scopes="email profile"
      signed-in="{{signedIn}}"></google-signin>

I tried to write some JS function but it didn't work.

function (signedIn) {
       var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
       console.log('Name: ' + profile.getName());
       console.log('Image: ' + profile.getImageUrl());
  }

Excuse me if this is stupid questions, but I am not good at web developing. Thank you for your advice.

Answer 1

From polymer documentation:

The google-signin-success event is triggered when a user successfully authenticates and google-signin-failure is triggered when this is not the case. Both events will also provide the data returned by the Google client authentication process. You can also use isAuthorized attribute to observe authentication state.

Additional events, such as google-signout-attempted and google-signed-out are triggered when the user attempts to sign-out and successfully signs out.

The google-signin-necessary event is fired when scopes requested via google-signin-aware elements require additional user permissions.

https://elements.polymer-project.org/elements/google-signin

<google-signin ... id="myLoginIn"></google-signin>
<script>
  var t = document.querySelector('#t');

  t.addEventListener('google-signin-success', function(data) {
    ...
  });
</script>

Or you can use:

<google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin>

<google-signin-aware
        scopes="{{scope}}"
        signed-in="{{signedIn}}"
        is-authorized="{{isAuthorized}}"
        need-additional-auth="{{needAdditionalAuth}}"
        on-google-signin-aware-success="handleSignIn"
        on-google-signin-aware-signed-out="handleSignOut"></google-signin-aware>

And then you can get username name like that:

var aware = document.querySelector('#awareness');
aware.handleSignIn = function(response) {
      console.log('[Aware] Signin Response', response);
      var userName = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile().getName();
};

Here you can find the full demo: https://github.com/GoogleWebComponents/google-signin/blob/master/demo/index.html