Ionic 2 Facebook 登录 - 'App Not Setup' &'

问题描述

我正在尝试从 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 开发者网站的 App Review 选项卡中单击此问题公开了我的应用程序.

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:

App Not Setup:此应用的开发者尚未正确设置此应用的 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 编写):

In onboarding.ts (Code by 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 上运行.此外，我已经安装了所有必要的插件.有谁了解可能导致此问题的原因?非常感谢您.

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 Drive 中的一个目录中运行 Ionic 2 应用程序.由于 iCloud 不断更新任何小的文件更改，我永远无法使用 ionic build ios 进行完整的 iOS 构建，并且不得不使用 ^C 提前退出.通过将我的项目保存在我的 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 Drive 上运行您的 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"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！