Google Sign-In in ionic 3

Google Sign-In is one of the easy way of  registration or login for user without entering lots of details in sign-up and then in sign-in form,Google Sign-In let us jump many steps and gets our data to the home page once we get logged in.

This plugin allows you to authenticate and identify users with Google Sign-In on IOS and Android. Out of the box, you’ll get email, display name, given name, family name, profile picture URL, and user id. You can also configure it to get an id Token and serverAuthCode.

This plugin only wraps access to the Google Sign-In API. Further API access should be implemented per use-case, per developer.

  • Generating a new Ionic 3 application:

    Let’s start by creating a new Ionic 3 application with the following command:

    ionic start ionic-google-oauth blank 

    Once that has finished generating, you should make it your current working directory by running the following command:

    cd ionic-google-oauth 

    We are going to be implementing a very simple example for this application, so we are not going to require any additional pages or providers. In the following step, we will need to supply the Bundle ID of the application. By default, this will be some generic Ionic Framework Bundle ID like this:

    <widget id="com.mycompany.somecoolapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    by editing your config.xml file. It’s important that you do this now, as it will be a hassle to change it over later.

  • Configuring Google Sign-In for Android

    To install the Google Plus native plugin, you need Google Plus client id. To get the client id, Go to the Google console.
    Then click create a new project and give it a name.

    Then click the Google+ API link under the Social APIs.

    Then click the Enable API to enable the Google Plus API and Create credentials to create the client id for Google Plus.
    Choose Android from the Drop down of where will you be calling the API from?. And click the user data radio button too. Then click the what credentials do i need? button to proceed further.

    Now it will ask you to generate the SHA1 code.


    Use the below command in your terminal to generate the SHA1 code. It requires Java and Android Studio. So please check your system before using the below command.

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

    #If in case it didn’t work out then follow these steps:

    [

    To get the fingerprint(SHA1 ) just follow the below instructions :

    Step 1 :

    Go to - C:\Program Files\Java\jdk1.7.0_25\bin

    Step 2 :

    Inside the bin folder there is a .exe file which is named as “jarsigner.exe”. Double click on the .exe file and run it.

    Step 3:

    open command prompt (press Windows Key + R then type “cmd” without quotations in the appearing dialogue box and then press Enter Key).

    then type the code sniff below :

    cd C:\Program Files\Java\jdk1.7.0_25\bin
     then again type on cmd :
    keytool -list -keystore "C:/Documents and Settings/Your Name/.android/debug.keystore"

    Step 4:

    Then it will ask for Keystore password now. The default password if “android” type and enter

    Now Your are Done. You will have a Key Like Below 🙂

    ]

    Copy the SHA1 code from the terminal and paste it here. And get the package name from config.xml or AndroidManifest.xml. Then click the create client id button.
    Then give a name for your product, which will be displayed while using the Google Plus login. Click continue to generate the client id.

    Now the client id is created.

  • Installing the Google Plus Plugin

    We are now ready to install the Cordova plugin required to perform authentication, but before you do that it is important that you first run this command:

    ionic cordova platform add ios
     ionic cordova platform add android

    Use the below code to install the Google Plus native plugin to your Ionic 3 project.

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

    Replace the myreversedclientid with your actual client id.
    Now create a button in the home.html with a click event.

    <button ion-button (click)="googlelogin()">Google Login</button>

    Then import the Google Plus class to home.ts.

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

    Now create a reference in the constructor using.

     constructor(private googlePlus: GooglePlus) { }

    Then create a function to call the Google Login.

     glogin()
    {
    this.googlePlus.login({})
    .then(res => {
    console.log(res);
    alert("success "+JSON.stringify(res));
    })
    .catch(err => {
    console.error(err);
    alert("error "+JSON.stringify(err));
    });
    }

    The above code calls the Google Plus Login and gives the information in the alert box.
    Below is the response data after the successful login.

    email
    userId
    displayName
    familyName
    givenName
    imageUrl
    

    That’s all. You are done. You can generate the APK using the below command

    ionic cordova platform add android
    ionic cordova run android

    Deploy the APK on your physical device to test it. You can not test this plugin using the Android Emulator. You need to test this on the actual device. If you run this on the emulator, the Google Plus plugin won’t work.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *