我正在尝试将“使用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>
笔记：
FacebookCordova它的定义[projectname]\plugins\cordova-plugin-facebook\www\CordovaFacebook.js已包含在应用程序中。我真的很困惑为什么会发生此错误，我只想集成“使用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="[email protected]" 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>
我看不到您的代码包含cordova.js。您的HTML文件应包含以下行：
<script type="text/javascript" src="cordova.js"></script>
否则，Cordova Web /本地网桥将无法初始化，并且插件也将无法正常工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句