Firebase 存储与 HTML 和 TypeScript 的连接在 Intellij 上可能没有 Angular 或 React？答案

【问题标题】：Firebase Storage connection with HTML and TypeScript WITHOUT Angular or React Possible on Intellij?Firebase 存储与 HTML 和 TypeScript 的连接在 Intellij 上可能没有 Angular 或 React？
【发布时间】：2021-08-08 05:23:18
【问题描述】：

我对项目部分的目标是能够使用 TypeScript 拥有一个正常运行的登录和注册页面。

目前我的代码在没有数据库的情况下工作，但我想使用 Firebase 来注册用户的用户名和密码，这样他们就可以轻松登录。

我发现的唯一教程仅使用带有 Angular 或 React 的 Firebase，我想知道是否有办法在没有它的情况下使用 Firebase 存储？

我使用的 IDE 是 Intellij。

如果需要这里是我的注册页面代码：

.ts 代码：


class RegisterTs{
    username: string;
    password: string;
    password2:string;

    constructor(username: string, password: string, password2:string ) {
        this.username = username;
        this.password = password;
        this.password2 = password2;


        let registerBtn = document.getElementById("enterR")
        registerBtn.addEventListener("click", (e: Event) => {
            return RegisterTs.validateInput(this.password,this.password2)
        });


        let forgotBtn= document.getElementById("forgotPass")
        forgotBtn.addEventListener("click",(e:Event) =>RegisterTs.forgotPasswordR());
    }



    private static validateInput(password: string, password2:string) {
        if(password==password2){
            return alert("success")
        }
        else{
            return alert("Password inputs do not match")
        }
    }

    private static forgotPasswordR() {
        return alert("tough luck lmao")
    }
}




window.onload= function() {
    let iUser =(document.getElementById("re") as HTMLInputElement).value;
    let iPass =(document.getElementById("rp") as HTMLInputElement).value;
    let iPass2 =(document.getElementById("rrp") as HTMLInputElement).value;
    let regTs = new RegisterTs(iUser,iPass,iPass2);
}

.html代码

<HTML>
<HEAD>
  <TITLE>Capstone Typescript Login</TITLE>
</HEAD>

<BODY>

<header>
  <h2>Billy Bronco's Grading Calculator</h2>
</header>

<div id="container">

  <div id="tabs">

    <p id="rt" class="tabs" >Register</p>

    <link rel="stylesheet" href="Login.css">

    <div id="clear"></div>
  </div>

  <div id="cont">

    <div id="register" class="comm">
      <h3>Register</h3>

      <input id="re" type="email" placeholder="Email" required/>
      <input id="rp" type="password" placeholder="Password" required/>
      <input id="rrp" type="password" placeholder="Re write Password" required/>

      <input type="button" class="button" id="enterR" value="Register">
      <input type="button" class="button" id="forgotPass" value="Forgot Password?">
      <a href="login_view.html" > Already have an account? CLICK HERE </a>

    </div>

  </div>

</div>
<script src="RegisterTs.js"></script>
</BODY>
</HTML>

谢谢！

【问题讨论】：

让我明白这一点，您想使用firebase基本上注册用户对吗？你只是在使用基本的 HTML/CSS/js 对吗？没有反应或角度
@Abhishek 是的！这就是它的目标！我将在我项目的其他部分使用 firebase，但我不确定是否有办法在没有 Angular 或 React 的情况下做到这一点，我更喜欢。

标签： javascript html typescript firebase

【解决方案1】：

您应该使用Firebase Authentication。您不应该使用 firebase 存储，因为它旨在存储比字符串（如 word 文档或视频文件等文件）更大的文件。

Firebase 带有自己的身份验证系统，它允许您对用户进行身份验证，而无需像您正在做的那样单独匹配密码和用户名，这被认为是最糟糕的做法，因为它会暴露实际的密码和用户名。这就是为什么将密码/用户名存储在 Firebase 实时数据库或 Firestore 中也是一个坏主意。

无需使用 React 或 Angular 即可使用 Firebase 身份验证。您可以简单地完成本教程中提到的所有 js 步骤，您将拥有一个有效的身份验证平台。既然你知道 typescript，那么使用和阅读普通的 javascript 应该不是问题。

Follow this guide from Firebase here 了解如何使用电子邮件和密码添加用户身份验证系统。您将不需要上面编写的大部分代码。

【讨论】：