Firebase与Web的集成

Firebase是谷歌开发的用于创建移动和Web应用程序的平台。我们将看到如何将Firebase集成或连接到我们的示例Web应用程序。

方法： 按照以下步骤将您的Web应用程序与Firebase集成。

首先，在index.html文件中创建一个HTML页面。
创建一个名为form.js的JavaScript文件。
创建完成后，登录Firebase控制台并创建一个新项目。
添加您喜欢的任何名称。完成后，转到”身份验证” => “登录方式”。
现在点击启用”电子邮件/密码”。
完成此步骤后，运行HTML文件。

以下是以上方法的实现

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <script src= 
"https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"> 
    </script> 
  
    <script src= 
"https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"> 
    </script> 
      
    <script src="form.js"></script> 
    <title>Login System</title> 
</head> 
  
<body> 
    <div class="formContainer"> 
        <h1>Enter Credentials Here:</h1> 
        <input type="email" 
            placeholder="email here" id="email" /> 
        <br /> 
        <input type="password" 
            placeholder="password here" id="password" /> 
        <br /> 
        <button onclick="signUp()" id="signUp"> 
            SignUp 
        </button> 
        <button onclick="signIn()" id="signIp"> 
            SignIn 
        </button> 
        <button onclick="signOut()" id="signOut"> 
            SignOut 
        </button> 
    </div> 
</body> 
  
</html>

现在创建一个form.js文件并添加JavaScript代码，其中包含Firebase配置详细信息和API密钥。

form.js

// Your web app's Firebase configuration 
// For Firebase JS SDK v7.20.0 and later, 
// measurementId is optional 
var firebaseConfig = { 
  apiKey: "AIzaSyAv_PFCLcflPPO5NYtXkz5r-H9J2IEQzUQ", 
  authDomain: "login-demo-a03bf.firebaseapp.com", 
  projectId: "login-demo-a03bf", 
  storageBucket: "login-demo-a03bf.appspot.com", 
  messagingSenderId: "831896060677", 
  appId: "1:831896060677:web:a0616c95abc1bcdedf6d6c", 
  measurementId: "G-XWHF8K6XSV", 
}; 
  
// Initialize Firebase 
firebase.initializeApp(firebaseConfig); 
  
const auth = firebase.auth(); 
  
// Signup function 
function signUp() { 
  var email = document.getElementById("email"); 
  var password = document.getElementById("password"); 
  
  const promise = auth.createUserWithEmailAndPassword( 
    email.value, 
    password.value 
  ); 
  promise.catch((e) => alert(e.message)); 
  alert("SignUp Successfully"); 
} 
  
// SignIN function 
function signIn() { 
  var email = document.getElementById("email"); 
  var password = document.getElementById("password"); 
  const promise = auth.signInWithEmailAndPassword( 
            email.value, password.value); 
  promise.catch((e) => alert(e.message)); 
} 
  
// SignOut 
function signOut() { 
  auth.signOut(); 
  alert("SignOut Successfully from System"); 
} 
  
// Active user to homepage 
firebase.auth().onAuthStateChanged((user) => { 
  if (user) { 
    var email = user.email; 
    alert("Active user " + email); 
  } else { 
    alert("No Active user Found"); 
  } 
});

现在在Firebase控制台中，转到身份验证 => 登录方法。

Firebase与Web的集成