Setup Google Login in your Cordova App

We will discuss here, how to implement Google Login using the native Google+ App on your android or or your iOS device in a Cordova/Phonegap App.

We will use the official plugin for Cordova for Google Login by Eddy Verbruggen (https://github.com/EddyVerbruggen/cordova-plugin-googleplus)

Set up to Communicate with Google+

1. Create a Google API Console.
2. For this, Sign in to https://console.developers.google.com with your Gmail account.
3. From the project drop-down, select an existing project, or create a new one by selecting Create a new project.
4. In the sidebar under “API Manager”, select Credentials, then select the OAuth consent screen tab.
5. Choose an Email Address, specify a Product Name, and press Save.
6. In the Credentials tab, select the Create credentials drop-down list, and choose OAuth client ID.
7. Under Application type, select Web application.
8. In the Authorized JavaScript origins field, enter the origin for your app. Example : http://localhost:8080.
9. The Authorized redirect URI field does not require a value. Press the Create button.
10. From the resulting OAuth client dialog box, copy the Client ID. The Client ID lets your app access enabled Google APIs.
11. Go to Library sidebar menu, Go to Google+ API -> Click Enable.
12. To configure Android, generate a configuration file here. Once Google Sign-In is enabled Google will automatically create necessary credentials in Developer Console.
13. Generate a configuration file: Select your app project name you created in Google API console and your android package name will be your app widget ID (which is in your config.xml file). Enable the Google plus service and get your config file.
14. There is no need to add the generated google-services.json file into your cordova project.
15. For enabling the google plus sign in service you will need SHA 1 key which you will get by simply running this command:

For MAC/Linux :$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list –vEnter keystore password: Type "android" if using debug.keystoreFor Windows , run this command :$ keytool -exportcert -list -v \ -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

14. You will get your SHA key and you have successfully enabled Google Sign in.

15. The step above, about keytool, show 2 types of certificate fingerprints, the Release and the Debug, when generating the configuration file, it’s better to use the Debug certificate fingerprint, after that, you have to go on Google Credentials Manager, and manually create a credential for OAuth2 client with your Release certificate fingerprint. This is necessary to your application work on both Development and Production releases.

16. Ensure that you are using the correct alias name while generating the fingerprint.

Install the plugin to your cordova project

After you have done all the above configurations, it’s time to install the plugin into your app. Follow these steps to get this DONE:

Using the Cordova CLI and npm:

$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid
$ cordova prepare

Using the Cordova CLI to fetch the latest version from GitHub:

$ cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid
$ cordova prepare

IMPORTANT:

• You have to replace myreversedclientid with the reverse value of Client ID in your Release credential generated on Google Developer’s Console, this will be: “com.googleusercontent.apps.uniqueId“, without quotes.

Installation (PhoneGap Build)

Add this to your config.xml:

For the NPM Version:

<gap:plugin name="cordova-plugin-googleplus" source="npm">
  <param name="REVERSED_CLIENT_ID" value="myreversedclientid" />
</gap:plugin>

For the Git version:

<gap:plugin spec="https://github.com/EddyVerbruggen/cordova-plugin-googleplus.git" source="git">
    <param name="REVERSED_CLIENT_ID" value="myreversedclientid" />
</gap:plugin>

Adding Login functionality to your code

1. Add a button to your HTML that calls the following function

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 (second argument) gets a JSON object with the following contents, with example data of my Google account:

obj.email          // 'test@gmail.com'
obj.userId         // user id
obj.displayName    // 'Test User'
obj.familyName     // 'User'
obj.givenName      // 'Test'
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
obj.accessToken    // OAuth2 access token

On Android, the error callback (third argument) receives an error status code if authentication was not successful. A description of those status codes can be found on Google’s android developer website at GoogleSignInStatusCodes.

On iOS, the error callback will include an NSError localizedDescription.

Try silent login

You can call trySilentLogin to check if they’re already signed in to the app and sign them in silently if they are.

If it succeeds you will get the same object as the login function gets, but if it fails it will not show the authentication dialog to the user.

Calling trySilentLogin is done the same as login, except for the function name.

window.plugins.googleplus.trySilentLogin(
    {
      '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);
    }
);

It is strongly recommended that trySilentLogin is implemented with the same options as login, to avoid any potential complications.

Thanks for reading; I hope it helps you.