質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Q&A

解決済

1回答

3843閲覧

Firebase で network error が発生してしまう

fmstyle28

総合スコア13

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

0グッド

0クリップ

投稿2017/09/28 12:21

編集2017/09/28 13:43

###前提・実現したいこと
Google Firebase の Authentication を使って,Webサイトを作ろうとしています.
手始めに auth().createUserWithEmailAndPassword メソッドで,アカウントを作るところから書いています.

Javascriptのコード内にメールアドレス,パスワード(もちろんダミーのもの)を直打ちして,このメソッドを実行したところまではうまく行きました.

Javascript

1<script> 2firebase.auth().createUserWithEmailAndPassword("user@example.com", "dummypassword1").catch(function (error) { 3 // Handle Errors here. 4 var errorCode = error.code; 5 var errorMessage = error.message; 6 // [START_EXCLUDE] 7 if (errorCode == 'auth/weak-password') { 8 alert('The password is too weak.'); 9 } else { 10 alert(errorMessage); 11 } 12 console.log(error); 13 // [END_EXCLUDE] 14 }); 15</script>

###発生している問題・エラーメッセージ
ところが,HTML入力フォームと送信ボタンを設置し,jQuery 3.2.1 で送信ボタンのonclickイベントのなかで,createUserWithEmailAndPassword を実行しようとしたところ,以下のようなエラーが出てしまいます.

A network error (such as timeout, interrupted conneciton or unreachable host) has occurred.

onclickの中に入れないときはうまく実行できてアカウントも作成されるのに,なぜ onclick の中の関数に入れるとうまく動かないのか見当がつきません.

###該当のソースコード

HTML

1 <div class="login-form"> 2 <form role="form"> 3 <div class="form-group"> 4 <label for="inputEmail1">メールアドレス</label> 5 <input type="email" class="form-control" id="inputEmail1" placeholder="メールアドレス"> 6 </div> 7 <div class="form-group"> 8 <label for="inputPassword1">パスワード</label> 9 <input type="password" class="form-control" id="inputPassword1" placeholder="パスワード"> 10 </div> 11 <button id="login" type="submit" class="btn btn-default">アカウント作成</button> 12 </form> 13 </div> 14 15 </div> 16 17 <!-- Bootstrap core JavaScript 18 ================================================== --> 19 <!-- Placed at the end of the document so the pages load faster --> 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 21 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" 22 crossorigin="anonymous"></script> 23 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" 24 crossorigin="anonymous"></script> 25 26 27 <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script> 28 <script> 29 // Initialize Firebase 30 var config = { 31 apiKey: "****", 32 authDomain: "****.firebaseapp.com", 33 databaseURL: "https://****.firebaseio.com", 34 projectId: "****", 35 storageBucket: "****.appspot.com", 36 messagingSenderId: "****" 37 }; 38 firebase.initializeApp(config); 39 </script> 40 <script> 41 42 $('#login').click(function (e) { 43 var email = $('#inputEmail1').val(); 44 var password = $('#inputPassword1').val(); 45 46 firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) { 47 // Handle Errors here. 48 var errorCode = error.code; 49 var errorMessage = error.message; 50 // [START_EXCLUDE] 51 if (errorCode == 'auth/weak-password') { 52 alert('The password is too weak.'); 53 } else { 54 alert(errorMessage); 55 } 56 console.log(error); 57 // [END_EXCLUDE] 58 }); 59 }); 60 </script> 61

###補足情報(言語/FW/ツール等のバージョンなど)
実行環境は,Windows 10 での Node.JS コマンドプロンプトで firebase serve コマンドを実行し,ブラウザで http://localhost:5000/ を立ち上げて行っています.ブラウザは Chrome を使用しています.
上記ソースでアスタリスクに書き換えたfirebaseのconfigはすべて正しい値にしています.

Javascript初心者ですので,不足している情報がありましたら教えて下さい.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました.

buttonがtype="submit"になっているとダメなようです.かつ,typeを未設定にするのもダメなようです.
type="button"にしたらうまく行きました.

参考 firebase で auth/network-request-failed が返ってきてしまう - Qiita

投稿2017/09/28 13:46

fmstyle28

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問