Native Google Login

Firetask uses cordova-plugin-googleplus to allow authentication and identification of users with Google Sign-In both on iOS and Android. Out of the box you gets email, display name, profile picture url and user id.

Make sure you have before followed all these installing notes

Overview

Since social logins requires a long and tedious setup, keep in mind that the lines below are a basic steps to get the login working out on device. The work can be long and tedious if you have not already prepared a deployable environment.

If you are a beginner, we strongly recommend that you practice first with empty applications generated by Ionic CLI.

Get your SHA1 fingerprint

SHA1 is the certificate fingerprint required by Google to authorize android apps.

To generate these certificate, you'll need the debug.keystore file that is automatically created by Android Studio. If you are getting troubles to find it, you can test by creating a new android app (template) from the Android Studio and running it on device.

If you are using a Linux or Mac, your debug.keystore file will be found at

~/.android/debug.keystore

or Windows

%USERPROFILE%\.android\debug.keystore

To achieve your SHA1 development fingerprint you need just to

Mac/linux

keytool -exportcert -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

Windows

keytool -exportcert -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

The keytool utility prompts you to enter a password for the keystore. The default password for the debug keystore is android. The keytool then prints the fingerprint to the terminal. For example:

Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09

Activating Google auth

Activating Google auth

An essential step is to make sure you have activated Google authentication and copied the web client ID so that we can use it in two different ways

  1. to add in app config file configs/google.ts.
  2. to create the REVERSED_CLIENT_ID required for the plugin. You can just edit that attribute on both package.json and config.xml

Achieve the reversed client is simple as cake. just reverse it

// original id
3423440778-nc7m9r8ljid2rqp2dkc7ir3ascfu6.apps.googleusercontent.com

// reversed id
com.googleusercontent.apps.3423440778-nc7m9r8ljid2rqp2dkc7ir3ascfu6

Creating the android app

Another essential step is to create the android application into your firebase settings. We need this just to add the SHA1 fingerprint obtained previously. Also you have to make sure for typing exactly the same package name used in your config.xml

google firebase android sha1 certificate

Edit build.json file

We use cordova's build.json file to deploy Ionic applications on device.

Open the build.json file located at project root and replace with your own android debug, release keys.

Installing the platform

$ ionic cordova platform add android // or ios

Installing the plugin

We do not recommend to install plugins individually because it can break out something in building process of cordova, forcing you to re-add the ionic platform. Anyway for just testing purposes, you can

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com.googleusercontent.apps.unique_id
$ cordova prepare

Running on device

If all went well, you can

$ ionic run android

To get the logs you should navigate to chrome://inspect

Note: if yo are receiving error 12501, maybe the cordova aren't assigning the app correctly with debug.keystore. Check out again the SHA1 step.

results matching ""

    No results matching ""