当前位置： 文江博客 话题详情

如何修复HTTP错误代码400？ （Firebase Auth相关）

发布于 2025-02-10 17:13:44 字数 6557 浏览 2 评论 0 原文

我有一个静态网站，我正在尝试将其配置为与Firebase进行配置，尤其是身份验证位，但是我在控制台中显示2个错误控制台网络选项卡视图 console> console：网络表瀑布视图

现在，确切发生的事情是我制作了一个HTML页面来处理身份验证

此页面称为（auth.html）

// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js';
import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithCustomToken, signOut } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js";

// Your web app's Firebase configuration

// Initialize Firebase
const app = initializeApp({
    apiKey: "API key",
    authDomain: "firebaseapp.com",
    databaseURL: "https://firebaseio.com",
    projectId: "fireauth",
    storageBucket: "appspot.com",
    messagingSenderId: "162620739",
    appId: "1:16262739:web:634d6f3357004eced9e"
  });

// Above initialization details are incorrect deliberately (they aren't the issue/ focus now)

const auth = getAuth(app);


createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

  
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
})
.catch((error) => {
  const errorCode = error.code;
  const errorMessage = error.message;
});

signInWithCustomToken()
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

// Detect auth state
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
    console.log("Logged in!");
    alert("You are logged in!");
  } else {
    // User is signed out
    // ...
    console.log("Anonymous mode (signed out)");
  }
});


signOut(auth).then(() => {
  // Sign-out successful.
  console.log("logged out")
}).catch((error) => {
  // An error happened.
  alert("Network error");
});
<body>
  <!--- Login section --->
  <div id="login-div" class="container">
    <div class="div1">
    <form class="login-form"><h1>Login to continue</h1>
      <p>Avatar ID</p>
      <input type="text" id="email" placeholder="Email" required>
      <p>Secret Key</p>
      <input type="password" id="password" placeholder="Password" required>
      <button type="signInWithEmailAndPassword" disabled>Login</button><br><a onclick="thenewcallout3()" href="#">Reset my secret key</a>
    </form>
  </div>
</div>


  <!--- register section --->
    <div id="user-div" class="div2">
    <form class="login-form">
      <h2>Register to continue</h2><br>
      <p>Enter your email address</p>
      <input type="email" placeholder="Avatar ID" id="avatarId" required>
      <p>Password</p>
      <input type="text" placeholder="Secret key"><br><br>
      <input type="password" placeholder="Repeat your secret key" id="secretKey" required><br><br>
      <p id="up">I accept that my privacy & actions online are my responsibility not StarlinkBw</p><input type="checkbox" required>
      <button type="createUserWithEmailAndPassword" disabled>Register</button>
    </form></div>
    
    <!---Account reset--->
    <div class="fixAcc"><h1>Password reset</h1><input type="email" placeholder="Enter your Avatar ID"><br><br><button disabled>Request new key</button></div>


    <!--- Portal --->
    <nav class="menu">
      <header>Starlink <span>[X]</span></header>
      <ol>
        <li class="menu-item">
          <a href="../welcome.html">Go back</a></li>
          <!--- views registration form & hides login --->
        <li class="menu-item"><a onclick="thenewcallout()" href="#" >Login</a></li>
        <li class="menu-item"><a onclick="thenewcallout2()" href="#" >Register</a></li>
          <ol class="sub-menu">
            <li class="menu-item">
              <a href="">Social networking</a>
            </li>
            <li class="menu-item">
              <a href="">Self care</a>
            </li>
            <li class="menu-item">
              <a href="">Entertainment</a>
            </li>
        <li class="menu-item">
          <a href="">Productivity</a>
          </ol>
            <li class="menu-item">
              <a href="../star/standard/terms&conditions.html">Terms & Conditions</a>
            </li>
          </ol>
        </li>          
      <footer><button aria-label="Toggle Menu">Toggle</button></footer>
    </nav>


    <script src="../scripts/sl.js"></script>
    <script src="../scripts/jl.js"></script>
    <script type = 'text/javascript' src="../scripts/status-check.js"></script>

    <!--- Firebase --->
    <script src="../scripts/sync.js" type="module"></script>
</body>

该链接到称为./sync.js的JavaScript文件。

我成功地成功初始化了Firebase（我认为），并报告了当前用户（ME处于DEV模式）在Console＆lt; 控制台用户视图＆gt; （这是个好消息）但是我很难将用户数据从static auth.html页面发送到firebase。我的同步文件有什么问题？

要查看现实生活中网站当前的兴趣，您可以访问 >请注意，所有验证触发按钮均在实际网站中禁用，以便我可以解决此错误。

原文

I have a static website where I am trying to configure it to communicate with firebase particularly the authentication bit, but I have 2 errors displaying in the console Console network tab view console: network tab waterfall view

now what is happening exactly is that I made a single html page to handle authentication

this page is called (auth.html)

// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js';
import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithCustomToken, signOut } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js";

// Your web app's Firebase configuration

// Initialize Firebase
const app = initializeApp({
    apiKey: "API key",
    authDomain: "firebaseapp.com",
    databaseURL: "https://firebaseio.com",
    projectId: "fireauth",
    storageBucket: "appspot.com",
    messagingSenderId: "162620739",
    appId: "1:16262739:web:634d6f3357004eced9e"
  });

// Above initialization details are incorrect deliberately (they aren't the issue/ focus now)

const auth = getAuth(app);


createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

  
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
})
.catch((error) => {
  const errorCode = error.code;
  const errorMessage = error.message;
});

signInWithCustomToken()
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

// Detect auth state
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
    console.log("Logged in!");
    alert("You are logged in!");
  } else {
    // User is signed out
    // ...
    console.log("Anonymous mode (signed out)");
  }
});


signOut(auth).then(() => {
  // Sign-out successful.
  console.log("logged out")
}).catch((error) => {
  // An error happened.
  alert("Network error");
});
<body>
  <!--- Login section --->
  <div id="login-div" class="container">
    <div class="div1">
    <form class="login-form"><h1>Login to continue</h1>
      <p>Avatar ID</p>
      <input type="text" id="email" placeholder="Email" required>
      <p>Secret Key</p>
      <input type="password" id="password" placeholder="Password" required>
      <button type="signInWithEmailAndPassword" disabled>Login</button><br><a onclick="thenewcallout3()" href="#">Reset my secret key</a>
    </form>
  </div>
</div>


  <!--- register section --->
    <div id="user-div" class="div2">
    <form class="login-form">
      <h2>Register to continue</h2><br>
      <p>Enter your email address</p>
      <input type="email" placeholder="Avatar ID" id="avatarId" required>
      <p>Password</p>
      <input type="text" placeholder="Secret key"><br><br>
      <input type="password" placeholder="Repeat your secret key" id="secretKey" required><br><br>
      <p id="up">I accept that my privacy & actions online are my responsibility not StarlinkBw</p><input type="checkbox" required>
      <button type="createUserWithEmailAndPassword" disabled>Register</button>
    </form></div>
    
    <!---Account reset--->
    <div class="fixAcc"><h1>Password reset</h1><input type="email" placeholder="Enter your Avatar ID"><br><br><button disabled>Request new key</button></div>


    <!--- Portal --->
    <nav class="menu">
      <header>Starlink <span>[X]</span></header>
      <ol>
        <li class="menu-item">
          <a href="../welcome.html">Go back</a></li>
          <!--- views registration form & hides login --->
        <li class="menu-item"><a onclick="thenewcallout()" href="#" >Login</a></li>
        <li class="menu-item"><a onclick="thenewcallout2()" href="#" >Register</a></li>
          <ol class="sub-menu">
            <li class="menu-item">
              <a href="">Social networking</a>
            </li>
            <li class="menu-item">
              <a href="">Self care</a>
            </li>
            <li class="menu-item">
              <a href="">Entertainment</a>
            </li>
        <li class="menu-item">
          <a href="">Productivity</a>
          </ol>
            <li class="menu-item">
              <a href="../star/standard/terms&conditions.html">Terms & Conditions</a>
            </li>
          </ol>
        </li>          
      <footer><button aria-label="Toggle Menu">Toggle</button></footer>
    </nav>


    <script src="../scripts/sl.js"></script>
    <script src="../scripts/jl.js"></script>
    <script type = 'text/javascript' src="../scripts/status-check.js"></script>

    <!--- Firebase --->
    <script src="../scripts/sync.js" type="module"></script>
</body>

which is linked to a JavaScript file called ./sync.js.

I managed to initialize firebase successfully (I think) and reports the current user (me in dev mode) is logged out in the console <Console user view> (which is great news) but I am having trouble sending the user data from the static auth.html page to firebase. what is the issue with my sync.js file?

to see the current perfomance of the website in real life, you can visit My website please note all auth triggering buttons are disabled in the actual website so that I can fix this error.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

又怨 2025-02-17 17:13:44

我设法解决了这个问题
多亏了Bravo给我的建议，

我删除了一些声明，例如签名。签名（我以后需要签名）
使用Custom令牌签名更为复杂，因为它使用了Admin SDK，我几次失败了尝试实现它。

我添加了事件侦听器从特定输入元素字段导入数据（很可能导致了由于值分配不匹配而导致400个错误），

这使我的auth.html＆amp; Sync.js看起来像附加的代码片段

，尽管AUTH有效，但该系统面临（网络错误）当广告块运行/启用时，该问题（网络错误）

对于控制台而没有任何报告，它没有显示任何错误，

这是身份验证 firebase更新

// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js';
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js";


// Your web app's Firebase configuration

// Initialize Firebase
const firebaseConfig = {
  apiKey: "Your API key,
  authDomain: "firebaseapp.com",
  databaseURL: "firebaseio.com",
  projectId: "your project",
  storageBucket: "appspot.com",
  messagingSenderId: "11739",
  appId: "1:162621739:web:634d6f04eced9e"
};

// Again the above configurations are incorrect delibaratetly (but not the main focus)

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);


submitData.addEventListener('click', (e) => {
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;
  
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
  alert("Account creation success! Welcome " + email);
  window.location.replace("https://google.com");
})
.catch((error) => {
  const errorMessage = error.message;
  // ..
  alert(errorMessage);
});
});

submitLogin.addEventListener('click', (f) => {

  var avatar = document.getElementById("avatar").value;
  var secretKey = document.getElementById("secretKey").value;
  
signInWithEmailAndPassword(auth, avatar, secretKey)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
  alert("You are logged in as: " + avatar);
  window.location.replace("https://google.com");
})
.catch((error) => {
  const errorCode = error.code;
  alert(errorCode);
});
});
  <!--- Login section --->
  <div class="container">
    <form class="login-form"><h1>Login to continue</h1>
      <p>Avatar ID</p>


      <!--- Avatar & secretKey fields here --->
      <input type="text" id="avatar" placeholder="Email" autocomplete="email">
      <p>Secret Key</p>
      <input type="password" id="secretKey" placeholder="Password" autocomplete="current-password">
      
      <button type="button" id="submitLogin" name="submitLogin">Login</button><br><a onclick="thenewcallout3()" href="#">Reset my secret key</a>
    </div>


  <!---Register section ---->
    <div class="div2">
      <div class="login-form">
        <h2>Register to continue</h2><br>
          <p>Enter your email address</p>


            <!----Email & password registration fields here ---->
            <input type="email" placeholder="Avatar ID" id="email" autocomplete="email">
              <p>Password</p>
              <input type="password" placeholder="Secret key"><br><br>
            <input type="password" placeholder="Repeat your secret key" id="password" autocomplete="new-password"><br><br>
          <p id="up">I accept that my privacy & actions online are my responsibility not StarlinkBw</p><input type="checkbox">
      <button id="submitData" name="submitData">Register</button></div>
    </div>

  Account reset section 
  <section>
    <div class="fixAcc">
      <h1>Password reset</h1>
        <input placeholder="Enter your Avatar ID" autocomplete="email" id="email-P-Reset"><br>
          <br>
        <button>Request new key</button>
      </div>
    </section></form>

I managed to fix to the problem
thanks to the advice Bravo gave me

I removed a few declaration like signingInWithCustomToken & signout (I am going need signout later though)
signing in using custom token is a little more complicated since it uses the Admin SDK which I failed several times trying to implement it.

I added event listeners to import data from specific input elements fields (most likely which caused the 400 error due to value assignment mismatch)

which turned my auth.html & sync.js to look like the code snippets attached

although Auth works, the system faces issues like (network errors) when ad-blockers are running/ enabled

as for the console there is nothing to report there, it doesnt show any errors anymore

This is the end result after authenticating Auth result within client & firebase updated

// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js';
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js";


// Your web app's Firebase configuration

// Initialize Firebase
const firebaseConfig = {
  apiKey: "Your API key,
  authDomain: "firebaseapp.com",
  databaseURL: "firebaseio.com",
  projectId: "your project",
  storageBucket: "appspot.com",
  messagingSenderId: "11739",
  appId: "1:162621739:web:634d6f04eced9e"
};

// Again the above configurations are incorrect delibaratetly (but not the main focus)

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);


submitData.addEventListener('click', (e) => {
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;
  
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
  alert("Account creation success! Welcome " + email);
  window.location.replace("https://google.com");
})
.catch((error) => {
  const errorMessage = error.message;
  // ..
  alert(errorMessage);
});
});

submitLogin.addEventListener('click', (f) => {

  var avatar = document.getElementById("avatar").value;
  var secretKey = document.getElementById("secretKey").value;
  
signInWithEmailAndPassword(auth, avatar, secretKey)
.then((userCredential) => {
  // Signed in 
  const user = userCredential.user;
  // ...
  alert("You are logged in as: " + avatar);
  window.location.replace("https://google.com");
})
.catch((error) => {
  const errorCode = error.code;
  alert(errorCode);
});
});
  <!--- Login section --->
  <div class="container">
    <form class="login-form"><h1>Login to continue</h1>
      <p>Avatar ID</p>


      <!--- Avatar & secretKey fields here --->
      <input type="text" id="avatar" placeholder="Email" autocomplete="email">
      <p>Secret Key</p>
      <input type="password" id="secretKey" placeholder="Password" autocomplete="current-password">
      
      <button type="button" id="submitLogin" name="submitLogin">Login</button><br><a onclick="thenewcallout3()" href="#">Reset my secret key</a>
    </div>


  <!---Register section ---->
    <div class="div2">
      <div class="login-form">
        <h2>Register to continue</h2><br>
          <p>Enter your email address</p>


            <!----Email & password registration fields here ---->
            <input type="email" placeholder="Avatar ID" id="email" autocomplete="email">
              <p>Password</p>
              <input type="password" placeholder="Secret key"><br><br>
            <input type="password" placeholder="Repeat your secret key" id="password" autocomplete="new-password"><br><br>
          <p id="up">I accept that my privacy & actions online are my responsibility not StarlinkBw</p><input type="checkbox">
      <button id="submitData" name="submitData">Register</button></div>
    </div>

  Account reset section 
  <section>
    <div class="fixAcc">
      <h1>Password reset</h1>
        <input placeholder="Enter your Avatar ID" autocomplete="email" id="email-P-Reset"><br>
          <br>
        <button>Request new key</button>
      </div>
    </section></form>

回复 原文
烟柳画桥 2025-02-17 17:13:44

我看到了...，今天我遇到了同样的问题，我意识到我的代码中的配置还可以，我需要做的是在项目快捷键上转到我的firebase控制台，然后单击身份验证 - ＆gt;转到登录方法和在提供商上，请确保启用电子邮件/密码提供商，如果未添加单击添加提供商，然后选择电子邮件/密码，然后启用它

I see..., I Had the same problem Today and I realized that the configurations in my code was okay, what I need to do is go to my firebase console on project shortcuts and click on authentication -> go to sign-in Method and on the provider, make sure the email/password provider is enabled, if it's not added click on add provider and select email/password and then enable it

回复 原文
~没有更多了~

关于作者

对你而言

暂无简介

文章
评论
30 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文