Firebase auth juhend

Selle juhendi järgimiseks on vaja

Programeerimise keskkonna seadistamine

Juhendis kasutatav veebileht näeb välja järgnev:

Veebileht 
<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 veebilehelt build

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

Firebase veebilehelt "Get started"

Vajuta nupule "Get started"

Firebase veebilehelt "Email / Password"

Selle juhendi jaoks valime "Email / Password"

Firebase veebilehelt "Save"

Lülita esimene valik sisse ja vajuta "Save"

Firebase veebilehelt all set

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

Veebileht sõnum "Clicked the button"

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

Veebilehe vaade konsoolis, on email ja parool

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

Õigete sisendidtega tulemus

Kui sisestad õiges formaadis emaili ja parooli, tulemus on selline

Vigane email tulemus

Kui email on vigane

 Email on kasutusel tulemus

Kui email on juba kasutusel

 Vigane parool tulemus

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:

Kontroll konto eksisteerimisel

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 vajutatud tulemus

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” vajutamist konsoolis on email ja parool

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

Õigete sisendidtega tulemus, sisse logitud

Kui kasutaja parool ja email on õige

Vigase parooli error

Kui parool on vale

 Vigase emaili error

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

Kasutatud allikad