ionic 2中的本机facebook登录

Posted 2023-03-14

【中文标题】ionic 2中的本机facebook登录

【英文标题】：Native facebook login in ionic 2

【发布时间】：2017-04-21 17:53:45

【问题描述】：

我正在尝试使用 cordova-plugin-facebook4 在 ionic 2 项目中使用本机 FB 登录。我正在没有安装 Facebook 应用程序的模拟器上测试我的应用程序。我还安装了cordova应用内浏览器插件。但是当我运行应用程序时出现错误

未捕获（承诺）：TypeError：无法读取属性“应用”的 undefined: 无法在 callCordovaPlugin 读取 undefined 的属性。

我的实现灵感来自https://ionicthemes.com/tutorials/about/ionic2-facebook-login 我添加了声明 const facebookConnectPlugin: any;'到我的 declarations.d.ts 文件 仍然不工作？ 帮帮我。

这是我的 home.ts 的代码 sn-p。

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  Facebook  from '@ionic-native/facebook';

@Component(
    selector: 'page-home',
    templateUrl: 'home.html'
)

export class HomePage 
    FB_APP_ID: number = xxxxxxxxxxxx;
    constructor(public navCtrl: NavController, private fb: Facebook) 
        this.fb.browserInit(this.FB_APP_ID, "v2.8");
    
    doFbLogin() 
        let permissions = new Array();
        let nav = this.navCtrl;
        //the permissions your facebook app needs from the user
        permissions = ["public_profile"];
        this.fb.login(permissions).then(function(response) 
            let userId = response.authResponse.userID;
            let params = new Array();
            //Getting name and gender properties
            this.fb.api("/" + userId + "/me?fields=name,gender", params).then(function(user) 
                user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large";
                //now we have the users info, let's save it in the NativeStorage
                alert(JSON.stringify(user));
            )
        , function(error) 
            alert(JSON.stringify(error));
        );
    

package.json 的内容

  "name": "Filanthro",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": 
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  ,
  "dependencies": 
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/facebook": "^3.5.0",
    "@ionic-native/in-app-browser": "^3.5.0",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  ,
  "devDependencies": 
    "@ionic/app-scripts": "1.3.0",
    "typescript": "~2.2.1"
  ,
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "FaB: An Ionic project"

app.module.ts 的内容

import  BrowserModule  from '@angular/platform-browser';
import  ErrorHandler, NgModule  from '@angular/core';
import  IonicApp, IonicErrorHandler, IonicModule  from 'ionic-angular';
import  SplashScreen  from '@ionic-native/splash-screen';
import  StatusBar  from '@ionic-native/status-bar';
import  Facebook   from '@ionic-native/facebook';
import  MyApp  from './app.component';
import  HomePage  from '../pages/home/home';

@NgModule(
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    Facebook,
    StatusBar,
    SplashScreen,
    provide: ErrorHandler, useClass: IonicErrorHandler
  ]
)
export class AppModule 

【问题讨论】：

请看这个：***.com/a/43171634/1077309

我已将 Facebook 包含在 app.module.ts 中，并将其包含在提供程序中。我已经解决了这三个问题，但在我的情况下似乎不存在。

【参考方案1】：

这是模拟器的某些问题的结果。它在真实设备上运行良好