Note: This post is for Ionic 1. If you are working with Ionic 3, 4 or 5 go to Add Google Login to your Ionic App.
Introduction
Congratulations, you have made a great decision by choosing Ionic to build your app. (You can read more why I believe this in this post “Ionic FTW”).
In this blog you will find lots of content that will guide you on building and shaping beautiful mobile apps.
In particular, this post will be about adding Google NATIVE authentication to your Ionic app. This will enable an easy and elegant way for your users to login to your app.
Why adding Google+ Authentication into your app will benefit you and your users?
- Improve conversions: Help people log into your app quickly without having to remember another username and password.
- One login across every device: Make it easy for people to log in and access their info across multiple platforms and devices.
- Build a trusted relationship: Give people control over the info they share with your app.
- Access profile info: like picture, gender, age, name, without having to ask for it.
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+
There are some configurations you need to set in order to communicate your app 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 theREVERSED_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
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 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.
What we have done so far:
- An Ionic app (existing or new one)
- A Google app with the proper configurations
- GooglePlus Plugin installed into your Ionic app
Step 3: Adding Login/Logout functionality
Now we will go straight to the code so open your Ionic app with your preferred code editor. Personally I use and recommend atom.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 }; });
What we have done so far:
- At this point you should have an Ionic app with Google login and logout functionalities working.
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.
As you know we also sell beautiful mobile themes, templates and components that you may find super useful as they save you hours of development, time and effort, while giving your projects a great design from scratch. Having said that we have a line of Login / Authentication components that would be the perfect match for your Google+ integration.
The authentication step is the first screen of your app that your users will see, so it’s very important that you pay attention to its appearance.
Here you can experience some of the components we have to offer you:
Enjoyed reading this Ionic Tutorial?
Subscribe to keep learning Ionic Framework! You will receive offers, new ionic tutorials and free code examples from IonicThemes.