Google Sign-In Application In Ionic

• Introduction

• Here we create the demo for google sign  in application in Ionic, for that we are using the Google Sign-In Cordova/PhoneGap Plugin.
• This plugin allows you to authenticate and identify users with Google Sign-In on iOS and Android. Out of the box, you'll get email, display name, profile picture url, and user id. You can also configure it to get an idToken and serverAuthCode.

• Google API setup

• To communicate with google api we want to require some tedious steps.
• It is (strongly) recommended that you use the same project for both iOS and Android.

• Android

• To configure Android, generate a configuration file here. Once Google Sign-In is enabled Google will automatically create necessary credentials in Developer Console. There is no need to add the generated google-services.json file into your cordova project.
• Make sure you execute the keytool steps as explained here or authentication will fail.
• Login on Android will use the accounts signed in on the user's device.

• Authenticating Your Client - Certain Google Play services (such as Google Sign-in and App Invites) require you to provide the SHA-1 of your signing certificate so we can create an OAuth2 client and API key for your app. To get your SHA-1, follow these instructions:

• Open a terminal and run the keytool utility provided with Java to get the SHA-1 fingerprint of the certificate. You should get both the release and debug certificate fingerprints.
• To get the release certificate fingerprint:

keytool -exportcert -list -v -alias <your-key-name>

-keystore <path-to-production-keystore>

• To get the debug certificate fingerprint:
• Windows

keytool -exportcert -list -v  

-alias androiddebugkey -keystore  %USERPROFILE%\.android\debug.keystore

• MAC/Linux

keytool -exportcert -list -v -alias

androiddebugkey -keystore ~/.android/debug.keystore

• The keytool utility prompts you to enter a password for the keystore. The default password for the debug keystore is android. The keytool then prints the fingerprint to the terminal.
• For example: Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09

• Install the Google Sign-In Cordova/PhoneGap Plugin

  $ cordova plugin add cordova-plugin-googleplus

--variable REVERSED_CLIENT_ID=myreversedclientid

• REVERSED_CLIENT_ID  get from configuration file (client_id)  

• For example :

cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=76066……..jei2108s.apps.googleusercontent.com

• Implementation

• Create the ionic  blank demo project for more help go to here.

1. Login

  window.plugins.googleplus.login(
   {

     'scopes': '... ',

     'webClientId': 'client id of the web app/server side',

     'offline': true,

   },function (obj) {
     alert(JSON.stringify(obj));

 },
   function (msg) {
     alert('error: ' + msg);
   }
);

Output in object :

           obj.email          // 'eddyverbruggen@gmail.com'
           obj.userId         // user id
           obj.displayName    // 'Eddy Verbruggen'
           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

2. Logout

window.plugins.googleplus.logout(
   function (msg) {
     alert(msg); // do something useful instead of alerting
   }
);