Firebase 由 Google 于 2014 年推出，為其用戶提供后端服務(wù)。它提供了不同類型的高質(zhì)量服務(wù)，我們可以使用這些服務(wù)來開發(fā)移動(dòng)和網(wǎng)絡(luò)應(yīng)用程序。例如，它提供實(shí)時(shí)數(shù)據(jù)庫、用戶身份驗(yàn)證、云存儲(chǔ)等。此外，它還提供分析功能來分析應(yīng)用程序的流量。由于其快速設(shè)置而更受歡迎。
在本教程中，我們將學(xué)習(xí)如何將 Firebase 身份驗(yàn)證集成到單頁 Web 應(yīng)用程序中。
用戶應(yīng)按照以下步驟設(shè)置 Firebase 帳戶并將其與單頁 Web 應(yīng)用程序集成。
第 1 步 – 首先，訪問 Firebase 網(wǎng)站并創(chuàng)建一個(gè)帳戶。
第 2 步 – 現(xiàn)在，轉(zhuǎn)到 https://console.firebase.google.com/u/0/ 打開 Firebase 控制臺(tái)。
第 3 步 – 現(xiàn)在，單擊“創(chuàng)建項(xiàng)目”按鈕開始創(chuàng)建新項(xiàng)目。
第 4 步 – 在此填寫所需的詳細(xì)信息，然后單擊“繼續(xù)”按鈕。我們正在此處創(chuàng)建一個(gè)“測試”應(yīng)用程序。
第 5 步 – 選擇首選位置，接受條款和條件，然后單擊“創(chuàng)建項(xiàng)目”按鈕。之后，請等待它為您創(chuàng)建一個(gè)項(xiàng)目。
第 6 步 – 它會(huì)將您重定向到以下頁面。在這里，單擊“身份驗(yàn)證”卡元素。之后，單擊“開始”按鈕。
第 7 步 – 轉(zhuǎn)到“登錄方法”選項(xiàng)卡，然后單擊“電子郵件/密碼”字段。之后，啟用“電子郵件/密碼”方法，然后單擊“保存”按鈕。用戶還可以從此處啟用其他方式來驗(yàn)證您的 Web 應(yīng)用程序。
第 8 步 – 現(xiàn)在，單擊“項(xiàng)目設(shè)置”并從那里獲取 API 和項(xiàng)目 ID。將其存放在某處。我們將在下面的示例中使用它。
創(chuàng)建單頁靜態(tài)應(yīng)用程序
現(xiàn)在，F(xiàn)irebase 項(xiàng)目的設(shè)置已完成。接下來，我們將創(chuàng)建一個(gè)單頁靜態(tài)應(yīng)用程序。
步驟
第 1 步 – 以任一方式將 Firebase 添加到您的項(xiàng)目中。這里，我們添加了使用CDN。開發(fā)者也可以根據(jù)自己當(dāng)前從事的項(xiàng)目使用該SDK。
步驟 2 – 現(xiàn)在，構(gòu)建一個(gè)簡單的 HTML 模板來輸入電子郵件和密碼。另外，添加注冊、登錄和注銷按鈕。
第 3 步 – 在 JavaScript 中，使用 API 密鑰和項(xiàng)目 ID 初始化 Firebase 配置。
步驟 4 – 使用 onAuthStateChanged() 方法在身份驗(yàn)證狀態(tài)更改時(shí)打印消息。
第 5 步 – 使用 Firebase 的 auth() 方法初始化身份驗(yàn)證。
第 6 步 – 現(xiàn)在，創(chuàng)建一個(gè) addUsers() 函數(shù)以將用戶添加到 Firebase。在函數(shù)中訪問電子郵件和密碼，并使用 createUserWithEmailAndPassword() 方法將用戶添加到 Firebase。
第7步 – 現(xiàn)在，創(chuàng)建一個(gè)logIn()函數(shù)，并使用signInWithEmailAndPassword()方法使用電子郵件和密碼登錄應(yīng)用程序。
李>
第 8 步 – 另外，創(chuàng)建一個(gè) logout() 函數(shù)，它使用 signOut() 方法來結(jié)束當(dāng)前會(huì)話。
示例
在下面的示例中，我們創(chuàng)建了一個(gè)帶有兩個(gè)輸入字段的簡單表單。每當(dāng)用戶單擊注冊按鈕時(shí)，它都會(huì)調(diào)用 addUsers() 函數(shù)，該函數(shù)將用戶添加到 Firebase。如果用戶輸入弱密碼或錯(cuò)誤的電子郵件地址，F(xiàn)irebase 將返回錯(cuò)誤。
此外，當(dāng)用戶單擊登錄按鈕時(shí)，它會(huì)調(diào)用“l(fā)ogin()”函數(shù)，該函數(shù)允許用戶登錄應(yīng)用程序。如果用戶輸入錯(cuò)誤的密碼或電子郵件，F(xiàn)irebase 會(huì)返回錯(cuò)誤。當(dāng)用戶單擊signOut按鈕時(shí)，它會(huì)執(zhí)行signOut()函數(shù)，結(jié)束當(dāng)前會(huì)話。
注意 – 這里，開發(fā)者需要根據(jù)他們的項(xiàng)目更改API密鑰、項(xiàng)目ID和項(xiàng)目域。生成以下憑據(jù)僅用于測試目的。
<html>
<head>
<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>
<style>
button {
width: 100px;
height: auto;
padding: 5px 10px;
background-color: aqua;
border: 2px solid green;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>
Using the <i> Firebase auth </i> to add authentication in a single page static website.
</h2>
<div class = "container">
<h2>Enter the email and password below.</h2>
<input type = "email" placeholder = "abcd@gamil.com" id = "email" />
<br /> <br />
<input type = "password" placeholder = "Add password" id = "password" />
<br /> <br />
<button onclick = "addUsers()" id = "signUp">
SignUp
</button>
<button onclick = "login()" id = "logIp">
SignIn
</button>
<button onclick = "logout()" id = "logOut">
SignOut
</button>
<br> <br>
<div id = "output"> </div>
</div>
<script>
let output = document.getElementById('output');
// Your web app's Firebase configuration
var initialConfig = {
apiKey: "AIzaSyBsYILuhF4wOGOe0rFhPudhVWO3cGh2z18", // change API keu
authDomain: "localhost", // change domain
projectId: "test-application-45005", // change project Id
};
// Initialize Firebase
firebase.initializeApp(initialConfig);
const authenticate = firebase.auth();
// Check if there are any active users
firebase.auth().onAuthStateChanged((user) => {
if (user) {
var email = user.email;
output.innerHTML = "Active user is " + email + "<br>";
} else {
output.innerHTML = "No active users" + "<br>";
}
});
// add users
function addUsers() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
// adding users via the promise
authenticate.createUserWithEmailAndPassword(
email,
password
).then((userCredential) => {
output.innerHTML = "User added successfully and user id is " + userCredential.user.uid + "<br>";
}).catch((e) => {
output.innerHTML = "Some error occurred - " + e.message + "<br>";
});
}
// login function
function login() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
authenticate.signInWithEmailAndPassword(
email, password).then((userCredential) => {
output.innerHTML = "User login successfully and user id is " + userCredential.user.uid + "<br>";
}).catch((e) => {
output.innerHTML = "Some error occurred - " + e.message + "<br>";
});
}
// logout currently logged-in user
function logout() {
authenticate.signOut();
output.innerHTML = "User logout successfully";
}
</script>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會(huì)了如何將 Firebase 與 Web 應(yīng)用程序集成。對于經(jīng)驗(yàn)豐富的開發(fā)人員來說，將 Firebase 與任何 Web 應(yīng)用程序集成幾乎不需要 15 分鐘。此外，如果用戶在登錄應(yīng)用程序時(shí)輸入弱密碼，它會(huì)給出錯(cuò)誤，并且它會(huì)管理開發(fā)人員無需擔(dān)心的所有其他內(nèi)容。
此外，開發(fā)者還可以將 Firebase 數(shù)據(jù)庫與任何 Web 或移動(dòng)應(yīng)用程序一起使用。
以上就是Firebase 與 Web 集成的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
