私がサインインフォームの送信ボタンをクリックすると、Firebaseの匿名ユーザーとしてサインインされるようにしようとしています。送信ボタンが表示されているため、送信ボタンがjQuery送信イベントをトリガーしていることがわかります。ただし、サブミットボタンがjQueryサブミットイベントをトリガーしても、何らかの理由でsignInAnonymously
メソッドが呼び出されていません。私はまた、別の関数でsignInAnonymously
呼び出しを入れて使用して、onsubmit
という形式のフォームを使用しようとしましたが、それも機能しませんでした。ここに私のコードは、(私はセキュリティ上の目的のために私の設定の詳細を省略しました)です:Firebase匿名ログインフォームに投稿する
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Escape Room</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<!-- jQuery -->
<script src="resources/jquery/jquery-3.1.1.slim.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
//Initialize authentication
var auth = firebase.auth();
// Handle authenticated users
auth.onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var isAnonymous = user.isAnonymous;
var uid = user.uid;
// ...
} else {
// User is signed out.
// ...
}
// ...
});
// When the DOM has loaded
$(document).ready(function(e) {
$('#signIn').submit(function(e) {
// Prevent the page from refreshing
e.preventDefault();
alert("test");
// Authenticate user
auth.signInAnonymously().catch(function(error) {
alert('test2');
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.error(error);
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<form id="signIn">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<label for="vest">Vest Number</label>
<input type="text" class="form-control" placeholder="Vest Number">
</div>
<button type="submit" class="btn btn-primary">Start</button>
</form>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="resources/jquery/jquery-3.1.1.slim.min.js"></script>
<script src="resources/tether/js/tether.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
私はFirebaseに比較的新しいですし、これは私が困惑してしまったので、任意の助けをいただければ幸いです!
本当に呼び出されていませんか? 'auth.onAuthStateChanged'に登録した関数を起動し、そこに警告を加えてみてください。 (ページが読み込まれても、それが発生することがわかります) – ArneHugo
@ArneHugo 'auth.onAuthStateChanged'で警告を追加しようとしましたが、起動しませんでした。また、Firebaseコンソールで作成されたユーザが表示されず、その機能が起動された場合に発生します。 – Jack
'alert(" test ");'は表示されますか? –