0
私は「Facebookでログイン」オプションを自分のCordovaアプリに統合しようとしています。私はHTML、CSS、Javascriptで書いており、完成したアプリをAndroidとiOSに配備したいと考えています。 Facebookのログインを統合しようとしたとき、それは、このエラーを表示するために始めた、私は現在、私のAndroid携帯電話上でテストすることだし、私のアプリが正常に動作している間：この参照エラーが表示されるのはなぜですか？
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>
<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>
注：これは私の現在のHTMLで
- 私はlogInWithFacebook（）を持っています。テスト目的で画像のクリックで実行するように設定されています。 https://groups.google.com/forum/#!topic/firebase-talk/eUzTjj8mVa4
- 最初に私は、エラーが.jsファイルが原因だと思った：私は、エラーを受け取ったとして、私はそれは私がやったものだ。この答えは、それをコメントアウト提案し、「authDomain」の値をコメントアウトしまし
- FacebookCordovaがheadタグの間に含まれていないファイルですが、
FacebookCordovaは[projectname]\plugins\cordova-plugin-facebook\www\CordovaFacebook.jsで定義されているので、これは正しくありません。 - node.js経由でプラグインをインストールしたときにFacebookのApp NameとIdを正しく定義しました。
- 私はFacebook用のHTML機能の本体に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="[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>
こんにちは@ kerri-shottsはあなたの答えをありがとう、私はそれかもしれないと思ったが、私はすでにその方法を試みた。この回答（Cordovaプラグインとは違いますが）：https://github.com/phonegap/phonegap-plugin-push/issues/98によると、.jsファイルは別に含まれる必要はありません。既に含まれていますそれは '' [projectname] \ plugins \ cordova-plugin-facebook \ www \ CordovaFacebook.js''に存在するビルドです。ファイルを開いたので、CordovaFacebookが正しく内部に定義されています。 – Emily
もう一度@kerri-shotts私は生のgithubファイルにリンクすることによって.jsファイルを直接含めてみました。ファイルが見つかったようですが、次のようなエラーが表示されています： '' Uncaught ReferenceError：cordova is defined''です。これはCordovaFacebook.jsのこの行を指しています： '' var exec = function（）{cordova.exec。適用する（cordova、arguments）; } ''私は行方不明のものがありますか？ "cordova"がどこに定義されているか分かりません。xmlファイルやjsonファイルも同様に含める必要がありますか？プラグインのドキュメントは明確ではありませんでした：https://github.com/bisrael/cordova-plugin-facebookこれを助けてくれてありがとう！ – Emily
これは問題の.jsファイルです：https://github.com/bisrael/cordova-plugin-facebook/blob/master/www/CordovaFacebook.js 12行目は上記のエラーが表示される場所です。 – Emily