Add Google+ Login to your Ionic App

Google+ Authentication

There are different ways to integrate Google+ authentication into your Ionic app. However, not all of them use the native approach which uses Google+ app to perform the login instead of opening a popup requesting users to enter their credentials to login to Google+ before granting access to your app.

The way it works for hybrid apps to use native api’s and sdk’s is simple, you need a piece (typically a PhoneGap/Cordova plugin) that connects native api’s and sdk’s with the javascript environment where the hybrid apps run. In this case we are going to use a great cordova plugin to interact with the native google sdk.

We will use Google+ Cordova/PhoneGap Plugin to login with Google+ on iOS and Android. This plugin was developed by Eddy Verbruggen and it allows you to log in with your Google account on iOS and Android. You will not only get the email address of the user, but also stuff like their full name and gender.

Hands on!

Remember ... you will need:

• An Ionic app where you will integrate this login. You can either use a blank app, or an existing one.
• To follow the setup steps for android (to enable google+ login on android)
• To follow the setup steps for iOS (to enable google+ login on iOS)
• The Google+ Cordova/PhoneGap Plugin to interact with the device native API's

This is how it will look like

iOS

Android

Step 1: Setup to communicate with Google+

For iOS

• To get your iOS API key, follow Step 1: Creating the Google Developers Console project of the guide to Start integrating Google+ into your iOS app.
• Enable Google services for your app to get a configuration file GoogleService-Info.plist which contains the REVERSED_CLIENT_ID that you will need during the plugin’s installation.

For Android

• Follow Step 1: Enable the Google+ API of the guide: Quick-start sample app for Android.
• Make sure you execute the keytool steps or authentication will fail.

Step 2: Install required cordova plugin to interact with Google+ native SDK

• Using your terminal window, go to your Ionic app folder
• Run the following command to install the plugin changing the variable with your own value:

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

GooglePlus.js is brought in automatically. There is no need to change or add anything in your html.

To see other ways to install the plugin or if you are using Phonegap Build, go to the plugin documentation.

Step 3: Adding Login/Logout functionality

Login

The best way to show you how to add Login functionality is with a real example of the code, here you can see an AngularJS controller that handles the Google+ login for your app.

.controller('WelcomeCtrl', function($scope, $state, UserService, $ionicLoading) {
  // This method is executed when the user press the "Sign in with Google" button
  $scope.googleSignIn = function() {
    $ionicLoading.show({
      template: 'Logging in...'
    });

    window.plugins.googleplus.login(
      {},
      function (user_data) {
        // For the purpose of this example I will store user data on local storage
        UserService.setUser({
          userID: user_data.userId,
          name: user_data.displayName,
          email: user_data.email,
          picture: user_data.imageUrl,
          accessToken: user_data.accessToken,
          idToken: user_data.idToken
        });

        $ionicLoading.hide();
        $state.go('app.home');
      },
      function (msg) {
        $ionicLoading.hide();
      }
    );
  };
})

Then in your html you should add a “Sign in with Google” button

<a class="google-sign-in button button-block" ng-click="googleSignIn()">Sign in with Google</a>

Logout

The following controller contains all the necessary code for the Google sign out:

.controller('HomeCtrl', function($scope, UserService, $ionicActionSheet, $state, $ionicLoading){
	$scope.user = UserService.getUser();

	$scope.showLogOutMenu = function() {
		var hideSheet = $ionicActionSheet.show({
			destructiveText: 'Logout',
			titleText: 'Are you sure you want to logout? This app is awsome so I recommend you to stay.',
			cancelText: 'Cancel',
			cancel: function() {},
			buttonClicked: function(index) {
				return true;
			},
			destructiveButtonClicked: function(){
				$ionicLoading.show({
					template: 'Logging out...'
				});
				// Google logout
				window.plugins.googleplus.logout(
					function (msg) {
						console.log(msg);
						$ionicLoading.hide();
						$state.go('welcome');
					},
					function(fail){
						console.log(fail);
					}
				);
			}
		});
	};
})

Then in your html you should add a “Log out” button

<a class="button button-assertive button-block button-outline" ng-click="showLogOutMenu()">Log Out</a>

Services

You also will need some services to store and get your user’s data. For the purpose of this example I will store user data on the device local storage but you should save it on a database.

angular.module('services', [])
.service('UserService', function() {
	// For the purpose of this example I will store user data on ionic local storage but you should save it on a database

  var setUser = function(user_data) {
    window.localStorage.starter_google_user = JSON.stringify(user_data);
  };

  var getUser = function(){
    return JSON.parse(window.localStorage.starter_google_user || '{}');
  };

  return {
    getUser: getUser,
    setUser: setUser
  };
});

Next Steps

After having the authentication working you can focus on:

• Learn how to build a complete Ionic app step by step
• The routing and adding access control to certain pages within your app
• Store users and tokens in your own database
• Using analytics tools to track users and what they do in your app
• Integrate other authentication methods so your users have more options to choose from.
• Prettifying your app using a theme or your design skills, taking advantage of the many possibilities that Ionic and Sass provide
• Integrate and make use of other Google+ API endpoints to give more powers to your app.