Firebase auth juhend¶
Selle juhendi järgimiseks on vaja¶
Programeerimise keskkonna seadistamine¶
Juhendis kasutatav veebileht näeb välja järgnev:

<html>
<head>
<title>Firebase auth</title>
</head>
<body>
<!--Hoiame veebilehe elemente lehe keskel-->
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh">
<!-- Anname kasutajale teada, kas on saanud sisse logida või konto registreerida -->
<h1 id="feedback" style="display: none"></h1>
<!-- Emaili küsimise jaoks kasutatav väli -->
<label>
Email
<input id="emailInput"/>
</label>
<!-- Parooli küsimise jaoks kasutatav väli -->
<label>
Password
<input id="passwordInput"/>
</label>
<!-- Konto tegemise nupp -->
<button id="signUp">Sign up</button>
<!-- Sisselogimise nupp -->
<button id="logIn">Log in</button>
</div>
<!--Viide javascripti failile -->
<script type="module" src="script.js"></script>
</body>
</html>
Veebilehe index.html
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
const firebaseConfig = {
// Lisa siia oma firebaseConfig
};
// Loome ühenduse Firebase'iga
const app = initializeApp(firebaseConfig);
Veebilehe script.js
Firebase'i seadistamine¶

Firebase'i rakendusest vali "Build" > "Authentication"

Vajuta nupule "Get started"

Selle juhendi jaoks valime "Email / Password"

Lülita esimene valik sisse ja vajuta "Save"

Nüüd on võimalik registreerida ja sisse logida kasutades parooli ning emaili
Kasutaja konto registreerimine¶
Selles juhendi osas tegeleme kasutaja konto registreerimisega.
Teeme handleSignUp()
funktsiooni ning lisame selle nupule JavaScript failis¶
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
// Lisame Sign Up nupule funktsiooni, mille välja kutsume, kui vajutatakse nupu peale
document.getElementById("signUp").addEventListener("click", handleSignUp);
// Funktsioon, millega kasutaja registreerime
function handleSignUp() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
feedback.innerHTML = "clicked the button!";
}
script.js

Kui "Sign Up" nupule vajutada, siis tuleb tekst "clicked on the button!"
Küsime html failist kasutaja emaili ja parooli¶
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
document.getElementById("signUp").addEventListener("click", handleSignUp);
function handleSignUp() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
// Küsime emaili
const email = document.getElementById("emailInput").value;
// Küsime parooli
const password = document.getElementById("passwordInput").value;
// Logime saadud emaili ja parooli konsooli
console.log(email);
console.log(password);
feedback.innerHTML = "clicked the button!";
}
script.js

Peale "Sign up" nupu vajutamist näeme, et konsoolis on email ja parool
Lisame Firebase’i konto loomise jaoks vajalikud importid ning täiendame handleSignUp() funktsiooni¶
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
// Küsime vajalikud meetodid
import {getAuth, createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
document.getElementById("signUp").addEventListener("click", handleSignUp);
function handleSignUp() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
const email = document.getElementById("emailInput").value;
const password = document.getElementById("passwordInput").value;
// Ühendame Firebase'i auth keskkonnaga
const auth = getAuth();
// Loome kasutaja kasutades emaili ja passwordi
createUserWithEmailAndPassword(auth, email, password)
// kui kasutajale on konto tehtud, siis anname talle sellest teada
.then(() => {
feedback.innerHTML = "Account was made!"
})
// Kui tekib viga, siis näitame seda kasutajale
.catch((error) => {
feedback.innerHTML = error.message;
})
}
script.js

Kui sisestad õiges formaadis emaili ja parooli, tulemus on selline
![]() Kui email on vigane |
![]() Kui email on juba kasutusel |
![]() Kui parool on vigane |
Kasutaja kontoga sisse logimine¶
Selles osas vaatame, kuidas kasutaja oma kontoga sisse logida saaks.
Kontrollime, et kasutajal on juba konto Firebase’is olemas:¶

Loodud kasutajad leiad “Build” > “Authentication” > “Users” alt
Teeme handeLogIn() funktsiooni ning lisame selle nupule javascript failis¶
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
// Lisame Log In nupule funktsiooni, mille välja kutsume, kui vajutatakse nupu peale
document.getElementById("logIn").addEventListener("click", handleLogIn);
// Funktsioon, millega kasutaja sisse logime
function handleLogIn() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
feedback.innerHTML = "Clicked on log in button!";
}
script.js

Nupule vajutades saame tagasisideks, et oleme nupule vajutanud
Küsime kasutaja emaili ja parooli, mille on väljadesse sisestanud¶
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
document.getElementById("logIn").addEventListener("click", handleLogIn);
function handleLogIn() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
// Küsime emaili välja väärtust
const email = document.getElementById("emailInput").value;
// Küsime passwordi välja väärtust
const password = document.getElementById("passwordInput").value;
// Näitame väärtusi konsoolis
console.log(email);
console.log(password);
feedback.innerHTML = "Clicked on log in button!";
}
script.js

Peale “Log In” nupu vajutamist näeme, et konsoolis on email ja parool
Lisame Firebase’i konto loomise jaoks vajalikud importid ning täiendame handleLogIn() funktsiooni¶
script.js

Kui kasutaja parool ja email on õige
![]() Kui parool on vale |
![]() Kui email on vale |
Lõplik kood¶
<html>
<head>
<title>Firebase auth</title>
</head>
<body>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh">
<h1 id="feedback" style="display: none"></h1>
<label>
Email
<input id="emailInput"/>
</label>
<label>
Password
<input id="passwordInput"/>
</label>
<button id="signUp">Sign up</button>
<button id="logIn">Log in</button>
</div>
<script type="module" src="script.js"></script>
</body>
</html>
index.html
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
import {getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
document.getElementById("signUp").addEventListener("click", handleSignUp);
document.getElementById("logIn").addEventListener("click", handleLogIn);
function handleSignUp() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
const email = document.getElementById("emailInput").value;
const password = document.getElementById("passwordInput").value;
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then(() => {
feedback.innerHTML = "Account was made!";
})
.catch((error) => {
feedback.innerHTML = error.message;
});
}
function handleLogIn() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
const email = document.getElementById("emailInput").value;
const password = document.getElementById("passwordInput").value;
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then(() => {
feedback.innerHTML = "User has been logged in!";
})
.catch((error) => {
feedback.innerHTML = error.message;
});
}
script.js