תחילת השימוש באימות ב-Firebase באתרים

אתם יכולים להשתמש ב-Firebase Authentication כדי לאפשר למשתמשים להיכנס לאפליקציה באמצעות שיטת כניסה אחת או יותר, כולל כניסה באמצעות כתובת אימייל וסיסמה, וספקי זהויות מאוחדות כמו "כניסה באמצעות חשבון Google" ו"התחברות דרך פייסבוק". במדריך הזה נסביר איך להתחיל להשתמש ב-Firebase Authentication, ואיך להוסיף לאפליקציה כניסה באמצעות כתובת אימייל וסיסמה.

הוספה ואתחול של ה-SDK של Authentication

1. אם עדיין לא עשיתם זאת, התקינו את Firebase JS SDK והפעילו את Firebase.

2. מוסיפים את ה-JS SDK של Firebase Authentication ומפעילים את Firebase Authentication:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(אופציונלי) יצירת אב טיפוס ובדיקה באמצעות Firebase Local Emulator Suite

לפני שנדבר על האופן שבו האפליקציה מאמתת משתמשים, נציג קבוצה של כלים שבהם אפשר להשתמש כדי ליצור אב טיפוס ולבדוק את הפונקציונליות של Authentication: Firebase Local Emulator Suite. אם אתם מתלבטים בין שיטות אימות וספקים, מנסים מודלים שונים של נתונים עם נתונים ציבוריים ופרטיים באמצעות Authentication ו-Firebase Security Rules, או יוצרים אב טיפוס של עיצובי ממשק משתמש לכניסה, כדאי לעבוד באופן מקומי בלי לפרוס שירותים פעילים.

אמולטור Authentication הוא חלק מ-Local Emulator Suite, שמאפשר לאפליקציה שלכם לקיים אינטראקציה עם תוכן ועם הגדרות של מסד נתונים מדומה, וגם עם משאבי הפרויקט המדומים (פונקציות, מסדי נתונים אחרים וכללי אבטחה).

כדי להשתמש באמולטור של Authentication, צריך לבצע כמה שלבים פשוטים:

1. מוסיפים שורת קוד להגדרת הבדיקה של האפליקציה כדי להתחבר לאמולטור.
2. מפעילים את הפקודה firebase emulators:start מהשורש של ספריית הפרויקט המקומית.
3. שימוש בממשק המשתמש של Local Emulator Suite ליצירת אב טיפוס אינטראקטיבי, או ב-API בארכיטקטורת REST של אמולטור Authentication לבדיקה לא אינטראקטיבית.

מדריך מפורט זמין במאמר קישור האפליקציה לאמולטור של Authentication. מידע נוסף זמין במאמר מבוא ל-Local Emulator Suite.

עכשיו נמשיך ונסביר איך לאמת משתמשים.

רישום משתמשים חדשים

יוצרים טופס שמאפשר למשתמשים חדשים להירשם לאפליקציה באמצעות כתובת אימייל וסיסמה. כשהמשתמש ממלא את הטופס, מאמתים את כתובת האימייל והסיסמה שהמשתמש סיפק, ואז מעבירים אותן ל-method‏ createUserWithEmailAndPassword:

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

כניסה של משתמשים קיימים

יוצרים טופס שמאפשר למשתמשים קיימים להיכנס באמצעות כתובת האימייל והסיסמה שלהם. כשמשתמש ממלא את הטופס, קוראים ל-method‏ signInWithEmailAndPassword:

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

הגדרת צופה במצב האימות וקבלת נתוני משתמשים

בכל אחד מהדפים באפליקציה שצריך מידע על המשתמש המחובר, צריך לצרף משקיף לאובייקט האימות הגלובלי. המשקיף הזה נקרא בכל פעם שסטטוס הכניסה של המשתמש משתנה.

מצרפים את ה-observer באמצעות השיטה onAuthStateChanged. כשהמשתמש נכנס לחשבון, אפשר לקבל מידע על המשתמש ב-observer.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

השלבים הבאים

כדי להוסיף תמיכה בספקי זהויות אחרים ובחשבונות אורח אנונימיים:

• כניסה באמצעות חשבון Google
• התחברות דרך פייסבוק
• התחברות ל-Twitter
• התחברות ל-GitHub
• כניסה אנונימית