Released: Google Signin Website

This weekend I thought to try out Google Sign-in button on a test website and build a demo. This type of idea was getting repetitive in my blogs so I wrote a website without giving much fuss about it. I feel it’s pointless to pull redundant details from internet and paste on my blogs and anyways not many people read my website, LOL. Looking back I can connect the dots and pull very insightful reasons from the internet around the benefits of having a Google Sign-in button but I think it’s not worth into going such details as most folks who have ever attended a web design 101 class know that Google Sign in reduces the burden of the user to login and hence promises better UX.

Goals

1. Have a website to pull User’s email, name and some ID upon sign in

2. Have a callback upon sign in and sign out where a custom task can be coded

Flow

As POC, I made a simple website to solve this problem, this one: GoogleWebSignin. I had observed that I need to follow only two tiny details:

• Have a Google Developers App to have Google handle Auth

• Have code pointers to call Google from Website

1. Have a Google Developers App to have Google handle Auth:

   I headed to Google API credentials page and then to Client ID for Web application where I whitelisted my domains for oAuth.

   

2. Have code pointers to call Google from Website:

   In the HEAD tag:

   
    // in HEAD tag
    <script src="https://apis.google.com/js/platform.js" async="" defer=""></script>
   <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com" />
    

   In the Body tag:

   
    // in Body tag
   <div id="btn-login" class="g-signin2" data-onsuccess="onSignIn"></div>
    <a id="btn-logout" style="float:right;" href="#" hidden="" onclick="signOut();">Sign out</a>
    

   In the Scripts:

   
    <script>
        function signOut() {
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function () {
                // callback
            });
        }
        function onSignIn(googleUser) {
            profile = googleUser.getBasicProfile();
            console.log('Email: ' + profile.getEmail());
            // callback
        }
    </script>
    

I felt it was straightforward to implement and does not have many dependencies to slow me down. Having a simple website to call Google Sign-in is very satisfying. I tested it on my Chrome browser by going to the URL. For my demo, the source is hosted on GitHub repo: GoogleWebSignin repo, quick sneak peek is below: