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 >
Mais j'obtiens la même erreur à chaque fois error >> ERROR TypeError: Object (...) n'est pas une fonction
3 Réponses :
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
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
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
Problème dans Ionic 4 ou 5
npm install --save @ionic-native/google-plus@5.0.0-beta.14Solution :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)
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é.