'How can I display a users name and profile picture after signing in with google on my site?

I am trying to add a Google Sign-in system to my website. For now, I'd like it to display their first & last name as well as their profile picture. How can I implement this in HTML on my website. I am using the sign in with Google API for websites (https://developers.google.com/identity/sign-in/web/sign-in).

I have already implemented the Sign In button on the web site. The code shown is just a basic webpage that has a sign-in button and a div with the ID profile info. Obviously that DIV is where I'd like the profile info to appear.

<html>
    <head>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <meta name="google-signin-client_id" content="-PLACEHOLDER-">
    </head>
    <body>
        <div class="g-signin2" data-onsuccess="onSignIn"></div>
        <div id="profileinfo"><!---Put info here---></div>
    </body>
</html>

I'd expect for the page to contain the Sign-In button that is already there, as well as a of the signed in user's profile picture and a

of their first and last name.

javascripthtmlgoogle-oauthgoogle-signin


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions