Firebase auth juhend¶
Selle juhendi järgimiseks on vaja¶
Programmeerimise keskkonna seadistamine¶
Juhendis kasutatav veebileht näeb välja järgnev:
index.html
<!DOCTYPE html>
<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" type="email"/>
</label>
<!-- Parooli küsimise jaoks kasutatav väli -->
<label>
Password
<input id="passwordInput" type="password"/>
</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>
script.js
// Importime initializeApp funktsiooni
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);
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¶
script.js
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!";
}
Kui "Sign Up" nupule vajutada, siis tuleb tekst "clicked on the button!"
Küsime HTML failist kasutaja emaili ja parooli¶
Täiendame funktsiooni, et saada kätte sisestatud andmed:
script.js .. code-block:: javascript
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 (kontrollimiseks) console.log(email); console.log(password);
feedback.innerHTML = "Andmed loetud (vaata konsooli)";
}
Peale "Sign up" nupu vajutamist näeme, et konsoolis on email ja parool
Lisame Firebase’i konto loomise loogika¶
Nüüd impordime getAuth ja createUserWithEmailAndPassword ning teeme konto päriselt valmis.
script.js
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
// Lisame auth impordi
import {getAuth, createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
// Initsialiseerime auth teenuse
const auth = getAuth(app);
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;
// 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!"
feedback.style.color = "green";
})
// Kui tekib viga, siis näitame seda kasutajale
.catch((error) => {
feedback.innerHTML = error.message;
feedback.style.color = "red";
})
}
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 handleLogIn() funktsiooni ning lisame selle nupule javascript failis¶
script.js
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!";
}
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!";
}
Peale “Log In” nupu vajutamist näeme, et konsoolis on email ja parool
Lisame sisselogimise loogika¶
Impordime signInWithEmailAndPassword funktsiooni ja kasutame seda.
script.js .. code-block:: javascript
import {initializeApp} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
// Küsime vajalikud meetodid import {getAuth, signInWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/11.0.2/firebase-auth.js";
const firebaseConfig = {};
const app = initializeApp(firebaseConfig);
// Ühendame Firebase'i auth keskkonnaga const auth = getAuth(app);
document.getElementById("logIn").addEventListener("click", handleLogIn);
- function handleLogIn() {
const feedback = document.getElementById("feedback"); feedback.style.display = "block";
const email = document.getElementById("emailInput").value; const password = document.getElementById("passwordInput").value;
// Logime sisse emaili ja parooliga signInWithEmailAndPassword(auth, email, password)
// Kasutaja on sisse logitud .then(() => {
feedback.innerHTML = "User has been logged in!"; feedback.style.color = "green";
}) // Kui kasutaja sisse logimisel tekib viga .catch((error) => {
feedback.innerHTML = error.message feedback.style.color = "red";
});
}
Kui kasutaja parool ja email on õige
Kui parool on vale |
Kui email on vale |
Lõplik kood¶
Siin on terviklik lahendus, kus on koos nii registreerimine kui ka sisselogimine.
index.html
<!DOCTYPE html>
<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" type="email"/>
</label>
<label>
Password
<input id="passwordInput" type="password"/>
</label>
<button id="signUp">Sign up</button>
<button id="logIn">Log in</button>
</div>
<script type="module" src="script.js"></script>
</body>
</html>
script.js
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);
const auth = getAuth(app);
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;
createUserWithEmailAndPassword(auth, email, password)
.then(() => {
feedback.innerHTML = "Account was made!";
feedback.style.color = "green";
})
.catch((error) => {
feedback.innerHTML = error.message;
feedback.style.color = "red";
});
}
function handleLogIn() {
const feedback = document.getElementById("feedback");
feedback.style.display = "block";
const email = document.getElementById("emailInput").value;
const password = document.getElementById("passwordInput").value;
signInWithEmailAndPassword(auth, email, password)
.then(() => {
feedback.innerHTML = "User has been logged in!";
feedback.style.color = "green";
})
.catch((error) => {
feedback.innerHTML = error.message;
feedback.style.color = "red";
});
}