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

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

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

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

  2. מוסיפים את Firebase Authentication JS SDK ומפעילים את 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 של Authentication בארכיטקטורת REST לבדיקה לא אינטראקטיבית.

מדריך מפורט זמין במאמר חיבור האפליקציה לאמולטור של 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

השלבים הבאים

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