Google+ Authentication

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

Step 3: Adding Login/Logout functionality

Login

.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

.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

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
  };
});