Ionic 2 Facebook 登录 - “应用程序未设置”和“未登录”和“不允许给定 URL”错误

我正在尝试从 Ionic Native 库实现 Facebook 登录 API，并在我的应用程序中有一个用于打开 Facebook 登录窗口的按钮。但是，当该窗口在我的 iOS 设备上打开时，首先出现以下错误。

然后，在终端中执行以下命令后，我开始收到新错误：

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
$ npm install --save @ionic-native/facebook

经过 1 天的不活动后，这个问题终于自行解决，然后我通过在App ReviewFacebook 开发者网站的选项卡。

现在，我收到另一个错误，该错误应该通过公开应用程序来修复。这是错误：

App Not Setup: The developers of this app have not set up this app properly for Facebook Login.

这是此实现的相关代码。我已确保包含正确的APP ID在所有相关变量中，并且代码本身不会导致任何错误。这只是登录未与我的应用程序通信的情况。

In package.json:

 {
  "name": "twine-app",
  "author": "Anthony Krivonos",
  "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/animations": "^4.0.1",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/facebook": "^3.4.4",
    "@ionic/cloud-angular": "^0.11.0",
    "@ionic/storage": "1.1.7",
    "angular2-elastic": "^0.13.0",
    "firebase": "^3.7.5",
    "ionic-angular": "2.2.0",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.2.0",
    "sw-toolbox": "3.4.0",
    "typescript": "^2.2.2",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "Twine: An Ionic project",
  "version": "0.0.1",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/twine-app/twine-app.git"
  },
  "license": "ISC"
}

In app.component.ts:

platform.ready().then(() => {
        let env = this;
        NativeStorage.getItem('user')
        .then(function (data) {
              env.nav.push(FeedPage);
              Splashscreen.hide();
        }, function (error) {
              env.nav.push(OnboardingPage);
              Splashscreen.hide();
        });
              StatusBar.styleDefault();
              StatusBar.overlaysWebView(false);
              Splashscreen.hide();
  });

In onboarding.ts（代码由Sampath):

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';


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

  constructor(public fb: Facebook) {

  }

  fbLogin(): void {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
      .catch(e => console.log('Error logging into Facebook', e));
  }

}

我已经搜索了几个不同的网站和论坛来寻找解决方案，但似乎没有找到解决此错误的方法。大多数答案建议使用应用程序的站点 URL 在 Facebook 开发者门户中添加一个新平台，但我的应用程序运行失败localhost。此外，我已经安装了所有必要的插件。有谁知道可能导致此问题的原因是什么？预先非常感谢您。

Edit: DO NOT建议我应该通过 Facebook 开发者门户公开该应用程序，因为我的问题清楚地概述了我已经这样做了。谢谢。

Edit 2:我努力了Sampath的解决方案，并且登录工作完美。这再次证实了上述代码存在问题。然而，经过几天的工作，我似乎无法确定这一点。这是一个屏幕截图。

Update:

它对我来说工作得很好。这似乎是你的 Facebook 应用程序设置部分的问题。如果你也需要该部分的任何帮助，请告诉我。

玩 Git Repo.

home.ts

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';


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

  constructor(public fb: Facebook) {

  }

  fbLogin(): void {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
      .catch(e => console.log('Error logging into Facebook', e));
  }

}

应用程序模块.ts

import { HomePage } from '../pages/home/home';
import { Facebook } from '@ionic-native/facebook';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    Facebook
  ]
})
export class AppModule { }

首页.html

<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>

旧答案

我可以看到您的 3 个问题package.json file.

Issue 1:

你必须删除"ionic-native": "2.4.1",来自它的模块。

Issue 2:

你必须使用"@ionic/app-scripts": "1.1.4",代替"@ionic/app-scripts": "1.0.0",

Issue 3:

你必须使用"ionic-angular": "2.2.0",代替"ionic-angular": "2.0.1",

上述所有更改运行后npm i