Ionic & Google OAuth for mobile app and web site

Question

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?

Answer 1

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.