My Google Plus Android adventure

Hi

So here are my steps to get Google Plus + Firebase on Android going, after many efforts and frustrations, like many, I suspect.

First of all, https://firebase.google.com/docs/auth/web/cordova did not work for me as the universal link plugin has flaws. Next, lots of tutorials are really good, but because e.g. Firebase has changed, some things are no longer relevant.

In the end, the tutorial by the author of Google Plus Plugin was most useful, with some tweaks (https://github.com/EddyVerbruggen/cordova-plugin-googleplus).

My take on matters for Android (I don’t have iOS) and a debug version:

Starting point: created a new ionic project, with cordova android platform added (no other plugins added). All commands from the project’s root folder (as always). No SUDO!!

  1. Create project in Firebase
  2. Enable Google signin - this will create webcredentials you can find in Firebase under WebSDK. You will need this to configure the plugin
  3. Generate your keystore if you haven’t (e.g. https://angularfirebase.com/snippets/deploying-ionic4-to-android-and-google-play/) ; keytool -genkey -v -keystore debug.jks -keyalg RSA -keysize 2048 -validity 10000 -alias debug - for instance password android
  4. Generate SHA1 fingerprint as per description by Eddy Verbruggen. keytool -exportcert -keystore debug.jks -list -v -alias debug
  5. Use SHA1 from step 4 to add Android app in Firestore to your project. Use package name, same as in config.xml
  6. Add the plugin using the part on " Using the Cordova CLI and npm" as per description of Eddy Verbruggen
  7. I assured the config.xml contained the plugin variables as per Phonegap build description. And here you need the webclient ID as per Firestore WebSDK.
  8. In app.component.ts I added the following quick code:
  (window as any).plugins.googleplus.login(
        {
         // 'scopes': '... ', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
          'webClientId': '482115072883-t6XXXXXXXXXXXXo7f9.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
          'offline': true // optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
        },
        function (obj) {
          console.log('SHOW ME THE MONEY!',obj);
          alert(JSON.stringify(obj)); // do something useful instead of alerting
        },
        function (msg) {
          alert('error: ' + msg);
        }
    );

Obviously this is totally dirty using function etc. And to go to Angularfire, you need to use the token to signin or something, but that all is for later worries.

And then continue the normal build through ionic cordova run android… You know the drill…

Until…

I got really frustrated from receiving errorcode 10 all the time. It seemed that I needed to point more explicitly to my keystore. There are multiple options, I believe the build.json one is the prettiest one.

https://cordova.apache.org/docs/en/latest/guide/platforms/android/#signing-an-app

I used the CLI version: cordova run android -- --keystore=debug.jks --storePassword=android --alias=debug --password=android - please note the double -- after android. Dunno why, but it works.

And then I still encountered error 10. By running cordova clean (no NOT ionic cordova clean) it worked flawlessly.

Some other things to keep in mind:

  • you will need to have an OAuth consent screen configured for your project. See https://console.developers.google.com/
  • you will NOT need to add OAuth credentials (API and/or ClientIDs) on the same website. Neither do you need to change anything on that screen. Firebase console (add Android app and enable Google Signin) will add the relevant clientIDs for you. If you mess with these settings, be ready to get into a steep learning curve!

Thanks to @antiframes for his post: Google Login error 10

Hope this helps anyone

And I assume some great tutorial builder can make a much prettier version of this tutorial :slight_smile:

Tom

1 Like