Ionic 2 Facebook登录 - “App Not Setup”& “未登录”& “不允许URL”错误 [英] Ionic 2 Facebook Login - 'App Not Setup' & 'Not Logged in' & 'Given URL is not allowed' Errors
问题描述
我正在尝试从Ionic Native库中实现Facebook登录API，并在我的应用程序中有一个打开Facebook登录窗口的按钮。但是，当我的iOS设备上打开该窗口时，首先出现以下错误。
I am trying to implement the Facebook Login API from the Ionic Native library, and have a button in my application that opens up the Facebook login window. However, when that window opens on my iOS device, the following error first appeared.
然后，在终端执行以下命令后，我开始收到新的错误：
Then, I began receiving a new error after executing the following commands in terminal:
$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
$ npm install --save @ionic-native/facebook
此问题终于在闲置1天后解决了问题，然后在Facebook开发人员网站的应用程序评估标签中点击此处，让我的应用程序公开。
This issue finally resolved itself after 1 day of inactivity, and then I made my app public by clicking on this in the App Review tab of the Facebook Developers site.
现在，我收到另一个错误，这应该是公开的应用程序。这是错误：
Now, I am receiving yet another error, which should have been fixed by making the app public. Here is the error:
应用程序不安装：此应用程序的开发人员尚未正确设置此应用程序的Facebook登录。
这是实现的相关代码。我确保在所有相关变量中包含正确的 APP ID ，代码本身不会导致任何错误。简单来说，登录不是与我的应用程序通信。
Here is the relevant code for this implementation. I have made sure to include the correct APP ID in all relevant variables, and the code, itself, is not causing any errors. It is simply the case that the login is not communicating with my app.
在 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://twineme@bitbucket.org/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));
}
}
我已经浏览了几个不同的网站解决方案论坛，似乎没有办法解决这个错误。大多数答案建议在Facebook开发人员门户网站添加一个新应用程序的网站URL，但我的应用程序运行在 localhost 之下。另外，我已经安装了所有必要的插件。有人明白可能导致这个问题吗？非常感谢您提前。
I have scoured several different websites and forums for solutions, and seemed to have come up with no way of fixing this error. Most answers suggest to add a new platform in the Facebook developer portal with the app's Site URL, but my app runs off localhost. Additionally, I have installed all necessary plugins. Does anyone understand what may be causing this issue? Thank you so much in advance.
编辑： 不要表示我应该通过Facebook开发者门户网站，因为我的问题清楚地表明我已经这样做了。谢谢。
DO NOT suggest that I should make the app public via the Facebook Developer portal, because my question clearly outlines that I have done so already. Thanks.
编辑2：我尝试过 Sampath 的解决方案，并登录工作完美。这重申上述代码存在问题。但是，在几天的工作之后，我似乎无法确定。这是一个截图。
Edit 2: I have tried Sampath's solution, and login works perfectly. This reaffirms that there is an issue with the above code. However, I cannot seem to pinpoint it after days of work. Here's a screenshot.
推荐答案
我修好了！最后，我的应用程序在Facebook API上正确配置，而 Sampath 的实现就像一个魅力。这是我的问题：
I fixed it! In the end, my app was configured properly on the Facebook API, and the implementation by Sampath worked like a charm. Here was my issue:
整个时间，我一直在我的MacBook iCloud驱动器上的目录中运行Ionic 2应用程序。由于iCloud不断更新任何次要的文件更改，所以我无法使用 ion build ios 完成一个完整的iOS构建，并且必须提前使用 ^ ç。通过将我的项目保存在我的iCloud驱动器之外的目录中，在这种情况下是用户名下的目录，我能够完成一个没有错误的构建。
The entire time, I had been running the Ionic 2 app off a directory in my iCloud Drive on my MacBook. Since iCloud consistently updates any minor file changes, I was never able to do a complete iOS build using ionic build ios, and had to exit early using ^C. By keeping my project in a directory outside my iCloud drive, which in this case was the directory under the username, I was able to do a complete build with no errors!
简而言之，查看Sampath的解决方案代码，并确保
是没有运行iCloud驱动器上的Ionic 2项目。
In short, check out
Sampath's solution code, and make sure you are not running your Ionic 2 project off iCloud Drive.
这篇关于Ionic 2 Facebook登录 - “App Not Setup”& “未登录”& “不允许URL”错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
