Question

我正在尝试将“登录Facebook”选项集成到我的Cordova应用程序中。我正在编写HTML，CSS和Javascript，并希望将完成的应用程序部署到Android和iOS。我正在我的Android手机上测试，当我的应用程序运行正常时，它在尝试整合Facebook登录时开始显示此错误：

Uncaught ReferenceError: CordovaFacebook is not defined

我也在将Firebase集成到我的应用中 - 我在这里使用他们的示例聊天应用程序代码：https://gist.github.com/puf/8f67d3376d80ed2d02670d20bfc4ec7d（我已使用虚拟值替换了以下代码中的Firebase值。）

我正在使用cordova-plugin-facebook 0.2.2 "CordovaFacebook"插件（https://github.com/bisrael/cordova-plugin-facebook）。这是我目前的HTML：

<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>ZeroToApp</title>
<style>
  #messages { width: 40em; border: 1px solid grey; min-height: 20em; }
  #messages img { max-width: 240px; max-height: 160px; display: block; }
  #header { position: fixed; top: 0; background-color: white; }
  .push { margin-bottom: 2em; }
  @keyframes yellow-fade { 0% {background: #f2f2b8;} 100% {background: none;} }
  .highlight { -webkit-animation: yellow-fade 2s ease-in 1; animation: yellow-fade 2s ease-in 1; }
</style>
<script>

// Issue seems to be CordovaFacebook isn't defined? but it does exist in the correct subfolder... maybe it's not initialized correctly?

function logInWithFacebook(){
    CordovaFacebook.login({
   permissions: ['email', 'user_likes'],
   onSuccess: function(result) {
      if(result.declined.length > 0) {
         alert("The User declined something!");
      }
      /* ... */
   },
   onFailure: function(result) {
      if(result.cancelled) {
         alert("The user doesn't like my app");
      } else if(result.error) {
         alert("There was an error:" + result.errorLocalized);
      }
   }
});
}

document.addEventListener('DOMContentLoaded', function() {
  // Step 0: HTML defined, variables for elements
  var messagesList = document.getElementById('messages'),
      textInput = document.getElementById('text'),
      sendButton = document.getElementById('send'),
      login = document.getElementById('login'),
      googleLogin = document.getElementById('google'),
      facebookLogin = document.getElementById('facebook'),
      signedIn = document.getElementById('loggedin'),
      logout = document.getElementById('logout'),
      usernameElm = document.getElementById('username'),
      password = document.getElementById('password'),
      username = "Web";

  var config = {
    apiKey: "MyapiKey",
 //   authDomain: "MyauthDomain",
    databaseURL: "MydatabaseURL",
    storageBucket: "MystorageBucket",
    messagingSenderId: "123456789"
  };

  // Get the Firebase app and all primitives we'll use
  var app = firebase.initializeApp(config),
      database = app.database(),
      auth = app.auth(),
      storage = app.storage();

  var databaseRef = database.ref().child('chat');
  sendButton.addEventListener('click', function(evt) {
    var chat = { name: username, message: textInput.value };
    databaseRef.push().set(chat);
    textInput.value = '';
  });
  // Listen for when child nodes get added to the collection
  databaseRef.on('child_added', function(snapshot) {
    // Get the chat message from the snapshot and add it to the UI
    var chat = snapshot.val();
    addMessage(chat);
  });

  // Show a popup when the user asks to sign in with Google
  googleLogin.addEventListener('click', function(e) {
    auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  });
  // Allow the user to sign out
  logout.addEventListener('click', function(e) {
    auth.signOut();
  });
  // When the user signs in or out, update the username we keep for them
  auth.onAuthStateChanged(function(user) {
    if (user) {
      setUsername(user.displayName);
    }
    else {
      // User signed out, set a default username
      setUsername("Web");
    }
  });

  function handleFileSelect(e) {
    var file = e.target.files[0];
    // Get a reference to the location where we'll store our photos
    var storageRef = storage.ref().child('chat_photos');

    // Get a reference to store file at photos/<FILENAME>.jpg
    var photoRef = storageRef.child(file.name);
    // Upload file to Firebase Storage
    var uploadTask = photoRef.put(file);
    uploadTask.on('state_changed', null, null, function() {
      // When the image has successfully uploaded, we get its download URL
      var downloadUrl = uploadTask.snapshot.downloadURL;
      // Set the download URL to the message box, so that the user can send it to the database
      textInput.value = downloadUrl;
    });
  }
  file.addEventListener('change', handleFileSelect, false);
  function setUsername(newUsername) {
    if (newUsername == null) {
        newUsername = "Web";
    }
    console.log(newUsername);
    username = newUsername;
    var isLoggedIn = username != 'Web';
    usernameElm.innerText = newUsername;
    logout.style.display = isLoggedIn ? '' : 'none';
    facebookLogin.style.display = isLoggedIn ? 'none' : '';
    googleLogin.style.display = isLoggedIn ? 'none' : '';
  }
  function addMessage(chat) {
    var li = document.createElement('li');
    var nameElm = document.createElement('h4');
    nameElm.innerText = chat.name;
    li.appendChild(nameElm);
    li.className = 'highlight';
    if ( chat.message.indexOf("https://firebasestorage.googleapis.com/") == 0
      || chat.message.indexOf("https://lh3.googleusercontent.com/") == 0
      || chat.message.indexOf("http://pbs.twimg.com/") == 0
      || chat.message.indexOf("data:image/") == 0) {
      var imgElm = document.createElement("img");
      imgElm.src = chat.message;
      li.appendChild(imgElm);
    }
    else {
      var messageElm = document.createElement("span");
      messageElm.innerText = chat.message;
      li.appendChild(messageElm);
    }
    messagesList.appendChild(li);
    li.scrollIntoView(false);
    sendButton.scrollIntoView(false);
  }
  //window.app = app; // NOTE: just for debugging
  //for (var i=0; i < 10; i++) addMessage({ name: "Web", message: ''+i });
  setUsername('Web');
});
</script>
</head>
<body>
<div id="fb-root"></div>
  <div id='header'>
    <label for='username'><img src="https://www.gstatic.com/images/icons/material/system/1x/account_box_black_24dp.png" width="24"/></label>
    <span id='username'></span>
    <span id='login'>
      <button id='google' class='idp-button'>Sign in with Google</button>
      <button id='facebook' class='idp-button'>Sign in with Facebook</button>
    </span>
    <button id='logout' class='idp-button'>Sign out</button>
  </div>
  <div class="push"></div>
  <ul id='messages'></ul>
  <div id='footer'>
    <img src="https://www.gstatic.com/images/icons/material/system/1x/add_a_photo_black_24dp.png" width="24" onClick="logInWithFacebook();"/>
    <input type="file" id="file" name="file" />
    <input id='text'></input>
    <button id='send'>Send</button>
  </div>
</body>
</html>

备注：

我有logInWithFacebook（）;设置为单击图像运行以进行测试。
当我收到错误时，我已经注释掉了“authDomain”值，这个答案建议将其评论出来，这就是我所做的：https://groups.google.com/forum/#!topic/firebase-talk/eUzTjj8mVa4
起初我认为错误是由于包含FacebookCordova的.js文件未包含在head标记之间，但这不正确，因为在FacebookCordova中定义了[projectname]\plugins\cordova-plugin-facebook\www\CordovaFacebook.js所以它是包含在应用程序中。
当我通过node.js安装插件时，我正确定义了我的Facebook App Name和Id。
我在我的HTML for Facebook功能正文中包含了一个id =“fb-root”的div。

我真的很困惑为什么会发生这种错误，我只想整合“使用Facebook登录”选项并检索密钥，以便我可以将用户身份验证到Firebase中。

对此提出任何帮助或建议都会非常感谢，提前谢谢！

更新这是我当前的.xml文件：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myhelloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenSpinnerColor" value="#FFFFFF" />
    <preference name="SplashScreenBackgroundColor" value="#009900" />
    <platform name="android">
        <allow-intent href="market:*" />
        <splash density="land-hdpi" src="res/screen/android/starsplash.png" />
        <splash density="land-ldpi" src="res/screen/android/starsplash.png" />
        <splash density="land-mdpi" src="res/screen/android/starsplash.png" />
        <splash density="land-xhdpi" src="res/screen/android/starsplash.png" />
        <splash density="port-hdpi" src="res/screen/android/starsplash.png" />
        <splash density="port-ldpi" src="res/screen/android/starsplash.png" />
        <splash density="port-mdpi" src="res/screen/android/starsplash.png" />
        <splash density="port-xhdpi" src="res/screen/android/starsplash.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="ios" spec="~4.2.1" />
    <engine name="android" spec="~5.2.2" />
    <plugin name="cordova-plugin-facebook" >
        <variable name="APP_ID" value="MYAPPID" />
        <variable name="APP_NAME" value="MYAPPNAME" />
    </plugin>
</widget>

Answer 1

我没有看到您的代码包含cordova.js。您的HTML文件应包含以下行：

<script type="text/javascript" src="cordova.js"></script>

如果没有它，Cordova web / native bridge就无法初始化，插件也无法正常工作。

为什么会出现此参考错误？（Cordova插件，Facebook，Javascript，HTML）

1 个答案:

为什么会出现此参考错误？ （Cordova插件，Facebook，Javascript，HTML）

1 个答案:

为什么会出现此参考错误？（Cordova插件，Facebook，Javascript，HTML）