Ionic & Google OAuth for mobile app and web site

7
votes

I am having trouble using the Google Plus authentication plugin in an Ionic app which talks to an API shared by our website.

In the Google Console I have three OAuth 2.0 client IDs, example ids given

  • Android client (auto created by Google Service) 1.apps.google
  • iOS client (auto created by Google Service) 2.apps.google
  • Webapp 3.app.googles

They all start with the same 12 digit number and end with "apps.googleusercontent.com".

According to Google's documentation I should be able to authenticate a mobile app and a website against the same API project by adding a scope setting that identifies the API's client id e.g. _scope:audience:server:client_id:3.apps.google_

this.googlePlus.login({
  'webClientId': '2.apps.google',
  'scope': 'scope:audience:server:client_id:3.apps.google'
})

I have been able to get a JWT returned from Google but when I decode it I find the aud value matches my webClientId setting when it should be the value from scope. As far as Ic an tell the only places that save the clientID persistently (as in not excluded by the .gitignore file that Ionic made) are config.xml 

  <plugin name="cordova-plugin-googleplus" spec="git+https://github.com/EddyVerbruggen/cordova-plugin-googleplus.git">
    <variable name="REVERSED_CLIENT_ID" value="google.apps.2" />
</plugin>

and package.json

  "cordova-plugin-googleplus": {
    "REVERSED_CLIENT_ID": "google.apps.2"
  }

So, which clients IDs do I put where so that my mobile app can authenticate users against the same API that our web site is using?

2
cordovaionic-frameworkoauthgoogle-plusionic3
Hope this helps to you:javebratt.com/ionic-google-login - Sampath
The first part of the tutorial is the steps I used to generate the client IDs but doesn't answer the set up with a mix of mobile app ad web site - Craig

2 Answers

2
votes

The solution seems to be a change in the API's client id. Until now we've been using the full id, like this

1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

However, if we changed the API to use only the 1234567890 portion it accepted both the web and app clients, with of which are using their own IDs.

0
votes

You need to use https://github.com/EddyVerbruggen/cordova-plugin-googleplus for both web and mobile

Steps for Ionic integration :

  • Add Plugin & initialise / declare you plugin on app.module.ts

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid $ npm install --save @ionic-native/google-plus

Note: When you're adding your plugin, you need to use reversed client id not forwarded client id (Follow My article: https://codesundar.com/create-reverse-client-id-for-google-login/)

  • Import same plugin on the page, you're using & create an object for GooglePlus class

import { GooglePlus } from '@ionic-native/google-plus';

constructor(private googlePlus: GooglePlus) {

}
login(){
  this.googlePlus.login({})
  .then(res => console.log(res))
  .catch(err => console.error(err));
}