Cordova Android/IOS google login using Google-plus cordova plugin

As everyone knows that the google authentication through web views is going to be deprecated, where the Google developers are suggested to use google sign in API for native Android developers. In Cordova based applications we can implement Cordova google plus plugin which wraps google sign in and makes it accessible to us in JavaScript.
I will first describe general app flow which I implemented in InAppBrowser for understanding what is needed and then how to implement google plus for android and IOS.

General App Flow using InAppBrowser

1. Open https://accounts.com/o/oauth2/auth? client_id=…&response_type=code&scope=…&redirect_uri=..
   in InAppBrowser, which opens login page of Google, on logging it will redirect to our redirect URL with an auth code
   This step will not be supported anymore, Google is going to block requests made to the following URL
2. Bind ‘loadstart’ event, copy the auth code from the URL of the window when login completes and redirect occurs, Close InAppBrowser.
3. Make a POST request using ajax to google authentication to get the access token from auth code.
4. Send Access token to backend to register/sign_in user

In my app I had to remove step 1 and step 2 as InAppBrowser can no longer make a request to get auth code.
To get the auth code I used Cordova google-plus plugin. I took following steps to implement google login in Android and IOS.

Android

1. Open developer console, go to credentials page. Under create credentials create new oAuth ClientId. Select Application type android.
2. Fill in the Signing-certificate fingerprint value as per the instructions. Click on learn more how to create a fingerprint for development debugging app and production release app. Add your package name as per the instructions.
3. Copy the client ID xxxxxxxxxxxxx.apps.googleusercontent.com created for Android.
4. In config.xml add the following code:
   The value is the reverse of the client id as generated for Android which you copied in step 3. Run Cordova build an android in Cordova directory. The google-plus plugin is successfully installed in your application.

After installing google-plus plugin

• The google-plus plugin provides following method to make a request to google and get auth code. The webClientId is client Id generated from oauth client id for the web, it is completely different from the client ID generated in step 1.

window.plugins.googleplus.login(
    {
      'scopes': '... ', // optional, space-separated list of scopes, If not included or empty, defaults to `profile and`email`.
      'webClientId': 'client id of the web app/server side', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
      'offline': true, // optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
    },
    function (obj) {
      alert(JSON.stringify(obj)); // do something useful instead of alerting
    },
    function (msg) {
      alert('error: ' + msg);
    }
);

• The success callback provides the google auth object which contains following values.

 obj.email          // 'eddyverbruggen@gmail.com'
 obj.userId         // user id
 obj.displayName    // 'Eddy Verbruggen'
 obj.familyName     // 'Verbruggen'
 obj.givenName      // 'Eddy'
 obj.imageUrl       // 'http://link-to-my-profilepic.google.com'
 obj.idToken        // idToken that can be exchanged to verify user identity.
 obj.serverAuthCode // Auth code that can be exchanged for an access token and refresh token for offline access

• The google auth object in success callback has obj.serverAuthCode which is used to generate the access token. To generate access token I made the following request in the frontend.

$.post('https://accounts.google.com/o/oauth2/token', {
        code: code
        client_id: constants.GOOGLE_CLIENT_ID
        client_secret: constants.GOOGLE_SECRET
        grant_type: 'authorization_code'
        redirect_uri: ""
 }).done(@onSuccess.bind(this)),

• When the user clicks on Google login button, bind an action to the button which calls the google-plus plugin method in step 4 to generate an access token, all other steps involving register/sign_in from access token are already implemented in boilerplate code.

IOS

• Similar to android we need to create oAuth client ID for IOS. The bundle id in oauth credential page for IOS application is the application id you have set in config.xml file (e.g. com.LungeSystems). After creating the oauth client ID set the value of reversed client id in config.xml file. All other steps are same as the android application.
• In IOS please make sure that REVERSE_CLIENT_ID value is com.googleusercontent.apps.xxxxxxxxxxx, i.e. reverse of client id generated for IOS. If it is not reversed client id it is going to throw an error invalid redirect uri, when trying to get auth object (contains auth code value as described in android). I have also seen in the web docs that oauth webClientId option in login function is not required for generating idToken in IOS, but I am not sure if auth code can be generated without web client id, need to test it.

If any of you need screenshots let me know.