Google Signin Website

Google Signin Website

Released: Google Signin Website

Touching presence on web

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.

    website-camera-input Preview

  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:

<div class="row">
<div class="small-4 columns">
    <img src="https://raw.githubusercontent.com/vishwarajanand/GoogleWebSignin/master/demo/1-home.png?raw=true">
</div>
<div class="small-4 columns">
    <img src="https://raw.githubusercontent.com/vishwarajanand/GoogleWebSignin/master/demo/2-signin.png?raw=true">
</div>
<div class="small-4 columns">
    <img src="https://raw.githubusercontent.com/vishwarajanand/GoogleWebSignin/master/demo/3-signout.png?raw=true">
</div>
</div>

Dialogue & Discussion