3
votes

Face à un problème d'intégration de gmail avec ionic 3, obtention d'une erreur d'exécution >> L'objet (...) n'est pas une fonction

Je travaille avec ionic 3 où j'essaie d'intégrer google plus login dans mon application via firebase . Mais j'obtiens une erreur,

l'erreur est >>

{
  "name": "login",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "^3.6.1",
    "@ionic-native/google-plus": "^5.0.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.1.1",
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-googleplus": "7.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^5.8.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": ".com.googleusercontent.apps.556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

fichier .ts

XXX

Code .html

<button style='    margin: 30px;
padding: 19px;
background: tomato;' ion-buttons icon-left (click)='login()' block outline><ion-icon name="logo-googleplus"> Login with google </ion-icon></button>

**** Package.json ****

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import firebase from 'firebase';

/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams  ,private googleplus: GooglePlus ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

  login(){
      this.googleplus.login({

        'webClientId':"556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe.apps.googleusercontent.com",
        'offline':true

      }).then(res =>{
        firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken)).then(suc=>{
          alert('login successful');
        }).catch(ns=> {
          alert('not successful');
        })
      })
  }



}

Pour plus d'informations, j'ai suivi le tutoriel youtube 1. Google Authentication ionic 2 & 3 avec Firebase - Le moyen le plus simple pour l'authentification Google https://www.youtube.com/watch?v=g_UGNO3IfN8 p >

  1. http://edupala.com/ionic-3-gmail- login-with-firebase /

Mais j'obtiens la même erreur à chaque fois error >> ERROR TypeError: Object (...) n'est pas une fonction


7 commentaires

essayez this.googlePlus.login ({})


@SudarshanaDayananda merci mais, j'ai déjà essayé avec .................................... this.googleplus. login ({'webClientId': "556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe‌ .apps.googleusercont‌ ent.com", 'offline': true}) ..................... .......................... peut jouet expliquer plus pour plus d'informations.


Vous savez que Google+ est en train de se fermer, n'est-ce pas? developer.google.com/+/api-shutdown


@ 04FS merci, oui je sais à ce sujet donc je suis l'intégration de firebase google gmail avec mon application


@Testing Anurag avez-vous eu la même erreur lors de l'utilisation de this.googlePlus.login ({})


@ 04FS pouvez-vous dire ce que je devrais utiliser à la place de Google+ car il va s'arrêter.


Cela est expliqué dans le document auquel j'ai déjà lié.


3 Réponses :


5
votes

Comme vous le mentionnez, vous travaillez sur un projet ionic version 3 et vous utilisez ngx qui montre clairement que les dépendances de la dernière version ionic V4.

Commencez par supprimer le plugin existant plugin cordova ionique supprimer cordova-plugin-googleplus --variable REVERSED_CLIENT_ID = myreversedclientid

Ajoutez-le avec

$ plugin cordova ionique ajouter cordova-plugin-googleplus --variable REVERSED_CLIENT_ID = myreversedclientid

$ npm install --save @ ionic-native / google-plus @ 4

N'oubliez pas de suivre la doc v3 pour une mise en œuvre ultérieure

https://ionicframework.com/docs/v3/native/google- plus /

N'oubliez pas d'activer la méthode de connexion Google depuis la console Firebase

https://console.firebase.google.com/project/nakelasi / authentication / provider


4 commentaires

MERCI, j'ai déjà suivi toutes les étapes que vous avez expliquées mais j'obtiens la même erreur


veuillez partager votre fichier package.json ou les versions du plugin et des bibliothèques natives ioniques


monsieur, j'ai mis à jour le code y avec package.json, veuillez le vérifier maintenant


"@ ionic-native / google-plus": "^ 5.0.0", le problème est ici j'ai déjà mentionné que essayez la version 4 npm install --save @ ionic-native / google-plus @ ^ 4.20.0



3
votes

L'erreur survient si vous avez installé la mauvaise version du plugin natif pour votre type de projet.

Vérifiez le type de projet dans ionic.config.json

Si le type est "ionic-angular" (généralement Ionic 3 ), puis installez la version 4.xx.

exemple

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

Si le type est "angulaire" (généralement Ionic 4 ), puis installez la version 5.xx-beta

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

Remarque:

Ajouter ngx à la fin de l'importation uniquement si vous utilisez Angular 6 ( Ionic 4 )

npm i -s @ionic-native/google-plus@5.0.0-beta.24

sinon supprimez ngx de l'importation à la fois dans app.module.ts et app. component.ts, ( Ionic 3 )

npm i -s @ionic-native/google-plus@4.20.0

Référence: https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074


0 commentaires

0
votes

Problème dans Ionic 4 ou 5

npm install --save @ionic-native/google-plus@5.0.0-beta.14

 entrez la description de l'image ici

Solution :
Failed to load resource: the server responded with a status of 404 (Not Found)

Uncaught TypeError: Object(...) is not a function
    at vendor.js:112711
    at Module../node_modules/@ionic-native/google-plus/index.js (vendor.js:112772)
    at __webpack_require__ (runtime.js:85)
    at Module../src/app/app.module.ts (main.js:1017)
    at __webpack_require__ (runtime.js:85)
    at Module../src/main.ts (main.js:2350)
    at __webpack_require__ (runtime.js:85)
    at Object.0 (main.js:2375)
    at __webpack_require__ (runtime.js:85)
    at checkDeferredModules (runtime.js:46)

0 commentaires