Hi All!
If there is anyone responsible for blog.ionic.io support, could you please restore the following page:
http://blog.ionic.io/google-oauth-changes/
I’m pretty sure it was working earlier and there are many links to it from tag pages but it doesn’t seem to be working.
Would like to study this article before the deadline from Google on April, 20th comes into play.
Thanks a lot in advance!
Regards,
Georgy
Yes it looks like the content from that article suddenly disappeared! The page still exists but you can see there is only the head in the source.
I found the article reposted here:
Here’s the text of that article in case it disappears:
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!
login
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.