Skip to main content

Google Sign-In Application In Ionic



  • Introduction

  • 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

  1. Logout


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

Comments

Post a Comment