Ionic 4 | Ionic Google Login with Firebase without fail.

ionic4

At the end of this tutorial, you will be able to use google plus plugin in your ionic 4 application. We will use google plus Cordova plugin and firebase to use this feature in our app.

Installation

Install the Cordova plugin to your ionic 4 application
Step 1 – ionic Cordova plugin add Cordova-plugin-google plus
Step 2- npm install @ionic-native/google-plus

After installing the plugin to your ionic 4 apps, you should create a firebase account, and create an application. In the authentication, section enables Google sign in for your application.

Once enabled it will let you download the google-service.jsonconfiguration file, you’ll store this file in your project’s root, right next to the package.json file.

There are two certificates you’ll need, one for production and one for development, in this tutorial we’ll get the development certificate sign-in, and in the end, I’ll show you where to get the production one.

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

Enter the password and you will get the SHA 1 Key, please use this key in firebase. Else you will get the Error 10 while debugging.
For the production environment, you must generate the key and use the sha1 key in your firebase application to enable google sign in.

Download the google-services.json and put this file to the root folder of your application. Now its time to write some code.

Import GooglePlus module to app.module.ts
import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

 constructor(
    private GooglePlus: GooglePlus,
  ) {}

//For login 
 this.GooglePlus.login({})
      .then((res:any) => {
You will get the response.
      })
      .catch((err) => console.error(err));
//For logout  
this.GooglePlus
          .trySilentLogin({
            offline: false,
          })
          .then((res: any) => {
            console.log(res);
            this.google.logout().then(
              (res: any) => {
                console.log(res);
              },
              (err) => console.log(err)
            );
          });

Thank Note

First of all thank you for giving me your time and attention, if you’re experiencing any issues please comment.

Ionic 4 – Integrate Google Admob(Banners, Interstitial, Rewards) tutorial.

Ionic4

At the end of this tutorial, you will learn how to use AdMob in your ionic 4 application. You will be able to use banners, interstitial and rewards video and add those to your application. We will use an AdMob free plugin to show ads in our application.

On every step please create a new app or if you have your app ready and in a working state, install below plugin.

Install Ionic 4 Admob Plugin

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

Please use these sample ad units for test ads, clicking your ads for testing is prohibited and may lead to suspension of your account.

Ad formatSample ad unit ID
Bannerca-app-pub-3940256099942544/6300978111
Interstitialca-app-pub-3940256099942544/1033173712
Interstitial Videoca-app-pub-3940256099942544/8691691433
Rewarded Videoca-app-pub-3940256099942544/5224354917
Native Advancedca-app-pub-3940256099942544/2247696110
Native Advanced Videoca-app-pub-3940256099942544/1044960115
If you want to use rewards video, you must install a plugin for the mediation network. Use below command to install the plugin
cordova plugin add cordova-admob-inmobi --save

Lets Start Coding

Declare a global variable
declare var plugins;

Now we can access the admob using plugins.Admob and start writing the code.

 plugins.AdMob.rewardvideo.config({
    id: "ca-app-pub-3940256099942544/5224354917",
    isTesting: true,
    autoShow: true,
  });
plugins.AdMob.rewardvideo.prepare().then(res=> {console.log(res)

  plugins.AdMob.rewardvideo.show().then(
    (res) => console.log(res),
    (err) => console.log(err)
  );}
,err=> console.log(err))
  document.addEventListener("admob.rewardvideo.events.LOAD", () => {
      console.log("LOAD A REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.START", () => {
      console.log("START REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.CLOSE", () => {
      console.log("CLOSE A HERE");
    });
    document.addEventListener("admob.rewardvideo.events.REWARD", () => {
      console.log("REWARD A HERE");
    });
     document.addEventListener("admob.rewardvideo.events.COMPLETE", () => {
       console.log("complete A HERE");
     });

For Interstitial Ads
 //   plugins.AdMob.interstitial.config({
  //  id: 'ca-app-pub-3940256099942544/5224354917',
  // })
 
  // plugins.AdMob.interstitial.prepare()
 
  // plugins.AdMob.interstitial.show()

Use the above events to perform your actions. The reward video events like REWARD, CLOSE shall be used to perform the actions based on user inputs. In your reward events, you can give rewards to your users, and many more.

Similarly you can use banners and interstitial in place of reward to show other ads.

You can visit other tutorials at http://ionicwhiz.in/ionic

Common Erros

Rewards Video not showing in test mode/ production mode.

Please use the above configuration and I hope you will succed, in case you are facing some other troubles, please comment and let me know. I would be happy to help you.