התחל בעבודה עם אימות Firebase באתרים

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

חבר את האפליקציה שלך ל-Firebase

התקן את Firebase SDK . הקפד להדביק את קוד התצורה בדף האינטרנט שלך כמתואר.

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

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

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

השימוש באמולטור האימות כולל רק כמה שלבים:

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

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

כעת נמשיך עם איך לאמת משתמשים.

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

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

גרסת אינטרנט 9

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

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

גרסת אינטרנט 8

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

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

גרסת אינטרנט 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

גרסת אינטרנט 8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

הצעדים הבאים

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