September 1, 2016
  • All
  • hybrid mobile development
  • Ionic
  • Ionic Native

Google OAuth Changes

Mike Hartington

Director of Developer Relation...

Howdy, everyone! Hope you’re all doing well. We wanted to fill you in on some new changes coming to Google’s OAuth policy. Here’s a link to the article.

Short Version: Starting October 20, 2016, if you’re using Google OAuth in a new app, and it’s presented through the InAppBrowser plugin, the OAuth request will be denied by Google. On April 20, 2017, all requests through InAppBrowser will be blocked.

Here’s how to handle this situation in your app.

Google OAuth: the Better Way

While this may be disconcerting, it’s actually a great change! We now have the opportunity to create a better sign-in experience for our users that’s also more secure.

We recommend using the Google Sign-in Plugin with Ionic Native. We can use the plugin because the authentication flow uses the native Google SDK and doesn’t rely on the InAppBrowser plugin.

To get started, we’re going to need to do a few things first.

All of this is covered in the plugin’s README, so this will be an abridged version.

We’ll focus on iOS for now, since Android is a bit more in-depth, but the plugin’s README has all the info you’ll need.

First, we need:

  • App bundle ID (the reverse domain ID listed in your config.xml)
  • A Google Developer Account

We can navigate to the Google Developer Portal and start to add iOS support. We’ll give the project an app name (typically your app’s actual name) and bundle ID in our config.xml. It’s important to note that if we change the bundle ID at any point, we’ll need to go back and register our app again.

googleApp

Once the information has been entered, we’ll get a file called GoogleService-info.plist, which contains the REVERSED_CLIENT_ID. Copy that and paste it down somewhere; we’ll need it for the plugin installation.

To install the plugin, we’re going to pull the latest bits from GitHub, instead of what’s on NPM, because the code on GitHub is more up to date.

$ ionic plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

Here, we can replace myreversedclientid with the value that’s in our GoogleService-info.plist.
With the plugin installed, we can now add our logic to authenticate a user.

The Actual Code

Now that all the hard work of setting up auth is done, the rest of the work is pretty straightforward. We’ll use Ionic Native’s GooglePlus class to do most of the work.

We’ll create a simple page component with two buttons: one to log in and one to log out. We’ll also add a card to display some data about the user, once they’re logged in.

import {Component} from '@angular/core';

@Component({
  template: `
  <ion-content padding>
    <ion-card *ngIf="userData">
      <ion-card-content>
        <img class="profile-img" [hidden]="!userData" [src]="userData.imageUrl" />
        <h1>{{userData.displayName}}</h1>
        <p>{{userData.email}}</p>
      </ion-card-content>
    </ion-card>
    <button (click)="loginUser()">Login</button>
    <button (click)="logoutUser()">Logout</button>
  </ion-content>
  `
})
export class HomePage {
  public userData;
}

Let’s add an import for GooglePlus.

import {Component} form '@angular/core';
import {GooglePlus} from 'ionic-native';

Then, we’ll create two methods, loginUser() and logoutUser()

For loginUser(), we’ll call GooglePlus.login()

  loginUser() {
    GooglePlus.login({})
      .then(
      (res) => {
        console.log('good');
        this.userData = res;
      },
      (err) => {
        console.log('error');
        console.log(err);
      });
  }

Login accepts a Scope object, or additional information you require for the authentication session. For now, we can just pass an empty object and handle the promise returns. Here, our card from the template will display the data that gets returned from the login request.

To handle logoutUser(), we can just call the logout method:

  logoutUser() {
    GooglePlus.logout().then(() => this.userData = null);
  }

Apart from the initial setup, the actual code we need to write is pretty minimal. The plugin thankfully does all of the hard work, while we just have to write a few lines of code!

reordering

That’s Cool, but What About Ionic 1?

While Ionic 2 is great, there are still a lot of apps using Ionic 1. Good news: Ionic Native can also be used in V1! You can install it via Bower or NPM, depending on your setup.

bower install ionic-native --save

Then add it to your app like this:

angular.module('myApp', ['ionic', 'ionic.native'])

.controller('MyCtrl', function($scope, $cordovaGooglePlus) {
  $scope.userData;
  $scope.loginUser = function() {
    $cordovaGooglePlus.login({})
    .then(function(res) {
      console.log('good');
      $scope.userData = res
    }, function(err) {
      console.log('error');
      console.log(err);
    });
  };
});

Parting Words

While the change to Google’s policy may seem drastic, the changes you actually need to make to adjust to the new rules are very minimal, and you can keep on making apps the way you’re used to, for the most part. For folks who use Ionic Cloud’s Auth features, the Ionic Cloud team is already working on implementing this in the client library, and that workaround should be out soon.


Mike Hartington

Director of Developer Relation...