Firebase kasutamine HTMLi ja Javascriptiga¶

Note

Näidetes kasutame HTMLi, Firebase-i ja Javascripti ilma front-end raamustikudeta.

Google Firebase on arendustööriistade komplekt, mis aitab arendajatel oma rakendusi luua. Meie kasutame Firebase Database-i, et hoida oma andmeid JSON kujul pilves.

Firebase'i paigaldamine¶

Minge lehele Firebase.
Vajutage “Go to console” (asub tavaliselt lehe paremal üleval).
Logige sisse oma Google'i kontoga.
Vajutage "Create a new Firebase project". Kui kasutate Firebase esimest korda, siis on teil selle asemel hoopis ees "Get started with a Firebase project", vajutage seda.
Sisestage oma projekti nimi ja vajutage "Continue”. Seejärel võtke "Enable Google Analytics for this project" valik maha ja vajutage "Create project".
Lõpetage projekti loomine järgides ekraanil kuvatavaid juhiseid.
Projekti overview all valige “+ Add App”.
Avanenud menüüs vajutage </> sümboli peale, et luua uus veebirakendus.
Pange oma veebirakendusele nimi. Vaadake, et "Also set up Firebase Hosting for this app" linnuke EI OLEKS märgitud. Vajutage "Register app".
Terminalis laadige Firebase SDK alla. Selle jaoks avage terminal ja kirjutage "npm install firebase" ning seejärel vajutage Enter.
Oma projekti tuleb luua uus fail .js laiendusega. Nimeks võime panna nt signup.js. See fail sisaldab JavaScripti koodi, mis võimaldab veebilehel erinevaid toiminguid teha.
Sinna faili lisame teises sammus saadud koodijupp oma configiga. See kood ühendab teie veebirakenduse Firebase'iga.
Vajutage nuppu “Continue to the console”.

Abiks: Firebase Web Setup

Meili ja parooliga sisselogimise funktsionaalsuse loomine¶

Enne alustamist¶

Ühendage oma veebirakendus Firebase projektiga (vaata eelmist peatükki).
Luba meili/parooliga sisselogimine:
1. Valige Firebase'i konsoolis vasakul Product categories all Security -> Authentication. Vajutage "Get started"
2. Sign in method tabis lubage Email/password sisselogimismeetod ja vajutage nuppu Save.

Sisselogimisakna lisamine¶

Loome HTML faili ja lisame sinna vajaliku koodi, et luua aken, kus kasutaja saab endale profiili luua. Näites loome HTML vormi, kuhu lisame kolm input-akent: email, password ja nupp. Kui nuppu vajutatakse, käivitatakse funktsioon, mis asub failis signup.js, nimega mySignup.

Note

Kuna Firebase v12 kasutab ES mooduleid, peame scripti lisamisel kasutama atribuuti type="module".

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body>
    <div id="formContent">
        <!-- Registreerimisvorm -->
        <form id="myForm">
            <p>Sign up</p>
            <!-- Kasutajanime sisestusväli, mille id on "email" -->
            <input type="text" id="email" name="signup" placeholder="username"/>
            <!-- Parooli sisestusväli, mille id on "password" -->
            <input type="password" id="password" name="signup" placeholder="password"/>
            <!-- Nupp, mis käivitab JavaScripti funktsiooni, mis asub failis “signup.js”, "mySignup" klikkimisel -->
            <input id="sign_up_btn" type="button" value="Sign up"/>
        </form>
        <!-- Koht, kuhu ilmub võimalik vea sõnum; alguses on klass "error" määratud, kuid sisu on tühi -->
        <p id="error" class="error"></p>
    </div>
    <!-- Lisame scripti kui mooduli -->
    <script type="module" src="../js/signup.js"></script>
</body>
</html>

Signup.js failis impordime vajalikud funktsioonid ja initsialiseerime äpi.

// Importime vajalikud funktsioonid (kasutame URL-e, et brauser neid leiaks)
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.19.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/12.19.0/firebase-auth.js";

// Firebase'i konfiguratsioon; NB! siin peavad olema teie rakenduse andmed
const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_AUTH_DOMAIN",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_STORAGE_BUCKET",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

// Firebase'i initsialiseerimine
const app = initializeApp(firebaseConfig);
// Autentimise teenuse käivitamine
const auth = getAuth(app);

// Ootame, et leht oleks laetud
document.addEventListener('DOMContentLoaded', () => {
    const signUpBtn = document.getElementById('sign_up_btn');
    if (signUpBtn) {
        // Seome nupu klikkimise funktsiooniga
        signUpBtn.addEventListener('click', mySignup);
    }
});

function mySignup() {
    // Saab sisendi, mille id on "email"
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    // Leiab elemendi, kuhu kuvatakse veateated
    const errorElement = document.getElementById('error');

    // Kasutaja loomine emaili ja parooliga
    createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Kasutaja registreeritud
            const user = userCredential.user;
            console.log('Kasutaja registreeritud:', user);
            // Saate suunata kasutaja teisele lehele
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.error('Registreerimise viga:', errorCode, errorMessage);
            // Kuvage kasutajale veateade
            errorElement.textContent = errorMessage;
            errorElement.style.color = 'red';
        });
}

const firebaseConfig = { ... }: See osa sisaldab teie Firebase projekti konfiguratsiooni andmeid.
const app = initializeApp(firebaseConfig): See rida initsialiseerib Firebase'i teie projektis.
const auth = getAuth(app): See rida loob ühenduse autentimisteenusega, kasutades eelnevalt loodud app objekti.
function mySignup() { ... }: See on funktsioon, mis käivitub, kui kasutaja vajutab nuppu "Sign up".
const email = document.getElementById('email').value;: See rida võtab kasutaja sisestatud e-posti aadressi.
const password = document.getElementById('password').value;: See rida võtab kasutaja sisestatud parooli.
createUserWithEmailAndPassword(auth, email, password): See rida võtab esimese argumendina autentimise objekti (auth) ning loob uue kasutaja.
.then((userCredential) => { ... }): Kui kasutaja loomine õnnestub, käivitatakse see plokk.
.catch((error) => { ... }): Kui kasutaja loomisel tekib viga, käivitatakse see plokk.

Kui soovite uurida rohkem Firebase kohta ning lisada sisselogimise: Firebase Auth