Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Add Google Plus Login to your Ionic App

DZone's Guide to

Add Google Plus Login to your Ionic App

Need to add Google+ to your Ionic app? Look no further!

· Mobile Zone
Free Resource

To start with, you will need:

  • An Ionic app where you will integrate this login. You can either use a blank app, or an existing one. To know on how to create ionic app you can follow my article here.
  • The Google+ Cordova/PhoneGap Plugin to interact with the device native API's.

Set up to Communicate with Google+ For Android

  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. For enabling the google plus sign in service you will need SHA 1 key which you will get by simply running this command:
  15. For MAC/Linux :
    $ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -list –v
    Enter keystore password: Type "android" if using debug.keystore
    
    For Windows , run this command : 
    $ keytool -exportcert -list -v \ -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
  16. You will get your SHA key and you have successfully enabled Google Sign in.

Install Required Cordova Plugin to Interact With Google+ Native SDK

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:

  1. Using your terminal window, go to your Ionic app folder.

  2. Run the following command to install the plugin changing the variable with your own value of client id:

  3. $ cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
  4. You can now see googleplus.js in your files in your project plugin folder..just include in your index.html.

Adding Login Functionality

  1. AngularJS controller that handles the Google+ login for your app.
  2. .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();
          }
        );
      };
    })
  3. Then in your HTML you should add a “Sign in with Google” buttonFunctionality.
  4. <a class="google-sign-in button button-block" ng-click="googleSignIn()">Sign in with Google</a>
  5. 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.
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
  };
});


Thanks for reading; I hope it helps you.

Topics:
ionicframework ,google plus api ,angular js ,google plus ,ionic

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}