Ionic 3 Google Login

Question

I'm trying to integrate The Ionic Google Plus Native Plugin to allow users to log into my app from their phone using Google Login. This is just a wrapper around this Cordova / PhoneGap library.

I think I'm just about all the way there. I have a button on my login screen and when I click it on my Android phone, I am confronted with the expected "Choose an account" screen. But when I actually do tap on one of my accounts and look at what happened in Chrome Dev Tools (by way of Remote Debugging), I see that an error resulted, cryptically denoted 12500 with a useless stack-trace.

It seems that a handful of stars need to align to get this to work, and it's not entirely clear how I can get this to work concurrently in Development and Production modes. Here's what I've checked:

In Google APIs & Services => Credentials dashboard
- I have two OAuth 2.0-client IDs for Android, one is meant for Development and one is meant for Production.
- Both of these are configured with the same Package name, which is the fully qualified name in the Android manifest file, named starting with "com.blah.blah.blah" which is also the widget id in the config.xml file
- Each of these is configured with a different Signing-certificate fingerprint, which I established using keytool.
  - For Production, I generated the SHA1 fingerprint from the keystore file I use to sign the app for production.
  - For Development, I generated the SHA1 fingerprint by extracting the debug APK generated by ionic cordova run android, and running keytool on the contained META-INF/CERT.RSA file.
In the Ionic project's config.xml file
- I have a section that looks like this:

I've been substituting for ABCDEFG-12345 above the Production or Development unique client id part there, I don't see a clear way to support both at once except maybe as a custom build step.
- In the Typescript for the page with my login button, for now, I'm just doing this:

import { GooglePlus } from '@ionic-native/google-plus
...
constructor(public googlePlus: GooglePlus){}
...
login() {
  this.googlePlus.login({
    webClientId: 'ABCDEFG-12345.apps.googleusercontent.com',
    offline: false
  })
  .then(res => console.log(res))
  .catch(err => console.error(err));
}

Again here, substituting ABCDEFG-12345 above the Production or Development unique client id part there, I don't see a clear way to support both at once except maybe as a custom build step.

When I tap the button, I just get the 12500 error in Development mode. I haven't tried in Production mode. What the heck am I missing and how do I get to the bottom of it?

Cross-posted issue in github repository here.

UPDATE: 7 NOV 2018 Omitting all options from the call to this.googlePlus.login (that is, passing an empty object, {}) I don't get the error, but this.googlePlus.login, I get back a user object in response. However, I do not get back (at least on Android) an idtoken (which I can pass to my server-side code). So my object looks like this:

{
  accessToken: "XXXXXXXXXXX"
  displayName: "XXXXXXXXXXX"
  email: "XXXXXXXXXXX"
  expires: XXXXXXXXXXX
  expires_in: XXXXXXXXXXX
  familyName: "XXXXXXXXXXX"
  givenName: "XXXXXXXXXXX"
  userId: "XXXXXXXXXXXX"
}

Any ideas how to get an idtoken in the callback object?

Ionic 3 Google Login

0 Answers