2017-01-31 11 views
0

私がサインインフォームの送信ボタンをクリックすると、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に比較的新しいですし、これは私が困惑してしまったので、任意の助けをいただければ幸いです!

+0

本当に呼び出されていませんか? 'auth.onAuthStateChanged'に登録した関数を起動し、そこに警告を加えてみてください。 (ページが読み込まれても、それが発生することがわかります) – ArneHugo

+0

@ArneHugo 'auth.onAuthStateChanged'で警告を追加しようとしましたが、起動しませんでした。また、Firebaseコンソールで作成されたユーザが表示されず、その機能が起動された場合に発生します。 – Jack

+0

'alert(" test ");'は表示されますか? –

答えて

1

私は何がうまくいかないのか分かりました。私はfirebase.auth().signOut()を呼び出さなかったので、同じユーザーとしてログインしていたので、既にユーザーとしてログインしていたので、フォームを送信するたびに新しいユーザーを作成しませんでした。私はwindow.onload = auth.signOut();を私の頭の中のスクリプトに追加しました。そして、私はSubmitボタンを押すたびに新しいユーザが作成されます。

関連する問題