离子2 Facebook的login – '应用程序不安装'和'没有login'＆'给定的URL是不允许的'错误

我试图从Ionic Native库实现FacebookloginAPI，并在我的应用程序中有一个打开Facebooklogin窗口的button。 但是，当我的iOS设备上打开该窗口时，首先出现以下错误。

然后，在terminal中执行以下命令后，我开始收到一个新的错误：

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

这个问题在闲置一天后终于自行解决了，然后我通过在Facebook Developers网站的App Review选项卡中点击这个应用程序来公开我的应用程序。

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

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

这里是这个实现的相关代码。 我已经确保在所有相关variables中包含正确的APP ID ，并且代码本身不会导致任何错误。 这只是login不与我的应用程序进行通信的情况。

在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://[e-mail]/twine-app/twine-app.git" }, "license": "ISC" } 

在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(); }); 

在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)); } } 

我已经search了几个不同的网站和论坛的解决scheme，似乎没有办法解决这个错误。 大多数答案build议在Facebook开发人员门户中添加一个新的平台，并使用应用程序的网站URL，但我的应用程序运行在localhost 。 另外，我已经安装了所有必要的插件。 有没有人了解可能会导致这个问题？ 非常感谢你提前。

编辑： 不build议我应该通过Facebook开发者门户公开的应用程序，因为我的问题清楚地概述了我已经这样做了。 谢谢。

编辑2：我已经试过Sampath的解决scheme，login完美。 这重申上述代码存在问题。 但是，我似乎无法在工作日后查明。 这是一个截图。

Answer 1

更新：

这对我来说工作的很好。这似乎是你的问题与Facebook的应用程序设置部分。请让我知道，如果你需要任何帮助的部分了。

玩 Git回购 。

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)); } } 

app.module.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 { } 

home.html的

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

老答案

我可以在你的package.json文件中看到3个问题。

问题1：

你必须从中删除"ionic-native": "2.4.1", 。

问题2：

你必须使用"@ionic/app-scripts": "1.1.4",而不是"@ionic/app-scripts": "1.0.0",

问题3：

你必须使用"ionic-angular": "2.2.0",而不是"ionic-angular": "2.0.1",

毕竟以上的变化运行npm i

Answer 2

我修好了它！ 最后，我的应用程序在Facebook API上正确configuration，而Sampath的实现像一个魅力。 这是我的问题：

整个过程中，我一直在我的MacBook的iCloud Drive上的一个目录中运行Ionic 2应用程序。 由于iCloud持续更新任何次要的文件更改，因此我从来没有能够使用ionic build ios完成一个完整的iOS构build，并且必须使用^C尽早退出。 通过将我的项目保存在我的iCloud驱动器（在本例中是用户名下的目录）之外的目录中，我能够完成无任何错误的构build！

简而言之， 请查看Sampath的解决scheme代码 ，并确保您没有在iCloud Drive上运行您的Ionic 2项目 。