Firebase身份验证因auth / network-request-failed失败网络错误（例如超时 [英] Firebase authentication failing with auth/network-request-failed A network error (such as timeout
问题描述
首先，工作的版本：
<！doctype html>
< html>
< head>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase.js>< / script>
< script>
//初始化Firebase
var config = {
apiKey：AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM，
authDomain：********。firebaseapp.com ，
databaseURL：https：//*******.firebaseio.com，
projectId：********，
storageBucket：* *******。appspot.com，
messagingSenderId：582605565305
};
firebase.initializeApp（config）;
< / script>
< / head>
< body>
< script>
firebase.auth（）。signInWithEmailAndPassword（myemail@abc.xyz，mypassword）。catch（function（error）{
// Handle Errors here。
var errorCode = error .code;
var errorMessage = error.message;
alert（errorCode ++ errorMessage）;
// ...
}）;
< / script>
< / body>
< / html>
现在这个版本不起作用，给了我这个问题标题中的错误。
<！doctype html>
< html>
< head>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js>< / script>
< script src =https://www.gstatic.com/firebasejs/3.9.0/firebase.js>< / script>
< script>
//初始化Firebase
var config = {
apiKey：AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM，
authDomain：**********。firebaseapp.com，
databaseURL：https：//*********.firebaseio.com，
projectId：**********，
storageBucket： **********。appspot.com，
messagingSenderId：582605565305
};
firebase.initializeApp（config）;
< / script>
< script src =myfirebase.js>< / script>
< / head>
< body>
< form name =myform>
< span class =prm>电子邮件< / span>< input type =textname =email>< / br>
< span class =prm>密码< / span>< input type =passwordname =password>< / br>
< input type =imagesrc =some.pngonClick =loginToFirebase（）;>
< / form>
< / body>
< / html>
和myfirebase.js
function loginToFirebase（）{
var myform = document.forms.myform;
if（myform）{
alert（试图记录为：+ myform.email.value +和：+ myform.password.value）;
firebase.auth（）。signInWithEmailAndPassword（myform.email.value，myform.password.value）.catch（function（error）{
// Handle Errors here。
var errorCode = error .code;
var errorMessage = error.message;
alert（errorCode ++ errorMessage）;
// ...
}）;
$ b 正如你所看到的，它是非常简单的例子，版本几乎相同。唯一的区别是，在工作版本中，电子邮件和密码被硬编码到源代码中，但是在非工作版本中存在HTML表单和小的JavaScript。
我把警报声明，以确保一切按预期工作。
这里是最奇怪的事情。这两个版本都适用于Firefox，但不适用于Chrome，Opera和Konqueror（我在Linux / Fedora24上工作）。相同的 auth / network-request-failed出现网络错误（例如超时，连接中断或无法访问的主机）
显示。
Firebase控制台显示工作版本确实有效。
我清除了Chrome缓存，没有任何结果。 b
$ b
可以帮我吗？
解决方案解决！
我意识到它有一些内容安全策略，尝试了各种选择，这里是解决方案。
首先，而不是内联
onClick =loginToFirebase（）;
我必须注册事件侦听器
<$ p函数initApp（）{
document.getElementById（'mybutton'）
.addEventListener（'click'，loginToFirebase）; $ p>
window.onload = function（）{
initApp（）;
}
这不是我的问题的结尾，试图指定内容安全策略，但没有结果。
在仔细查看Firebase演示代码后，我决定删除< form> 标签，那就是它！
希望它能帮助别人：）
I have experienced very strange behaviour trying to do Firebase authnetication. Even more, I made a version that works and one that does not. First, the version that works:
<!doctype html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
authDomain: "********.firebaseapp.com",
databaseURL: "https://*******.firebaseio.com",
projectId: "********",
storageBucket: "********.appspot.com",
messagingSenderId: "582605565305"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<script>
firebase.auth().signInWithEmailAndPassword("myemail@abc.xyz", "mypassword").catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorCode + " " + errorMessage);
// ...
});
</script>
</body>
</html>
And now the version that does not work and gives me the error stated in the title of this question.
<!doctype html>
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDapkNCu9UwitvO84PwQHnUQ6e4g6UK7JM",
authDomain: "**********.firebaseapp.com",
databaseURL: "https://*********.firebaseio.com",
projectId: "**********",
storageBucket: "**********.appspot.com",
messagingSenderId: "582605565305"
};
firebase.initializeApp(config);
</script>
<script src="myfirebase.js"></script>
</head>
<body>
<form name="myform">
<span class="prm">Email</span><input type="text" name="email"></br>
<span class="prm">Password</span><input type="password" name="password" ></br>
<input type="image" src="some.png" onClick="loginToFirebase();">
</form>
</body>
</html>
And myfirebase.js
function loginToFirebase(){
var myform = document.forms.myform;
if(myform){
alert("trying to log as:" + myform.email.value + " and:" + myform.password.value);
firebase.auth().signInWithEmailAndPassword(myform.email.value, myform.password.value).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorCode + " " + errorMessage);
// ...
});
}
}
As you can see it is very simple example and both versions are pretty much the same. The only difference is that in working version email and password are hardcoded into the source, but in nonworking version there is a HTML form and a small javascript. I put alert statement to be sure that everything works as expected.
Here comes the strangest thing. Both version works in Firefox, but not in Chrome, Opera and Konqueror(I work on Linux/Fedora24). The same auth/network-request-failed A network error (such as timeout, interrupted connection or unreachable host) has occurred.
is shown.
Firebase console shows that the working version really works.
I cleared Chrome cache, with no result.
Can anyne help me?
Resolved!
I realized it has something with Content Security Policy, tried various options, and here is the solution. First, instead of inline
onClick="loginToFirebase();"
I had to register event listener
function initApp(){
document.getElementById('mybutton')
.addEventListener('click', loginToFirebase);
}
window.onload = function() {
initApp();
}
This was not the end of my problems, tried to specify Content Security Policy, but with no result.
After very thoroughly looking at Firebase demo code, I decided to remove <form> tag and that was it!
Hope, it will help someone :)
这篇关于Firebase身份验证因auth / network-request-failed失败网络错误（例如超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
