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

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

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

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

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

Web 

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);

Web 

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.

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

הרשמה של משתמשים חדשים

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

Web

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

Web

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

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

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

Web

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

Web

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. כשמשתמש נכנס לחשבון, אפשר לקבל מידע עליו במעקב.

Web

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

Web

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

השלבים הבאים

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