
Ionic Google-plus, FCM and Ad Banner
Super ionic google plus fcm and admob
$0.00
Details
- Version:
- 1.0
- Ionic:
- Platforms:
- iOS, Android
- Released:
- 1 year ago
- Updated:
- 1 year ago
- Category:
- Starters
- Tags:
- ,
##Ionic Starter for Google Plus Authentication, FCM notification and Admob Integration
This repo is an Ionic v4 app to help you understand, how to add Google Plus Log In , FCM Notification and Admob pro to your Ionic App.
For this Ionic example app we are going to build a simple ionic 4 app that allows users to log in using their Google account. Once they log in, they will see a home page with their basic profile info.
Ionic Starter for Google Plus Authentication, FCM notification and Admob Integration.
Download as zip or clone the project using: https://github.com/Kundan-ionicDev/ionic-googleplus-fcm-admob.git
cd to your project and run
npm install
For AdMobRun the following commands to install the AdMob Free, Google plus and FCM plugin:
For AdMob add below mentioned plugin
cordova plugin add cordova-plugin-admob-free --save cordova plugin add cordova-admob-sdk
npm install @ionic-native/admob-free --save`
For Google Plus add below mentioned plugin
ionic cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid
npm install @ionic-native/google-plus```
For FCM add below mentioned plugin
ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm`
>Imports : import { FCM } from '@ionic-native/fcm/ngx'; #####Add the platform for the app to run on your device:
ionic cordova platform add android ionic cordova platform add ios
#####connect your device and run the command:
ionic cordova run android ionic cordova run ios
#####Add below mentioned code for Admob
let bannerConfig: AdMobFreeBannerConfig = { isTesting: true, autoShow: true };
this.admob.banner.config(bannerConfig); this.admob.banner.prepare().then(() => { console.log('sucess'); }).catch(e => console.log(e)); }
showInterstitial() { let interstitialConfig: AdMobFreeInterstitialConfig = { isTesting: true, autoShow: true };
this.admob.interstitial.config(interstitialConfig);
this.admob.interstitial.prepare().then(() => { console.log('sucess'); });' }
>Import below mentioned into page and app.module.ts >import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free/ngx'; ######There is also a detailed tutorial to help you with the Google Account setup and with the step by step of building this Ionic Framework app. --> Add below mentioned code for Login button click :
const loading = await this.loadingController.create({
message: 'Please wait...',
duration: 2000
});
await loading.present();
this.googlePlus.login({
})
.then(async res => {
await loading.onDidDismiss();
this.nativeStorage.setItem('google_user', {
name: res.displayName,
email: res.email,
picture: res.imageUrl
})
.then(() => {
this.router.navigate(["loginsucess"]);
}, (error) => {
console.log(error);
})
loading.dismiss();
})
.catch(async err => {
alert('Error'+ JSON.stringify(err));
const { role, data } = await loading.onDidDismiss();
});
}
--> Add below mentioned code for Logout of Google
this.googlePlus.logout()
.then(res => {
//user logged out so we will remove him from the NativeStorage
this.nativeStorage.remove('google_user');
this.router.navigate(["home"]);
}, err => {
console.log(err);
});
} Add into construction
private googlePlus: GooglePlus and import below mentioned into page and app module.
import { GooglePlus } from '@ionic-native/google-plus/ngx';
For FCM import below mentioned in page and app.module
import { FCM } from '@ionic-native/fcm/ngx';
--> Add below mentioned code to get fcm token into app.component.ts inside
initializeApp() { this.platform.ready().then(() => { this.fcm.getToken().then(token => { console.log('FCM Token ID ::' + token); // alert('FCM Token ::'+token); }); };
###End