Google Sign In with Ionic (Android & IOS)

tutorials
1

Hello everyone,

You want to have your Google Sign in on your Ionic2 app ? You came to the right post!
It’s been such a pain to get this working that I think it’s worth sharing a concise tutorial.

The mistake (don’t do it)

At first I tried to implement it as anyone would do on any web project. Well Ionic is JS, but it’s mobile.
My first approach was to create a google project and implement OAuth2.

So you add this to your index.html

<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

And then you try to find workaround in your GoogleService.ts (or whatever you want to call it) with that kind of code

window['googleApiClientReady'] = () {

}

At some point you manage to make it work … On browser. But then you launch it on your device and realize that that way of signing in is now blocked. You discover too late this article http://blog.ionic.io/google-oauth-changes/.

Let’s do this! (the right way)

If in your google console you created some stuff, delete everything, let’s start all over again.
With your empty google project you’re ready to go!

IOS Setup

1 - Go to https://developers.google.com/mobile/add
Pick IOS, add your project name and your project Bundle (you’ll find this in your config.xml file (here com.awesome.project)

<widget id="com.awesome.project" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

2 - Enable Google Sign in
3 - You can download GoogleService-Info.plist but don’t store it inside your project

Android Setup
1 - Go to https://developers.google.com/mobile/add
Pick Android, add your project name and project id (com.awesome.project)
2 - Enable Google Sign in
3 - Go to your term and run, you’ll create a keystore useful to sign your app once you want to release it

keytool -genkey -v -keystore my-key.keystore -alias myalias -keyalg RSA -keysize 2048 -validity 10000

4 - Remember your password and don’t lose that file
5 - Run and copy SHA1 code

keytool -exportcert -list -v \
-alias myalias -keystore my-key.keystore

6 - Copy that SHA1 code on the google developer page and enable Google Sign In

image
image.png2224×696 95.4 KB

You’re all set, if you go back to your Google Console you should see new OAuth2 Client IDs, one for Android, one for IOS and one for Web.

THE plugin

To install the plugin that will allow you to sign in, first open the IOS Client under OAuth2, copy Client ID.
Then just install the plugin with

cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=THE_CLIENT_ID_YOU_JUST_COPIED

The end

Go to your Angular service add

import { GooglePlus } from 'ionic-native';

And then you should have something like

public signIn() {
  		GooglePlus.login({
          'webClientId': '--------------',
          'offline': true
        }).then((res) => {
        }, (err) => {
        });

Just replace the webClientId value with your webClientId under OAuth2 section, pick Web Client and paste the Client ID.

WTF I just tried it on Android and it doesn’t work!!

Oh yeah, so if you want to test it on your Android device there are few more commands you need to know. Remember that SHA1 for Android ? We didn’t do that for nothing.
You need to sign your app. So build your APK.

ionic build android --release

Then you want to sign it with your keystore

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ~/my-key.keystore  ./platforms/android/build/outputs/apk/android-release-unsigned.apk myalias

Finally to get it on your phone, uninstall your app from your phone and run

adb install ./platforms/android/build/outputs/apk/android-release-unsigned.apk

AND NOW IT WORKS!

Going further (BehaviorSubject)

I’ll be concise too but if you implement this in a Service so you can use it anywhere around your app you might want to find a way to tell your app once you’re login, especially your controllers.

In Ionic 1 you could use $broadcast to tell anywhere in your app that kind of information.
With Angular 2 you can use BehaviorSubject as followed:

In your service define import this

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Then define your BehaviorSubject that will handle User events.

private _currentUser = new BehaviorSubject<User>(null);
public currentUser$ = this._currentUser.asObservable();

Once your user is connected (or any event your want) just use this

this._currentUser.next(<User>data);

Then on your controller import

import { Subscription } from 'rxjs/Subscription';

and declare it

private subscription:Subscription;

and you’ll be ready to listen to your user events as follow

this.subscription = this.userService.currentUser$
	       .subscribe(usr => this.onLoginUpdate(usr));

If you need more explanation, know better ways of achieving this or have comment, please let me know !
Cheers!

1 Like
2

Nice tutorial, thanks for writing that down!

You could also use Ionic Events directly: http://ionicframework.com/docs/api/util/Events/

1 Like