Google plus plugin installation and logn module updated

package-lock.json

@@ -1870,6 +1870,21 @@
         }
       }
     },
+    "@ionic-native/google-plus": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/google-plus/-/google-plus-5.31.1.tgz",
+      "integrity": "sha512-xACJ9JDmoNhlHAuUSuyOelaOokWwkndI1J047flJbL0VUQgBxzlBGJcujB1FVKlabclXMAQeQJ30NhQcqWF9Fw==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.30.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.30.0.tgz",
@@ -4480,6 +4495,22 @@
         }
       }
     },
+    "cordova-plugin-androidx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-androidx/-/cordova-plugin-androidx-3.0.0.tgz",
+      "integrity": "sha512-niMnhcxKsu4/oKTUbL0jRAnh6/cdoIVxRxJqj3uEyv8CVOlAj1sWhX+9b1XiAo9+bejAM9BbA21YK0mChfbVTA==",
+      "dev": true
+    },
+    "cordova-plugin-androidx-adapter": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-androidx-adapter/-/cordova-plugin-androidx-adapter-1.1.3.tgz",
+      "integrity": "sha512-W1SImn0cCCvOSTSfWWp5TnanIQrSuh2Bch+dcZXIzEn0km3Qb7VryeAqHhgBQYwwzC5Ollk1DtUAk/AJSojuZA==",
+      "dev": true,
+      "requires": {
+        "q": "^1.5.1",
+        "recursive-readdir": "^2.2.2"
+      }
+    },
     "cordova-plugin-device": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-2.0.2.tgz",
@@ -4492,6 +4523,15 @@
       "integrity": "sha512-lhRsQCCluvjHyUKFnMNrHNCfKHFVnA0X9fCv4JaIEW5RZb6ff5f6aoq2TDKRvnbjCOnmLvB+DC4UUi88NudW5Q==",
       "dev": true
     },
+    "cordova-plugin-googleplus": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-googleplus/-/cordova-plugin-googleplus-8.5.1.tgz",
+      "integrity": "sha512-Az+8BWFIbNPy8+JrIN3nPWVhOBBT8FEmE4UdlUwuKaDKxM7910Jqr7KQY6rl0qD9fhU3/YwLwN+QpFOEnifmIg==",
+      "dev": true,
+      "requires": {
+        "q": "*"
+      }
+    },
     "cordova-plugin-ionic-keyboard": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.2.0.tgz",
@@ -11746,6 +11786,15 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/service-worker": "~10.0.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/firebase-authentication": "^5.31.1",
+    "@ionic-native/google-plus": "^5.31.1",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^5.0.0",
@@ -49,8 +50,11 @@
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "cordova-android": "^9.0.0",
+    "cordova-plugin-androidx": "^3.0.0",
+    "cordova-plugin-androidx-adapter": "^1.1.3",
     "cordova-plugin-device": "^2.0.2",
     "cordova-plugin-firebase-authentication": "^4.0.2",
+    "cordova-plugin-googleplus": "^8.5.1",
     "cordova-plugin-ionic-keyboard": "^2.2.0",
     "cordova-plugin-ionic-webview": "^4.2.1",
     "cordova-plugin-splashscreen": "^5.0.2",
@@ -81,10 +85,17 @@
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-firebase-authentication": {
         "ANDROID_FIREBASE_AUTH_VERSION": "20.0.+"
+      },
+      "cordova-plugin-androidx": {},
+      "cordova-plugin-androidx-adapter": {},
+      "cordova-plugin-googleplus": {
+        "REVERSED_CLIENT_ID": "com.alpha.kxip",
+        "WEB_APPLICATION_CLIENT_ID": "5602499136-aonjflj2acqva5gm4vvbuen4bc10sll1.apps.googleusercontent.com",
+        "PLAY_SERVICES_VERSION": "11.8.0"
       }
     },
     "platforms": [
       "android"
     ]
   }
-}
+}

src/app/app.module.ts

@@ -18,6 +18,8 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { DataService } from './services/data.service';
 
+import { GooglePlus } from '@ionic-native/google-plus/ngx';
+
 var firebaseConfig = {
     apiKey: "AIzaSyCYlFdGEsSA3bPlYYJMh3TcMiHzAUK2his",
     authDomain: "kxip-21.firebaseapp.com",
@@ -42,6 +44,7 @@ var firebaseConfig = {
   providers: [
     StatusBar,
     SplashScreen,
+    GooglePlus,
     DataService,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig },

src/app/fan-zone/fan-zone.page.html

@@ -3,7 +3,7 @@
     <section class="social-login" [ngClass]="{'active' : showSocialLogin }">
         
         <section class="login-box">
-            <button (click)="loginWithGoogle()"> Login with <img src="assets/icons/google.png"> </button>
+            <button (click)="doLogin()"> Login with <img src="assets/icons/google.png"> </button>
         </section>
 
     </section>

src/app/fan-zone/fan-zone.page.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
-import { AngularFireAuth } from "@angular/fire/auth";
-import firebase from 'firebase/app';
-import { Router } from '@angular/router';
+
+import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { Platform } from '@ionic/angular';
+import { AngularFireAuth } from '@angular/fire/auth';
+import firebase from 'firebase';
 
 @Component({
   selector: 'app-fan-zone',
@@ -46,28 +48,28 @@ export class FanZonePage implements OnInit {
     googleUserData: any = { };
     showSocialLogin: boolean = true;
 
+
+
+    public loading: any;
+    public isGoogleLogin = false;
+    public user = null;
+
+
     constructor(
-        public  afAuth:  AngularFireAuth,
-        private router: Router
+        private google: GooglePlus,
+        private fireAuth: AngularFireAuth,
+        private platform: Platform,
     ) { }
 
-    async loginWithGoogle() {
-        await  this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((data) => {
-            this.googleUserData = {
-                name: data.user.displayName,
-                email: data.user.email,
-                profileImage: data.user.photoURL,
-                credentials: data.credential
-            };
-            localStorage.googleUserData = JSON.stringify(this.googleUserData);
-            this.showSocialLogin = false;
-        }, (err) => {
-            alert("Failed to login");
-            this.showSocialLogin = true;
-        });
-    }
+    // async loginWithGoogle() {
+    //     await  this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((data) => {            
+    //     }, (err) => {
+    //         alert("Failed to login");
+    //         this.showSocialLogin = true;
+    //     });
+    // }
 
-    ngOnInit() {
+    async ngOnInit() {
 
         this.fanStories = [{
             name: 'Amarpreet',
@@ -85,12 +87,7 @@ export class FanZonePage implements OnInit {
     }
     
     ngAfterViewInit() {
-        if (localStorage.googleUserData) {
-            this.googleUserData = JSON.parse(localStorage.googleUserData);
-            this.showSocialLogin = false;
-        } else {
-            this.showSocialLogin = true;
-        }
+        this.showSocialLogin = true;
     }
 
     generateEmojiStream() {
@@ -123,4 +120,68 @@ export class FanZonePage implements OnInit {
         });
     }
 
+    doLogin(){
+        let params: any;
+        if (this.platform.is('cordova')) {
+            
+            if (this.platform.is('android')) {
+                params = {
+                    webClientId: '5602499136-aonjflj2acqva5gm4vvbuen4bc10sll1.apps.googleusercontent.com', //  webclientID 'string'
+                    offline: true
+                };
+            } else {
+                params = {};
+            }
+
+            alert(JSON.stringify(params));
+
+            this.google.login(params).then((response) => {
+                alert("called google login plugin");
+                const { idToken, accessToken } = response;
+                this.onLoginSuccess(idToken, accessToken);
+            }).catch((error) => {
+                console.log(error);
+                alert('error:' + JSON.stringify(error));
+            });
+        } else {
+            console.log('else...');
+            this.fireAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(data => {
+                console.log('success in google login', data);
+                this.googleUserData = {
+                    name: data.user.displayName,
+                    email: data.user.email,
+                    profileImage: data.user.photoURL,
+                    credentials: data.credential
+                };
+                this.showSocialLogin = false;
+            }).catch(err => {
+                alert(err.message);
+            });
+        }
+    }
+      
+    onLoginSuccess(accessToken, accessSecret) {
+        const credential = accessSecret ? firebase.auth.GoogleAuthProvider.credential(accessToken, accessSecret) : firebase.auth.GoogleAuthProvider.credential(accessToken);
+        this.fireAuth.signInWithCredential(credential).then((data) => {
+            alert('successfully logged in');
+            this.googleUserData = {
+                name: data.user.displayName,
+                email: data.user.email,
+                profileImage: data.user.photoURL,
+                credentials: data.credential
+            };
+            this.showSocialLogin = false;
+        });
+    }
+
+    onLoginError(err) {
+        console.log(err);
+    }
+
+    logout() {
+        this.fireAuth.signOut().then(() => {
+            this.isGoogleLogin = false;
+        });
+    }
+
 }

src/index.html

@@ -26,13 +26,13 @@
     <noscript>Please enable JavaScript to continue using this application.</noscript>
 
     <!-- The core Firebase JS SDK is always required and must be listed first -->
-    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
+    <!-- <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script> -->
 
     <!-- TODO: Add SDKs for Firebase products that you want to use
         https://firebase.google.com/docs/web/setup#available-libraries -->
-    <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script>
+    <!-- <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script> -->
 
-    <script>
+    <!-- <script>
     // Your web app's Firebase configuration
     // For Firebase JS SDK v7.20.0 and later, measurementId is optional
     var firebaseConfig = {
@@ -47,7 +47,7 @@
     // Initialize Firebase
     firebase.initializeApp(firebaseConfig);
     firebase.analytics();
-    </script>
+    </script> -->
 </body>
 
 </html>