Many web application uses the Google Plus API or Facebook API to log in. In this tutorial, you will learn, how to integrate the Google Plus API to the Ionic 2 mobile application. But, this tutorial focuses the Android platform only. This tutorial is not focusing the iOS platform with Google Plus API.

Application Preview in the Browser.

If you want to integrate the Facebook native plugin, then visit the below URL.

https://ampersandacademy.com/tutorials/ionic-framework-version-2/ionic-2-facebook-plugin-example

Create a new Ionic 2 project using

ionic start gplus blank --v2

To install the Google Plus native plugin, you need Google Plus client id. To get the client id, Go to the Google console using

https://console.developers.google.com/

Then click create a new project.

Give a name for the new project.

Then click the Google+ API link under the Social APIs.

Then click the Enable API to enable the Google Plus API.

Then click the create credentials to create the client id for Google Plus.


Choose Android from the Drop down of where will you be calling the API from?. And click the user data radio button too. Then click the what credentials do i need? button to proceed further.


Now it will ask you to generate the SHA1 code.

Use the below command in your terminal to generate the SHA1 code. It requires Java and Android Studio. So please check your system before using the below command.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v

The above command will ask a password when you execute them in the terminal. The password is android. The above code is tested with Mac OS Sierra. For windows, the path may vary.

Copy the SHA1 code from the terminal and paste it here. And get the package name from config.xml or AndroidManifest.xml. Then click the create client id button.

Then give a name for your product, which will be displayed while using the Google Plus login. Click the continue to generate the client id.

That's all. Now the client id is created.

Use the below code to install the Google Plus native plugin to your Ionic 2 project.

cd gplus

ionic plugin add cordova-plugin-googleplus 
--variable REVERSED_CLIENT_ID=XXXXX --save

npm install --save @ionic-native/google-plus

Replace the XXXX with your actual client id.

Now create a button in the home.html with a click event.

<button ion-button (click)="glogin()" >Google Login</button>

Then import the Google Plus class to home.ts.

import { GooglePlus } from '@ionic-native/google-plus';

Now create a reference in the constructor using.

constructor(private googlePlus: GooglePlus) { }

Then create a function to call the Google Login.

glogin()
{
this.googlePlus.login({})
.then(res => {
console.log(res);
alert("success "+JSON.stringify(res));
})
.catch(err => {
console.error(err);
alert("error "+JSON.stringify(err));
});
}

The above code calls the Google Plus Login and gives the information in the alert box.

Below is the response data after the successful login.

email
userId
displayName
familyName
givenName
imageUrl

You can store them on your own server for your future use using the Ajax POST or GET service.

The Full home.ts code

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus';


@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private googlePlus: GooglePlus) { }


glogin()
{
this.googlePlus.login({})
.then(res => {console.log(res); alert("success "+JSON.stringify(res)); })
.catch(err => {console.error(err); alert("error "+JSON.stringify(err));});
}



}

That's all. You are done. You can generate the APK using the below command

ionic platform add android
ionic build android

Deploy the APK on your physical device to test it. You can not test this plugin using the Android Emulator. You need to test this on the actual device. If you run this on the emulator, the Google Plus plugin won't work.

Tested Device:
Yureka Plus

Below is the Ionic information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1